:root {
    --color-blue: #437ff5; 
    --color-red: #e82625; 
    --color-superpo: #381624;
    --color-white: rgb(252, 249, 249); 
    --margin: 25px;
  }
  

*,
*:before,
*:after {
    -website-text-size-adjust: 100%;
             text-size-adjust: 100%;
    margin: 0;
    box-sizing: border-box;
}



@font-face {
    font-family: 'League';
    src: url('fonts/LeagueGothic-Regular.woff2') format('woff2'),
         url('fonts/LeagueGothic-Regular.woff') format('woff');
}



/* -------------- GENERAL ---------------*/

html {
    font-size: 10px; 
}


body {
    background-color: var(--color-blue);
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 2rem;
    overflow-x: hidden;
    width:100vw;
}

div{
    display: grid;
}

h1{
    font-family: 'League';
    font-size: 11rem;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    line-height:90%;
    letter-spacing: -0.05rem;
    padding-bottom:var(--margin);
}

h2{

    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 4.2rem;
    text-align: left;
    line-height:95%;
    padding-bottom:var(--margin);
}


h3{
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 3rem;
    text-align: left;
    line-height:97%;
    padding-bottom:calc((var(--margin))/2);
}


p{
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 2rem;
    text-align: left;
    padding-bottom:var(--margin);
}

em{
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 650;
    font-style: normal;
}

a {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color:inherit;

    text-align: left;
}

a:visited{
    color:inherit;
}

h3 p {
    line-height:100%;
}

h3 a {
    color:var(--color-blue);
}

h3 a:visited {
    color:var(--color-blue);
}


/* -------------- LOGO ---------------*/
.paneLogo{
    background-color: var(--color-superpo);
    color: var(--color-blue);
    height: 100vh;
    padding: calc(var(--margin)*2);
    display: flex;          
    align-items: center;   
    justify-content: center; 
    padding: calc(var(--margin)*2); 
}

.paneLogo img {
    width: 90vw;
    max-height:90vh;
    height: auto;
    display: block;
    margin: 0; 
}

.paneLogo a{
    color: var(--color-blue);
    text-decoration: none;
    position :absolute;
    bottom: var(--margin);
    font-size: 2rem;
}

#contact {
    left: var(--margin);
}

#insta {
    right: var(--margin);
}
/* -------------- INFOS ---------------*/
.paneInfos{
    background-color: var(--color-blue);
    color:var(--color-white);
    padding: calc(var(--margin)*2); 
}

.paneInfos h1{
    background-color: var(--color-blue);
    color:var(--color-white)
}

.paneInfos h2{
    text-align:center;
}


/* -------------- PROG ---------------*/
.paneProg{
    background-color: var(--color-white);
    color:var(--color-blue);
    padding: calc(var(--margin)*2); 
}

svg {
    fill: var(--color-blue);
    margin-right:calc((var(--margin))/2);
}

p svg {
    position: relative;
    top: 5px;
    margin-right:0;
}

.container-h3{
    display: flex;  
}

/* -------------- ABOUT ---------------*/
.paneAbout{
    background-color: var(--color-blue);
    color: var(--color-white);
    padding: calc(var(--margin)*2); 
}

.container-logo {
    width: calc(100vw - ((var(--margin))*4));
    display:inline-block;
    padding-top:calc((var(--margin))*2);
    
}

.container-logo img{
    width: 150px;
    margin-right:var(--margin);
    margin-bottom:calc((var(--margin))/2);
}

.container-poster img{
    width: calc(100vw - ((var(--margin))*4));
    padding-top:var(--margin);
}

/* -------------- MEDIA QUERIES ---------------*/



/* Phone*/
@media (max-width: 900px) {

    :root {
        --margin: 15px;
      }

    html{
        font-size:9px;
    }

    .paneInfos p{
        font-size:2.1rem;
    }

    .content {
        width: 100vw;
        /* overflow:hidden; */
    }

    .paneProg h2 {
        padding-top:calc((var(--margin))*2);
    }

    .paneProg h3 {
        padding-top:var(--margin);
    }

    h1{
        padding-bottom:calc((var(--margin))*2);
    }
    
    p{
        font-size:1.8rem;
    }

    em{
        font-size:2.1rem;
    }

    .paneInfos{
        width: 100vw;
    }

    .paneProg{
        width: 100vw;
    }

    .paneInfos{
        width: 100vw;
    }

} 


/* Small Desktop / Large Tablet */
@media (min-width: 901px) {

    html {
        font-size: 10px; 
    }

    .paneLogo {
        width: 50vw;
        position:fixed;
    }

    .content {
        width: 50vw;
        position: absolute;
        top:0;
        right:0;
    }

    .container-h3 h3 {
        width: calc(45vw - ((var(--margin))*4));
    }

    .container-logo {
        width: calc(45vw - ((var(--margin))*4));
    }

    .container-poster img{
        width: calc(50vw - ((var(--margin))*4));
    }

    .extra-padding{
        padding-bottom: calc((var(--margin))*2);
    }

}