@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
   font-family: 'Poppins', Arial, sans-serif;
}
.menu{
   position: fixed;
   z-index: 1;
   text-align: center;
   margin-top: 0;
   padding-top: 30px;
   display: none;
   height: 100vh;
   width: 100vw;
   background: white;
   filter: opacity(0%);
}
.menu.active{
   display: block;
   animation: slide-in 0s 1 ease;
   animation-fill-mode: forwards;   
}
.menu.back{
   animation: back .5s 1 ease;
   animation-fill-mode: forwards;
}
@keyframes back{
   from{
      transform: translateX(0px);
   }
   to{
      transform: translateX(-200px);
      filter: opacity(0%);
   }
}
.alter{
   display: none;
}
@keyframes slide-in{
   from{
      transform: translateX(-200px);
   }
   to{
      transform: translateX(0px);
      filter: opacity(100%);
   }
}
ul{
   padding-top: 70px;
}
li{
   margin: 20px;
}
a{
   text-decoration: none;
   color: #5000a7;
}
.back{
   padding: 10px;
   margin: 10px;
   position: absolute;
   transform: translate(120px);
   border: none;
   background: transparent;
}
.navbar{
   position: fixed;
   z-index: 3;
   top: 0;
   width: 100vw;
   background: #5000a7;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
   z-index: 2;
   padding: 10px 20px 10px 20px;
   box-shadow: 0 5px 10px #49006518;
}
.navbar p{
   font-weight: bold;
   color: #fff;
}
.hamburger{
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.ham{
   width: 22px;
   height: 3px;
   border-radius: 1.5px;
   background: #fff;
   cursor: pointer;
}
.ham.mid{
   width: 16px;
}
.contain{
   height: 460px;
   display: flex;
   flex-direction: column;
   width: 80vw;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 10px;
   margin: 0px auto;
}
.contain a{
   color: whitesmoke;
   background: #5000a7;
   padding: 10px;
   display: inline-block;
   font-size: 80%;
   border-radius: 0px;
   margin-top: 40px;
   box-shadow: 0 2px 5px #00000019;
}
.contain p{
   font-size: 50%;
}
footer{
   display: flex;
   position: fixed;
   bottom: 0;
   width: 100vw;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 20px;
   height: 250px;
   background: #5000a7;
   color: #ffffffba;
   padding: 40px;
   border-radius: 0px;
   text-align: center;
   font-size: 120%;
}
h1{
   margin: 0px auto 40px auto;
}
h1, h2{
   color: #270051;
}
footer .cp{
   color: white;
   font-size: 70%;
}
footer a{
   color: white;
   text-decoration: underline;
   font-size: 12px;
}
hr{
   border: solid 1px white;
   width: 50vw;
}
.last{
   display: flex;
   gap: 20px;
   flex: 1;
}
/*#down{
   filter: opacity(0%);
   transform: translateY(130px);
   transition: all 1.2s;
}
#down.active{
   filter: opacity(100%);
   transform: translateY(0px);
}
#left{
   filter: opacity(0%);
   transform: translateX(-100px);
   transition: all 1.2s;
}
#left.active{
   filter: opacity(100%);
   transform: translateY(0px);
}*/
@media only screen and (min-width: 768px){
   .hamburger{
      display: none;
   }
   header{
      position: sticky;
      top: 0;
      z-index: 2;
   }
   .alter{
      display: flex;
      gap: 20px;
   }
   .alter a{
      color: white;
   }
}