@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

html, body {
     margin: 0;
     padding: 0;
     /* width: 80vh;
     height: 80vh;  */
}

body {
     cursor: crosshair;
     font-family: Poppins;
     background: #000;
     /* background: url(hero.jpg) no-repeat 50% 50%; */
}

.content {
     width: 60%;
     margin: 0 auto;
     z-index: -1;
     position: absolute;
     top: 60%;
     left: 10%;
     transform: translate(0, -50%);
}

.content h1 {
     font-family: Poppins;
     font-size: 54px;
     color: #101010;
     font-weight: 700;
     text-transform: uppercase;
     margin-bottom: 10px;
}

.content p {
     margin-top: 0;
     text-align: left;
     color: #101010;
     font-weight: 400;
}

.overlay-2 {
     z-index: 0;
     position: absolute;
     width: 100%;
     height: 100vh;
     background: #323232;
}

.overlay {
     z-index: 1;
     overflow: hidden;

     position: absolute;
     width: 100%;
     height: 100vh;
     background: #101010;
}

.overlay p {
     font-size: 370px;
     font-weight: 800;
}

.screen {
     overflow: hidden;
     color: #323232;
     font-family: Poppins;
     position: absolute;
     top: 45%;
     left: 50%;
     
     transform: translate(-50%, -50%);
     /* border: 1px solid #fff; */

}

.screen2 {
     overflow: hidden;
     font-family: Poppins;
     position: absolute;
     opacity: 0.7;
     color: rgb(112, 111, 111);
     font-size: 160px;
     top: 44%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: glitch 2s linear infinite;
}


@keyframes glitch {
     0% {
          top: 45%;
     }
     25% {

          top: 45.5%;
          left: 50%;
     }
     50% {
          top: 44.9%;
          left: 50.1%;
     }
     75% {
          top: 45.2%;
          left: 49.9%;
     }
     100% {
          top: 45%;
          left: 50.1%;
     }
}
.container > .header p{
     /* font-family: Poppins; */
     font-family: 'Raleway', sans-serif;
     font-size: 40px;
     padding: .5em 1em 0 1em;
}
/* .title {
     font-family: 'Raleway', sans-serif;
} */
.notice {
     font-family: Poppins;
     text-align: center;
     /* transition: 0.7 ease-in; */
     margin-top: 40%;
     font-size: 20px;
     color: rgb(184, 184, 184);
     text-transform: uppercase;
}

.myBtn {
     font-family: Poppins;
     position: absolute;
     top: 50%;
     left: 50%;
     text-align: center;
     color: #fff;
     transform: translate(-50%, -50%);
}

button {
     display: block;
     padding: 24px 48px;
     font-family: Poppins;
     font-weight: 700;
     font-size: 17px;
     letter-spacing: 6px;
     color: #fff;
     border: 2px solid #fff;
     text-transform: uppercase;
     outline: none;
     overflow: hidden;
     background: none;
     z-index: 1;
     cursor: crosshair;
     transition: 0.8s ease-out;
}

.myBtn:hover {
     color: #101010;
     cursor: crosshair;
}

.myBtn:before {
     content: "";
     position: absolute;
     background: #fff;
     bottom: 0;
     left: 0;
     right: 0;
     top: 100%;
     z-index: -1;
     transition: top 0.8s ease-out;
}

.myBtn:hover:before {
     top: 0;
}

.js-tilt-glare {
     border-radius: 5px;
}

.contentHost {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 1.5em;
     position: relative;
     top: 15em;
     border-radius: 15px;
     height: auto;
     width: 15em;
     background: rgb(43, 43, 43);
}

.contentList > ul {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

a{
     text-decoration: none;
     color: #fff;
}
.contentList > ul > li {
     
     cursor: pointer;
     transform-style: preserve-3d;
     perspective: 100px;
     padding: 1em;
     width: 8em;
     border-radius: 5px;
     margin: 1em 0;
     filter : drop-shadow(2px 4px 8px #1a1a1a);
     /* height: 10%; */
     background:rgb(53, 53, 53);
     transition: 0.1s ease-in-out;
}
.contentList > ul > li:hover {
     background:rgb(77, 77, 77);
     filter : drop-shadow(4px 6px 10px #0a0a0a);

}

.contentList > ul > li:active {
     background:rgb(36, 36, 36);
     filter : drop-shadow(0px 2px 6px #000000);
}

.contentList {
     font-size: 20px;
     color: #fff;
}

.contentHost > .contentList ul{
     list-style: none;
}


@media (max-width:1280px) {
     .overlay p {
          font-size: 260px;
     }
}

@media (max-width:770px) {
     .overlay p {
          font-size: 140px;
     }
     .container > .header p {
          padding: 1em 1em 0 1em;
          font-size: 25px;
     }
     .container > .header > .title {
          font-size: 20px;
     }
}

@media (max-width:450px) {
     .overlay p {
          font-size: 75px;
     }
     .container > .header p {
          padding: 1em 1em 0 1em;
          font-size: 25px;
     }
     .container > .header > .title {
          font-size: 20px;
     }
}
@media (max-width:380px) {
     .overlay p {
          font-size: 70px;
     }
     .container > .header p {
          padding: 1em 1em 0 1em;
          font-size: 25px;
     }
     .container > .header > .title {
          font-size: 20px;
     }
}