@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap');





*{

    margin:0 ;

    padding: 0;

    box-sizing: border-box;

}

::selection{

    background-color: orange !important;

}

*::-webkit-selection{

    background-color: orange !important;

}

body{

    scroll-behavior: smooth;

}

body, html{

  overflow-x: hidden;

}

header{

    height: 10vh; 

    display: flex;

    align-items: center;

    justify-content: right;

    position: fixed;

    width: 100vw;

    padding-right: 2vw;

    z-index: 100;

}

header a{

    text-decoration: none;

    color: white;

}

nav{

    height: 100vh;

    z-index: 2;

    position: absolute;

    top: 0vh;

    right: -130vw;

    width: 120vw;

    background: #002FA7;

    padding-top: 10vh;

}

nav ul{

    width: 100%;

    height: 85%;

    list-style-type: none;

    padding-top: 5vh;

    padding-left: 5vw;

}



nav{

  font-size: var(--fs-4xl);

}

@media (min-width: 1441px) {

  nav{

    font-size: 5rem;

  }

}



nav a {

    color: white;

    text-decoration: none;

    transition: 0.4s ease;

    text-wrap: wrap;

    cursor: none;

}

nav li{

    margin-bottom: 10vh;

}



nav a:hover{

    color: orange;

    transition: 0.4s ease;

    cursor: none;

}

nav a:active{

    color: orange;

}

.lanbut{

    height: 100%;   

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

    z-index: 4;

}

.lanbut img{

    height: 100%;

    aspect-ratio: 1;

}





.active{

    transform: translateX(-110vw);

    transition: 1s ease;

}

.notactive{

    transform: translateX(100vw);

    transition: 1.5s ease-in-out;

}