@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap'); 

.lexend-light {
 font-family: 'Lexend', sans-serif;
 font-weight: 300;
}

.lexend-bold {
 font-family: 'Lexend', sans-serif;
 font-weight: 700;
}

     body{
         background-color: rgb(240, 245, 255);
         margin: 0;
         line-height: 1.7em;
         font-family: 'Lexend',sans-serif;
     }

     main{
         width: fit-content;
         
         margin: 0 auto;
     }

     .menu{
         display: flex;
         align-items: center;
         background-color: rgb(10, 29, 46);
         padding: 0;
        visibility: visible;
        text-decoration: none;
     }


     .header{
         display: flex;
         flex-grow: 1;
         margin: 0;
         padding: 0;
         background-color: rgb(10, 29, 46);
         flex-direction: row-reverse;
         list-style-type: none;
         
     }

     li{
         margin: 0;
         list-style: none;
     }

     li a{
         display: block;
         color: rgb(240, 245, 255);
         text-align: center;
         padding: 20px 24px;
         font-size: 18px;
         text-decoration: none;
         align-items: center;
         justify-content: center;
     }

     li a:hover{
         background-color: rgb(240, 245, 255);
         color: rgb(10, 29, 46);
     }

     .menu-small{
         display: block;
         align-items: left;
         background-color: rgb(10, 29, 46);
         padding: 0;
         text-decoration: none;
        
         
       
         
     }

     .off-screen-menu{
       
        margin: 15px;
        background-color: rgb(10, 29, 46);
        color: rgb(240, 245, 255);
        text-decoration: none;
        height: 100vh;
        width: 100%;
        max-width: 450px;
        position: fixed;
        top: 0;
        right: -470px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 3rem;
        transition: .3s ease;
     }
     .off-screen-menu.active{
        right: 0;
         color: rgb(240, 245, 255);
        text-decoration: none;
        
     }

     .off-screen-menu.off-screen-menu-text{
         color: rgb(240, 245, 255);
        text-decoration: none;
       
     }

     

     .nav {
        padding: 1rem;
        display: flex;
        background-color: rgb(10, 29, 46);
     }

     .ham-menu{
        height: 50px;
        width: 50px;
        margin-left: auto;
        position: relative;
     }

     .ulSmall{
         display: flex;
         flex-grow: 5;
         margin: 0;
         padding: 0;
         background-color: rgb(244, 250, 255);
         flex-direction: row-reverse;
         list-style-type: none;
     }

     
    .ham-menu span{
        height: 5px;
        width: 100%;
        background-color: rgb(240, 245, 255);
        border-radius: 25px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: .3s ease;
    }
        

    .ham-menu span:nth-child(1) {
        top: 25%;
    }
    .ham-menu span:nth-child(3) {
        top: 75%;
    }

    .ham-menu.active span:nth-child(1) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .ham-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .ham-menu.active span:nth-child(3) {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    


/* --- Small Screen --- */

/*@media only screen and (max-width:1200px) {*/
    
.menu{
    visibility: hidden;
    width: 0px;
    height: 0px;
}
ul{
         visibility: hidden;
         width: 0px;
         height: 0px;
     }

.menu-small{
        
         visibility: visible;
     }

     .off-screen-menu{
        visibility: visible;
     }
     
     .off-screen-menu.active{
        right: 0;
     }
     .ulSmall{
        visibility: visible;
     }

     .ham-menu{
        height: 50px;
        width: 50px;
        margin-left: auto;
        position: relative;
     }
    .ham-menu span{
        height: 5px;
        width: 100%;
        background-color: rgb(240, 245, 255);
    }

    .off-screen-menu.active{
        right: 0;
         color: rgb(240, 245, 255);
       text-decoration: none;
        visibility: visible;
     }

     .off-screen-menu.off-screen-menu-text{
         color: rgb(240, 245, 255);
        text-decoration: none;
        visibility: visible;
     }