*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif}.container{height:100vh;height:calc(var(--vh,1vh) * 100);overflow-x:hidden}nav{width:100%;z-index:4;position:fixed;display:flex;justify-content:space-around;align-items:center;min-height:8vh;background-color:#2c2c2c}.logo{color:#e2e2e2;text-transform:uppercase;letter-spacing:5px;font-size:20px}.logo a{color:#fff;text-decoration:none}.nav-links{display:flex;justify-content:space-around;width:35%;z-index:5}.nav-links li{list-style:none}.nav-links li a:hover{color:#fff;text-decoration:underline}.nav-links a{color:#e2e2e2;text-decoration:none;letter-spacing:3px;font-size:14px}.burger{display:none;cursor:pointer}.burger div{width:25px;height:3px;background-color:#e2e2e2;margin:5px;transition:all .3s ease}main{padding-top:8vh}.bigAlert{height:92vh;display:flex;align-items:center;justify-content:center}#bigMessage{color:#2c2c2c;font-size:30px}.listArea{width:70%;margin:50px 15%;padding:20px}.listArea h3{margin-bottom:10px}.flexList{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.listCard{width:380px;height:200px;margin-bottom:20px;text-align:center;position:relative;display:block;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:35px;font-weight:lighter;cursor:pointer}.listCard a{color:#fff;text-decoration:none;background-color:rgba(44,44,44,.6);padding:0 7px;border-radius:8px}.cardBackground{border:5px solid #ff0;position:absolute;width:95%;height:100%;top:5%;left:calc(5% / 2);z-index:-1;border-radius:50px;filter:blur(10px)}@media screen and (max-width:1024px){.nav-links{width:50%}}@media screen and (max-width:768px){.nav-links{position:fixed;right:0;height:92vh;top:8vh;background-color:#2c2c2c;display:flex;flex-direction:column;align-items:center;width:100%;padding-bottom:80px;transform:translate(100%);transition:transform .5s ease-in}nav-links *{padding:0}.nav-links li{opacity:0}.burger{display:block}.listArea{width:100%;margin:20px 0}.flexList{display:flex;flex-direction:column;align-content:center}.listCard{width:300px;height:170px;text-align:center;position:relative;display:block;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:35px;font-weight:lighter;cursor:pointer}}.nav-active{transform:translateX(0)}@keyframes navLinkFade{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}.toggle .line1{transform:rotate(-45deg) translate(-5px,6px)}.toggle .line2{opacity:0}.toggle .line3{transform:rotate(45deg) translate(-5px,-6px)}