@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gelasio:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');


:root{
    --yellow: #FFD803;
    --title: #272343;
    --p: #2D334A;
    --background: #FFFFFE;
    --diciasette: 1.063rem;
    --dieci: 0.625rem;
    --venti: 1.25rem;
    --trenta: 1.875rem;
    --quarantadue: 2.625;
    --cinquanta: 3.125rem;
    --settanta: 4.375rem;

}

*, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--background);
    scroll-behavior:smooth;
}


#loader{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #loader{
    font-size: 28.43px;
    font-family:serif;
    font-style: italic;
    color: var(--title);
    background-color: var(--background);
  }

  .loader-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 40vh;
    justify-content: space-evenly;
    width: 60vh;
  }

  .loading{
    padding: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }


  .loading img{
    width: 70%;
  }

    @-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .loading img {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 1.5s linear infinite;
  }

#ultra-mega-container{
    display: none;
}

    /*NAVBAR*/

    .ham {
        top: 0%;
        position: fixed;
        z-index: 100;
        width: 100vw;
        height: 6vh;
        background: var(--background);
        cursor: pointer;
        border: none;
    }

    .menuIcon{
    color: var(--title);
    font-size: 35px;
    }

    .xIcon {
    display: none;
    color: var(--title);
    font-size: 35px;
    }

    .menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: var(--background);
    transform: translateX(-100%);
    transition: transform 0.2s;
    list-style: none;
    padding-top: 13vh;
    padding-left: 10vw;
    }

    .showMenu {
    transform: translateX(0);
    }

    li {
    padding: 1rem 0;
    }

    .menuLink {
    display: inline;
    font-family: "Bree serif", serif;
    font-size: 28.43px;
    color: var(--title);
    text-decoration: none;
    }

    .menuLink:hover {
    font-style: italic;
    }


    /*INTRO*/

    .mega-container{
        margin: 8vh 8vw;
    }


    .intro-img-container{
        width: 100%;
    }

    .intro-img-container img{
        width: 100%;
    }

    a:hover{
        cursor: pointer;
    }

    /*SECTION*/

    .section{
        padding-top: 9.375rem;
    }

    h1{
        margin: 0%;
        font-family: "Bree serif", serif;
        font-size: 50.2px;
        color: var(--title);
        margin-bottom: var(--venti);
    }


    .section p{
        margin: 0%;
        font-size: 21.43px;
        font-family: "Bree serif", serif;
        color: var(--p);
    }

    .quote{
        margin: 0%;
        font-family: "Gelasio", italic;
        font-size: 28.43px;
        color: var(--title);
    }

    .bio p{
        margin-bottom: var(--trenta);
    }

    .bio .quote{
        margin-bottom: var(--trenta);
    }


    /*BUTTON*/
    .button{
        margin: 0%;
        padding: 2vw 4vh;
        background-color: #FFD803;
        display: inline-block;
        color: var(--title);
        text-decoration: none;
        font-size: 21.43px;
        font-family: "Bree serif", serif;
        background-color: #FFD803;
    }

    .button:hover{
        opacity: 0.8;
        transition: .3s;
    }

    /*LIBRO*/

    .libro p{
        margin-bottom: var(--trenta);
    }

    .rec-img-container img{
        width: 100%;
        font-size: 0;
    }  
    
    .rec-img-container{
        display: inline-block;
        margin-bottom: 30px;
    }

    .comp-rec{
        display: flex;
        flex-direction: column;
    }



    /*CORSI*/

    .section h2{
        font-family: "Bree serif", serif;
        font-size: 28.43px;
        color: var(--title);
        margin: 0%;
    }

    .corsi p{
        margin: 0%;
    }

    .singolo-corso h2{
        margin-bottom: var(--venti);
    }

    .scopri-di-piu{
        display: flex;
        flex-direction: column;
    }


    .scopri-di-piu a{
        margin-top: 0vh;
        order: 2;
    }

    .scopri-di-piu .button{
        margin: 0%;
    }

    .singolo-corso p{
        margin: 0%;
        margin-bottom: var(--dieci);
    }

    .scopri-di-piu p{
        order: 1;
        margin: 0%;
        margin-bottom: var(--trenta);
    }

    .singolo-corso{
        padding: 0%;
        margin-top: var(--settanta);
    }

    .primo-corso{
        margin-top: 0%;
        margin-top: var(--cinquanta);
    }

    /*ARTICOLI*/

    .articoli a{
        font-size: 28.43px;
        font-family: "Bree serif", serif;
        color: var(--p);
        text-decoration-thickness: 2px;
        margin-bottom: var(--trenta);

    }

    .articoli p{
        margin-bottom: var(--venti);
    }

    .articoli-links{
        display: flex;
        flex-direction: column;
    }

    /*VIDEO*/

    .video .button{
        margin: 0%;
    }


    .each-video{
        padding: 0%;
        margin-top: var(--settanta);
    }

    .primo-video{
        margin: 0%;
        margin-top: var(--cinquanta);
    }

    .each-video h2{
        margin-bottom: var(--venti);
    }

    .each-video p{
        margin-bottom: var(--trenta);
    }

    /*FOOTER*/

    .footer{
        display: flex;
        flex-direction: column;
        border-top: 2px solid var(--title);
        margin-top: 9.375rem;
    }

    .footer a{
        font-size: 21.43px;
        color: var(--title);
        font-family: "Bree serif", serif;
        text-decoration: none;
        margin-top: var(--trenta);
        text-align: center;
    }

    .footer a:hover{
        font-style: italic;
    }

    
    @media(min-width: 800px){
        .mega-container{
            margin: 23vh 15vw;
        }

        .ham{
            display: none;
        }
    
        .menu{
            margin: 0vh 15vw;
            width: unset;
            padding-top: 5vh;
            height: 10vh;
            background: var(--background);
            transform: unset;
            list-style: none;
            padding: 0%;
            padding-top: 3vh;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid var(--title);
        }
    
            li {
            padding:0%;
            }
        
            .menuLink {
            display: unset;
            font-size: 21.43px;
            color: var(--title);
            text-decoration: none;
            }

            .intro-img-container{
                display: flex;
                justify-content: center;
                margin-bottom: 0%;
            }

            .intro-img-container img{
                width: 70%;
            }

            .rec-img-container img{
                width: 70%;
                font-size: 0;
            }  
            
            .rec-img-container{
                display: inline-block;
                margin-bottom: 30px;
            }
    }

    @media(min-width: 1200px){
        .mega-container{
            margin: 23vh 20vw;
        }

        .ham{
            display: none;
        }
    
        .menu{
            margin: 0vh 15vw;
            width: unset;
            padding-top: 5vh;
            height: 10vh;
            background: var(--background);
            transform: unset;
            list-style: none;
            padding: 0%;
            padding-top: 3vh;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid var(--title);
        }
    
            li {
            padding:0%;
            }
        
            .menuLink {
            display: unset;
            font-size: 21.43px;
            color: var(--title);
            text-decoration: none;
            }

            .intro-img-container{
                display: flex;
                justify-content: center;
                margin-bottom: 0%;
            }

            .intro-img-container img{
                width: 70%;
            }

            .button{
                margin: 0%;
                padding: 1vw 2vh;
                background-color: #FFD803;
                display: inline-block;
                color: var(--title);
                text-decoration: none;
                font-size: 21.43px;
                font-family: "Bree serif", serif;
                background-color: #FFD803;
            }
    }


    @media(min-width: 1400px){


        .mega-container{
            margin: 23vh 28vw;
        }

        .ham{
            display: none;
        }
    
        .menu{
            margin: 0vh 28vw;
            width: unset;
            padding-top: 5vh;
            height: 10vh;
            background: var(--background);
            transform: unset;
            list-style: none;
            padding: 0%;
            padding-top: 3vh;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid var(--title);
        }
    
            li {
            padding:0%;
            }
        
            .menuLink {
            display: unset;
            font-size: 21.43px;
            color: var(--title);
            text-decoration: none;
            }

            /*IMAGE INTRO*/

            .intro-img-container{
                display: flex;
                justify-content: center;
                margin-bottom: 0%;
            }

            .intro-img-container img{
                width: 60%;
            }

            /*BIO*/

            h1{
                font-size: 67.34px;
            }

            .button{
                padding: .7vw 2vh;
            }

            /*INTRO*/

            .bio .button{
                margin-top: 12px;
            }
            
            /*LIBRO*/


            /*CORSI*/

            .singolo-corso p{
                margin-bottom: var(--trenta);
            }

            .scopri-di-piu p{
                margin: 0%;
                order: 2;
                margin-left: 2vw;
            }

            .scopri-di-piu a{
                order: 1;
            }

            .scopri-di-piu{
                display: flex;
                flex-direction: row;
                align-items: center;
            }


            /*FOOTER*/

            .footer{
                flex-direction: row;
                justify-content: space-between;
            }


    }