html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html{
    background:#000;
    color:#FFF;
    font-size:10px;
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}

a:link{
    text-decoration:none;
    color:inherit;
}
a:visited{
    text-decoration:none;
    color:inherit;
}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}

h1{
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight:400;
    font-style:normal;
    user-select:none;
}

h2{    
    font-family:"Lato", sans-serif;
    font-weight:700;
    font-style:normal;
    user-select:none;
}

p{
    font-family:"Lato", sans-serif;
    font-weight:400;
    font-style:normal;
    user-select:none;
}

.cg_main{
    position:relative;
    display:flex;
    overflow-x:hidden;
}

.cg_main_img{
    background-image:url(charles_main.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position-x:33.6%;
    width:100vw;
    height:100vh;
    opacity:0;
}

.cg_main_img_go{
    transition:opacity 2s ease-out;
    opacity:1;
}

.cg_main_ctn{
    position:absolute;
    height:100%;
    display:flex;
    width:38rem;
    align-items:center;
    justify-content:center;
    right:0;
    background-color:rgba(19, 12, 50, 0.5);
    border-left:solid #453e95d6 0.1rem;
    backdrop-filter:blur(3rem);
    -webkit-backdrop-filter:blur(3rem);
    transform:translateX(39rem);
}

.cg_main_ctn_go{
    transform:translateX(0);
    transition:transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cg_main_wrap{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    width:80%;
}

.cg_main_ctn_blk{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.cg_main_ctn_blk > h1{
    font-size:4rem;
    margin-left:-0.3rem;
    margin-bottom:1rem;
    text-shadow:0.2rem 0.2rem 0.4rem rgba(0,0,0,0.35);
    letter-spacing:-0.2rem;
}
.cg_main_ctn_blk > h2{
    font-size:1.4rem;
    margin-bottom:1.1rem;
    text-shadow:0.2rem 0.2rem 0.4rem rgba(0,0,0,0.35);
}
.cg_main_ctn_blk > h2 > span{
    font-weight:400;
}
.cg_main_ctn_blk > p{
    font-size:1.3rem;
    text-shadow:0.2rem 0.2rem 0.4rem rgba(0,0,0,0.35);
}



.cg_main_ctn_links{
    position:relative;
    display:flex;
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:1rem;
    margin-top:3rem;
}

.cg_main_ctn_links > a{
    display:flex;
    flex-grow:1
}

.cg_link_blk{
    display:flex;
    position:relative;
    padding:1rem 1.6rem;
    align-items:center;
    justify-content:space-between;
    background-color:rgba(15, 10, 40, 0.559);
    border:0.1rem solid rgba(255,255,255,0.55);

    border-radius:0.4rem;
    min-width:9.6rem;
    flex-grow:1;
    transition:all 0.2s ease-out;

}

.cg_link_blk:hover{
    border-color:rgba(255, 255, 255, 0.589);
}

.cg_link_blk:active{
    border-color:rgba(255, 255, 255, 1);
    background-color:rgba(11, 7, 30, 0.868);
    transform:scale(0.95);
}


.cg_link_blk{border-color:#675ec7}

.cg_ig > span{background-image:url(ig.svg)}
.cg_fb > span{background-image:url(fb.svg)}
.cg_yt > span{background-image:url(yt.svg)}
.cg_sp > span{background-image:url(sp.svg)}

.cg_link_blk > p{
    font-weight:700;
    font-size:1.3rem;
}

.cg_link_blk > span{
    display:inline-block;
    width:3.6rem;
    height:3.6rem;
    background-size:100% 100%;
    margin-right:-0.6rem;
}

.cg_main_ctn_contact{
    margin-top:2.4rem;
}

.cg_contact_blk{
    min-width:10.8rem;
    flex-grow:1;
    justify-content:center;
    padding:1.3rem 1.6rem;
    background-color:rgba(15, 10, 40, 0.559);
}


.cg_footer{
    position:absolute;
    bottom:2.8rem;
    left:3.8rem;
    color:#FFF;
    font-size:1.2rem;
}

.cg_footer_blk{
    padding:1rem 1.2rem;
    font-weight:700;
    font-size:1.2rem;
    background-color:rgba(0, 0, 0, 0.41);
    border:0.1rem solid #453e95d6;
    border-radius:0.4rem;
    color:#aaa4eb;
    display:flex;
    align-items:center;
    justify-content:center;
    
    transition:all 0.2s ease-out;
}

.cg_footer_blk:hover{
    border:0.1rem solid #756dd1d6;
    color:#cac6fa;
}

.cg_footer_blk:active{
    background-color:rgba(0, 0, 0, 0.794);
    border:0.1rem solid #ffffff;
}

.cg_footer_photo{
    position:absolute;
    left:3.8rem;
    bottom:2.8rem;
    opacity:0;
    
    background-color:rgba(0, 0, 0, 0.705);
}

.cg_footer_photo_go{
    transition:opacity 0.6s ease-out;
    opacity:1;
    
    transition:all 0.2s ease-out;
}

.cg_footer_blk > span{
    display:inline-block;
    width:2rem;
    height:2rem;
    background-size:100% 100%;
}

.cg_footer_photo > p{
    margin-left:0.5rem
}

.cg_footer_photo > span{
    background-image:url(photo.svg)
}

.cg_footer_shockrouge > p{
    margin-right:0.5rem
}

.cg_footer_shockrouge > span{
    background-image:url(mini_shockrouge.svg)
}

.cg_footer_m{display:none}
.cg_footer_d{display:flex}

@media(max-width:550px){

    html{
        font-size:9px;
        overflow-y:hidden;
    }
    body{
        overflow-y:hidden;
    }

    .cg_main{
        overflow-y:hidden;
    }

    .cg_main_ctn_blk{
        padding-top:3.8rem;
    }
    .cg_main_ctn{
        width:100%;
        height:46.6rem;
        border-left:none;
        border-top:solid #453e95d6 0.1rem;
        right:initial;
        align-items:flex-start;
        left:0;
        bottom:0;
        transform:translateY(50rem);
    }

    .cg_main_ctn_go{
        transform:translateY(0rem);
    }

    .cg_main_img{
        background-image:url(charles_m.jpg);
        background-size:cover;
        background-position-y:initial;
        background-position-x:initial;
    }

    .cg_footer_d{display:none}
    .cg_footer_m{
        display:flex;
        margin-top:3rem;
    }
    
    .cg_main_ctn_links{
        
    }

    .cg_footer_bypass{
        flex-shrink:1;
        display:flex;
    }
    
    .cg_link_blk{
        min-width:14rem;
    }

    .cg_footer_photo{
        left:initial;
        bottom:initial;
        top:1rem;
        right:1rem;
        font-size:1rem;
        background-color: rgba(0, 0, 0, 0.55);
    }

    .cg_footer_photo > span{
        width:1.4rem;
        height:1.4rem;
    }
}

@media(max-width:450px){

    .cg_link_blk{
        min-width:10rem;
    }

}