* {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  user-select: none !important;
  box-sizing: border-box;
  font-family: "Exo 2";
  transition: 200ms;
}

.opacityLow {
  transition: all ease-in 90ms;
  cursor: pointer;
}

.opacityLow:hover {
  opacity: 70%;
}

*::-webkit-scrollbar-track {
  width: 0.5rem;
  background-color: #141313;
}

*::-webkit-scrollbar {
  width: 0.2vw;
}

*::-webkit-scrollbar-thumb {
  width: 0.1vw;
  background-color: rgba(111, 111, 111, 0.634);
}

body {
   background-color: #020202;
   overflow-y: auto;
   overflow-x: hidden;
   /* height: 200vh; */
   height: max-content;
}

header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 90px !important;
   box-shadow: rgba(78, 78, 78, 0.173) 0px 30px 60px -12px, rgba(0, 0, 0, 0.375) 0px 18px 36px -18px;
   border-bottom: 1px solid hsla(0, 0%, 100%, .2);
   z-index: 999999;
}

.logo-showcase {
   position: absolute;
   top: 50%;
   left: 2.5vw;
   transform: translate(0, -50%);
   width: 5vw;
   height: 5vw;
}

.logo-showcase img {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   opacity: 0;
   transform: scale(0.7);
}

.logo-active {
   opacity: 1 !important;
   transform: scale(1);
   transition: all 0.5s ease;
}

.header-login {
   position: absolute;
   top: 50%;
   right: 2.5vw;
   transform: translate(0, -50%);
   font-size: 15px;
   font-weight: 600;
   background-color: #fff;
   border: 1px solid #fff;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   color: #000;
   padding: 12px 30px;
   border-radius: 3px;
   cursor: pointer;
   transition: all ease-in 180ms;
}

.header-login:hover {
   background-color: #000;
   color: #fff;
}

.navbar-buttons {
   position: absolute;
   top: 50%;
   left: 8vw;
   transform: translate(0, -50%);
   width: 28vw;
   height: 3vh;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}

.navbar-buttons>a {
   color: #fff;
   text-decoration: none;
   transition: all ease-in 170ms;
}

.navbar-buttons>a:hover {
   color: #ffffffb9;
}

games {
   position: absolute;
   top: 16vh;
   left: 50%;
   transform: translate(-50%);
   width: 85%;
   height: 7vh;
   border-radius: 8px;
   border: 1px solid #333333;
   display: flex;
   justify-content: space-between;
   justify-items: center;
}

game {
   position: relative;
   top: 0;
   left: 0;
   width: 49.9%;
   height: 100%;
   border-radius: 8px;
   color: #fff;
}

game:nth-child(2) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
}

game:nth-child(2):hover {
   border: 1px solid #8c8c8c;
   border-left: none;
}

game img {
   position: absolute;
   top: 50%;
   left: 0.6vw;
   width: 2vw;
   transform: translate(0, -50%);
}
game h1 {
   position: absolute;
   top: 50%;
   left: 3vw;
   font-size: 15px;
   font-weight: 500;
   transform: translate(0, -50%);
}

.game-label {
   position: absolute;
   top: 27vh;
   left: 5vw;
   font-size: 26px;
   color: #fff;
   z-index: 999;
}

.game-selected {
   background-color: #ffffff;
   color: #000;
}

.game-selected>img {
   filter: drop-shadow(0 0 10px rgb(0, 0, 0));

}

games > game:first-child.game-selected {
   border-right: 1px solid #555454;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

games > game:last-child.game-selected {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left: 1px solid #555454;
}

.selected-gameBGProfile {
   position: absolute;
   top: 34vh;
   left: 50%;
   transform: translate(-50%);
   width: 100%;
   height: 78vh;
}

.selected-gameBGProfile-shadowLeft {
   position: absolute;
   top: 0;
   left: 0;
   width: 15%;
   height: 100%;
   background: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,      
      rgba(0, 0, 0, 0) 100%     
  );
   filter: blur(15px);
}

.selected-gameBGProfile>img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 78vh;
   filter: grayscale(100%) brightness(20%);
   background: linear-gradient(270deg, rgba(11, 11, 11, 0) 0%, #0b0b0bef 100%, #0b0b0bef 100%);
}

.selected-gameBGProfile-shadowRight {
   position: absolute;
   top: 0;
   right: 0;
   width: 15%;
   height: 100%;
   pointer-events: none;
   background: linear-gradient(
     to left,                
     rgba(0, 0, 0, 1) 0%,   
     rgba(0, 0, 0, 0) 100%  
   );
   filter: blur(15px);
}


.selected-game {
   position: absolute;
   top: 27vh;
   left: 50%;
   transform: translate(-50%);
   width: 85%;
   height: 85vh;
}

.selected-game-profile {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%);
   width: 70vw;
   height: 78vh;
   border-left: 2px solid #333333;
   border-right: 2px solid #333333;
}

.selected-game-profile>img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.selected-game-layer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(270deg, rgba(11, 11, 11, 0) 0%, #0b0b0bef 100%, #0b0b0bef 100%);
}

.selected-game-profile>h1 {
   position: absolute;
   bottom: 12vh;
   left: 2vw;
   font-size: 20px;
   font-weight: 600;
   color: #fff;
}

.selected-game-profile>button {
   position: absolute;
   bottom: 3vh;
   left: 2vw;
   width: max-content;
   height: max-content;
   padding: 15px 20px;
   background-color: #FFFFFF;
   color: #000;
   border-radius: 5px;
   font-weight: 600;
}

.selected-game-platforms {
   position: absolute;
   bottom: 2vh;
   right: 1vw;
   height: 8vh;
   width: 24vw;
   display: flex;
   justify-content: space-evenly;
   justify-items: center;
}

.selected-game-platforms>img {
   width: 40px;
   filter: drop-shadow(0 0 10px rgb(0, 0, 0));
}

slide {
   position: relative;
   margin-top: 15vh;
   top: 0;
   left: 0;
   width: 100vw;
   height: 55vh;
   display: block;
}

.slider-shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 115%;
   z-index: 99;
   box-shadow: 15px 38px 200px 120px rgba(0,0,0,1) inset;
}

.slide-label {
   position: absolute;
   top: 292vh;
   left: 5vw;
   font-size: 28px;
   color: #fff;
   z-index: 99;
}

.slider {
   overflow: hidden;
   width: 100%;
}

.slide-track {
   display: flex;
   width: max-content;
   animation: scroll 35s linear infinite;
   gap: 1px;
}

.slide-track img {
   width: 50vw;
   object-fit: cover;
}

@keyframes scroll {
   from {
       transform: translateX(0);
   }
   to {
       transform: translateX(-50%);
   }
}

.video-label {
   position: absolute;
   top: 129vh;
   left: 5vw;
   font-size: 28px;
   color: #fff;
   z-index: 999;
}

.video-wrapper {
   position: relative;
   margin-top: 130vh;
   top: 0;
   left: 0;
   width: 100vw;
   height: 155vh;
   display: block;
   object-fit: fill; 
}

video {
   position: relative;
   margin-top: 130vh;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
   object-fit: fill; 
}

.video-shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99;
   box-shadow: 75px 88px 216px 120px rgba(0,0,0,1) inset;
}

faq {
   position: relative;
   top: 0;
   left: 0;
   width: 100vw;
   height: 72vh;
   display: block;
}

faq>h1 {
   position: absolute;
   top: 1vh;
   left: 50%;
   transform: translate(-50%);
   width: max-content;
   color: #fff;
   font-size: 30px;
}

.faq-wrapper {
   position: relative;
   top: 10vh;
   left: 50%;
   transform: translate(-50%);
   width: 40vw;
   height: max-content;
   border: 1px solid #303030;
   border-radius: 5px;
}

.faq-wrapper-item {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 8vh;
   border-bottom: 1px solid #303030;
   transition: all .2s cubic-bezier(.645, .045, .355, 1); 
}

.faq-wrapper-item:hover {
   border: 1px solid #919090;
}

.faq-wrapper-item:nth-child(1) {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

.faq-wrapper-item:last-child {
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
}

.faq-wrapper-item>h1 {
   position: absolute;
   top: 2.4vh;
   left: 0.6vw;
   width: max-content;
   font-size: 16px;
   font-weight: 500;
   color: #fff;
}

.faq-wrapper-item>span {
   position: absolute;
   top: 6vh;
   left: 0.6vw;
   width: max-content;
   font-size: 16px;
   font-weight: 500;
   color: #b0aeae;
   display: none;
}

.faq-wrapper-item>svg {
   position: absolute;
   top: 2vh;
   right: 0.6vw;
   font-size: 29px;
   color: #b0aeae;
}

.faq-wrapper-item-active {
   position: relative;
   height: 11.5vh;
}

.faq-wrapper-item-active>h1 {
   color: #989797;
   display: block;
}

.faq-wrapper-item-active>span {
   color: #fff;
   display: block;
}

.faq-wrapper-item-active>svg {
   color: #fff;
   transform: rotate(180deg);
}

/* Support */

support {
   position: relative;
   top: 0;
   left: 0;
   width: 100vw;
   height: 70vh;
   display: block;
}
.support-bg {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%) url(/assets/supportbg.jpg);
}

support::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 99;

   background:
       linear-gradient(
           to bottom,
           rgba(2, 2, 2, 1) 0%,    
           rgba(2, 2, 2, 0) 20%    
       ),

       linear-gradient(
           to top,
           rgba(2, 2, 2, 1) 0%,    
           rgba(2, 2, 2, 0) 20%    
       ),

       radial-gradient(
           ellipse at center,
           rgba(0, 0, 0, 0) 60%,    
           rgba(0, 0, 0, 0.6) 100%  
       );
}

.support-logo {
   position: absolute;
   top: 10vh;
   left: 50%;
   transform: translate(-50%);
   width: 250px;
   z-index: 99;
}

support>span {
   position: absolute;
   bottom: 30vh;
   left: 50%;
   transform: translate(-50%);
   width: 25vw;
   text-align: center;
   color: #fff;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.54);
}

support>button {
   position: absolute;
   bottom: 19vh;
   left: 50%;
   transform: translate(-50%);
   border-radius: 50px;
   background-color: #fff;
   color: #000;
   width: max-content;
   height: max-content;
   padding: 10px 20px;
   font-size: 18px;
   font-weight: 600;
   z-index: 99;
}

footer {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 34vh;
   border-top: 1px solid #333333;
   /* background: #000000; */
}

footer>h1 {
   position: absolute;
   top: 4.5vh;
   left: 2vw;
   color: #fff;
   font-size: 20px;
   font-weight: 500;
   width: 45vw;
}
footer>h2 {
   position: absolute;
   bottom: 4.5vh;
   right: 4vw;
   color: #FFFFFF4C;
   font-size: 15px;
   font-weight: 500;
   width: max-content;
}
footer>h3 {
   position: absolute;
   bottom: 4.5vh;
   left: 2vw;
   color: #FFFFFF4C;
   font-size: 15px;
   font-weight: 500;
   width: max-content;
}

.footer-navbar {
   position: absolute;
   top: 9vh;
   right: 16vw;
   transform: translate(0, -50%);
   width: 28vw;
   height: 3vh;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}

.footer-navbar>a {
   color: #fff;
   text-decoration: none;
   transition: all ease-in 170ms;
}

.footer-navbar>a:hover {
   color: #ffffffb9;
}

.footer-contact {
   position: absolute;
   top: 6vh;
   right: 2vw;
   width: 13vw;
   height: 6.5vh;
   display: flex;
   justify-content: space-evenly;
   justify-items: center;
}

.footer-contact>a {
   position: relative;
   top: 0;
   left: 0;
   aspect-ratio: 1/1;
   height: 100%;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   background-color: transparent;
   color: #fff;
   font-size: 18px;
   border: 2px solid hsla(0, 0%, 100%, .2);
   transition: all .2s cubic-bezier(.645, .045, .355, 1);
}

.footer-contact>a:hover {
   background-color: #fff;
   border: 1px solid #fff;
   color: #000;
}

/* Gamepage */

.gamepage-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 110vh;
   overflow-y: auto;
   background-color: #020202;
   z-index: 99999;
   display: none;
}

.gamepage-wrapper>h1 {
   position: absolute;
   top: 8vh;
   left: 7.5vw;
   width: max-content;
   font-size: 28px;
   color: #fff;
}

.gamepage-faq {
   position: absolute;
   top: 22vh;
   left: 50%;
   transform: translate(-50%);
   width: 85%;
   height: 105vh;
   font-size: 15px;
   color: #fff;
   display: none;
   padding-bottom: 5vh !important;
}

.gamepage-faq>p>strong {
   font-size: 20px;
   font-weight: 600;
   color: #fff;
}

.gamepage-faq>p {
   font-size: 15px;
   color: #d6d6d6ce;
}

.gamepage-tags {
   position: absolute;
   top: 97vh;
   left: 8vw;
   width: 50%;
   height: 7.5vh;
}

.gamepage-tags>h1 {
   position: absolute;
   top: 0;
   left: 0;
   width: max-content;
   font-size: 14px;
   font-weight: 500;
   color: #fff;
}

.gamepage-tags-wrapper {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 4.2vh;
}

.gamepage-tags-wrapper-tag {
   position: relative;
   float: left;
   margin-right: 10px;
   height: 100%;
   width: max-content;
   padding: 0 10px;
   color: #fff;
   background-color: #343437;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 5px;
   font-size: 14px;
   font-weight: 600;
   /* font-family: "Poppins"; */

}

.gamepage-tags-wrapper:last-child {
   margin-right: 0;
}

.gamepage-description {
   position: absolute;
   top: 107vh;
   left: 8vw;
   width: 50vw;
   color: #b1b1b1;
   font-size: 15px;
   padding-bottom: 15vh;
}

.gamepage-wrapper-close {
   position: absolute;
   top: 3vh;
   left: 7.4vw;
   font-size: 15.5px;
   width: max-content;
   height: max-content;
   padding: 6px 14px;
   color: #fff;
   color: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 15px;
}

.gamepage-wrapper>h1 {
   position: absolute;
   top: 9vh;
   left: 7.5vw;
   width: max-content;
   font-size: 28px;
   color: #fff;
}

.gamepage-navbar {
   position: absolute;
   top: 15.2vh;
   left: 7.5vw;
   width: 45vw;
   height: 3vh;
}

.gamepage-navbar-button {
   position: relative;
   float: left;
   width: max-content;
   font-size: 15px;
   font-weight: 500;
   color: #ccc;
   margin-right: 1vw;
   padding-bottom: 1vh;
   transition: all ease-in 100ms;
   cursor: pointer;
}

.gamepage-navbar-button-selected {
   border-bottom: 3px solid rgb(38, 187, 255);
   color: #fff;
}

.gamepage-navbar-button:hover {
   color: #fff;
}
.gamepage-showcaseProfile {
   position: absolute;
   top: 21vh;
   left: 7.6vw;
   width: 50vw;
   height: 70vh;
}

.gamepage-contentScreen {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 82%;
}

.gamepage-contentScreen>img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.gamepage-contentScreen>video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   margin: 0 !important; 
   padding: 0 !important;
}

.gamepage-footerWrapper {
   position: absolute;
   bottom: 0;
   left: 50%;
   height: 15%;
   width: 100%;
   transform: translate(-50%);
}

.gamepage-footerWrapper-leftButton {
   position: absolute;
   top: 50%;
   left: 0vw;
   transform: translate(0, -50%);
   background-color: #343437;
   width: 2.1vw;
   aspect-ratio: 1/1;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 22px;
   color: #fff;
   cursor: pointer;
}

.gamepage-footerWrapper-rightButton {
   position: absolute;
   top: 50%;
   right: 0vw;
   transform: translate(0, -50%);
   background-color: #343437;
   width: 2.1vw;
   aspect-ratio: 1/1;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 22px;
   color: #fff;
   cursor: pointer;
}

.gamepage-footerWrapper-leftButton:hover,
.gamepage-footerWrapper-rightButton:hover {
   background-color: #636366;
   opacity: 90%;
}

.gamepage-footerWrapper-contents {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%);
   width: 89%;
   height: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;        
   -ms-overflow-style: none;
   display: flex;              
   flex-direction: row;        
}

.gamepage-footerWrapper-contents-box {
   position: relative;
   flex: 0 0 9vw;             
   height: 100%;
   margin-right: 8px;
   display: block;
   opacity: 70%;
   cursor: pointer;
   transform: scale(0.95);
   border-radius: 3px;
}

.gamepage-footerWrapper-contents-box:hover {
   transform: scale(0.9);
}

.gamepage-footerWrapper-contents-box>img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 3px;
}

.gamepage-footerWrapper-contents-box > video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   margin: 0 !important; 
   padding: 0 !important;
   border-radius: 3px;
}

.gamepage-footerWrapper-contents-box>svg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
   text-shadow: 1px 1px 1px black;
   font-size: 25px;
}

.gamepage-footerWrapper-contents-box-selected {
   border: 1px solid #fff;
   opacity: 100%;
   transform: scale(1.0);
}

.gamepage-rightHandSide {
   position: absolute;
   top: 21vh;
   right: 0;
   width: 40%;
   height: 100%;
}

.gamepage-rightHandSide-logo {
   position: absolute;
   top: 0vh;
   left: 50%;
   transform: translate(-50%);
   width: 15vw;
}

.gamepage-dependsWrapper {
   position: relative;
   top: 37vh;
   left: 0;
   width: 95%;
   height: max-content;
}

.gamepage-dependsWrapper-box {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 5.5vh;
   border-bottom: 1px solid #FFFFFFA6;
}

.gamepage-dependsWrapper-box>h1 {
   position: absolute;
   top: 50%;
   left: 0.2vw;
   transform: translate(0, -50%);
   color: #FFFFFFA6;
   font-weight: 600;
   font-size: 13px;
}

.gamepage-dependsWrapper-box>h2 {
   position: absolute;
   top: 50%;
   right: 0.2vw;
   transform: translate(0, -50%);
   color: #fff;
   font-weight: 600;
   font-size: 13px;
}

.gamepage-dependsWrapper-box:last-child {
   margin-top: 2vh;
   border: none;
}

.gamepage-dependsWrapper-box:nth-last-child(2) {
   margin-top: 2vh;
   border: none;
}

.gamepage-dependsWrapper-box>button {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 6vh;
   font-weight: 600;
   border-radius: 5px;
   background-color: #26BBFF;
   color: #000;
   display: flex;
   align-items: center;    
   justify-content: center;
   gap: 8px;               
   border: none;
}

.gamepage-dependsWrapper-box>button>svg {
   font-size: 20px;
}

@media (max-width: 560px) {
   header {
      opacity: 0;
      z-index: -9999;
   }

   games {
      position: absolute;
      top: 6vh;
      left: 50%;
      transform: translate(-50%);
      width: 96% !important;
      height: 7vh;
      border-radius: 8px;
      border: 1px solid #333333;
      display: flex;
      justify-content: space-between;
      justify-items: center;
      z-index: 9999999999;
   }
   
   game {
      position: relative;
      top: 0;
      left: 0;
      width: 49.9%;
      height: 100%;
      border-radius: 8px;
      color: #fff;
   }

   game > img {
      margin-left: 3px;
      width: 30px;
   }

   game>h1 {
      margin-left: 20px;
   }

   .game-label {
      position: absolute;
      top: 20vh;
   }

   .selected-gameBGProfile {
      display: none;
   }
   .selected-game {
      position: absolute;
      top: 1vh;
      left: 50%;
      transform: translate(-50%);
      width: 100% !important;
      height: 85vh;
   }

   .selected-game-profile {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
      width: 100%;
      height: 58vh;
      border-left: 2px solid #333333;
      border-right: 2px solid #333333;
   }
   
   .selected-game-platforms {
      position: absolute;
      bottom: 2vh;
      right: 1vw;
      width: 50vw !important;
   }

   
   .video-label {
      position: absolute;
      top: 95vh;
   }

   .video-wrapper {
      margin-top: -27.5vh !important;
      height: 55vh;
   }

   .video-shadow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99;
      box-shadow: 75px 88px 116px 20px rgba(0, 0, 0, 0.821) inset;
   }

   .slide-label {
      position: absolute;
      top: 165vh;
      left: 5vw;
      font-size: 28px;
      color: #fff;
      z-index: 99;
   }

   slide {
      position: relative;
      margin-top: 15vh;
      top: 0;
      left: 0;
      width: 100vw;
      height: 38vh !important;
      display: block;
   }

   .slider-shadow {
      box-shadow: 15px 38px 100px 40px rgb(0, 0, 0) inset;
   }
   
   .slider {
      overflow: hidden;
      width: 100%;
   }

   .slide-track {
      display: flex;
      width: max-content;
      animation: scroll 35s linear infinite;
      gap: 1px;
   }

   .slide-track img {
      width: 93vw;
      object-fit: cover;
   }

   support {
      position: relative;
      top: 5vh;
      left: 0;
      width: 100vw;
      height: 40vh;
      display: block;
   }
   
   .support-logo {
      position: absolute;
      top: 4vh;
      left: 50%;
      transform: translate(-50%);
      width: 120px;
      z-index: 99;
   }
   
   support>span {
      position: absolute;
      bottom: 18vh;
      left: 50%;
      transform: translate(-50%);
      width: 85vw;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.54);
   }
   
   support>button {
      position: absolute;
      bottom: 8vh;
      left: 50%;
      transform: translate(-50%);
      border-radius: 50px;
      background-color: #fff;
      color: #000;
      width: max-content;
      height: max-content;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      z-index: 99;
   }

   faq {
      position: relative;
      top: 0;
      left: 0;
      width: 100vw;
      height: 72vh;
      display: block;
      margin-top: 7vh;
   }
   
   faq>h1 {
      position: absolute;
      top: 1vh;
      left: 50%;
      transform: translate(-50%);
      width: max-content;
      color: #fff;
      font-size: 30px;
   }
   
   .faq-wrapper {
      position: relative;
      top: 10vh;
      left: 50%;
      transform: translate(-50%);
      width: 90vw;
      height: max-content;
      border: 1px solid #303030;
      border-radius: 5px;
   }
   
   .faq-wrapper-item {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 8vh;
      border-bottom: 1px solid #303030;
      transition: all .2s cubic-bezier(.645, .045, .355, 1); 
   }
   
   .faq-wrapper-item:hover {
      border: 1px solid #919090;
   }
   
   .faq-wrapper-item:nth-child(1) {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
   }
   
   .faq-wrapper-item:last-child {
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
   }
   
   .faq-wrapper-item>h1 {
      position: absolute;
      top: 2.4vh;
      left: 1.5vw;
      width: max-content;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
   }
   
   .faq-wrapper-item>span {
      position: absolute;
      top: 6vh;
      left: 1.5vw;
      width: max-content;
      max-width: 75vw;
      font-size: 16px;
      font-weight: 500;
      color: #b0aeae;
      display: none;
   }
   
   .faq-wrapper-item>svg {
      position: absolute;
      top: 2vh;
      right: 2vw;
      font-size: 29px;
      color: #b0aeae;
   }
   
   .faq-wrapper-item-active {
      position: relative;
      height: 14.2vh;
   }

   .faq-wrapper-item-active>h1 {
      color: #989797;
      display: block;
   }
   
   .faq-wrapper-item-active>span {
      color: #fff;
      display: block;
   }
   
   .faq-wrapper-item-active>svg {
      color: #fff;
      transform: rotate(180deg);
   }

   /* Footer */

   footer {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 64vh;
      border-top: 1px solid #333333;
      /* background: #000000; */
   }
   
   footer>h1 {
      position: absolute;
      top: 5.5vh;
      left: 50%;
      transform: translate(-50%);      
      color: #fff;
      font-size: 20px;
      font-weight: 500;
      text-align: center;
      width: 85vw;
   }
   footer>h2 {
      position: absolute;
      bottom: 3.5vh;
      left: 50%;
      transform: translate(-50%);
      color: #FFFFFF4C;
      font-size: 15px;
      font-weight: 500;
      width: max-content;
   }
   footer>h3 {
      position: absolute;
      bottom: 8.5vh;
      left: 50%;
      transform: translate(-50%);
      width: 75vw;
      text-align: center;
      color: #FFFFFF4C;
      font-size: 15px;
      font-weight: 500;
   }
   
   .footer-navbar {
      position: absolute;
      top: 26.5vh;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 58vw;
      height: 3vh;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
   }
   
   .footer-navbar>a {
      color: #fff;
      text-decoration: none;
      transition: all ease-in 170ms;
   }
   
   .footer-navbar>a:hover {
      color: #ffffffb9;
   }
   
   .footer-contact {
      position: absolute;
      top: 35vh;
      left: 50%;
      transform: translate(-50%);
      width: 32vw;
      height: 6.5vh;
      display: flex;
      justify-content: space-evenly;
      justify-items: center;
   }
   
   .footer-contact>a {
      position: relative;
      top: 0;
      left: 0;
      aspect-ratio: 1/1;
      height: 100%;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background-color: transparent;
      color: #fff;
      font-size: 18px;
      border: 2px solid hsla(0, 0%, 100%, .2);
      transition: all .2s cubic-bezier(.645, .045, .355, 1);
   }
   
   .footer-contact>a:hover {
      background-color: #fff;
      border: 1px solid #fff;
      color: #000;
   }

   /* Gamepage */

   .gamepage-showcaseProfile {
      position: absolute;
      top: 21vh;
      left: 7.6vw;
      width: 88vw;
      height: 50vh;
   }

   .gamepage-contentScreen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 82%;
   }
   
   .gamepage-contentScreen>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }
   
   .gamepage-contentScreen>video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      margin: 0 !important; 
      padding: 0 !important;
   }
   
   .gamepage-footerWrapper {
      position: absolute;
      bottom: 0;
      left: 50%;
      height: 13%;
      width: 100%;
      transform: translate(-50%);
   }
   
   .gamepage-footerWrapper-leftButton {
      position: absolute;
      top: 50%;
      left: 0vw;
      transform: translate(0, -50%);
      background-color: #343437;
      width: 4.1vw;
      aspect-ratio: 1/1;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      color: #fff;
      cursor: pointer;
   }
   
   .gamepage-footerWrapper-rightButton {
      position: absolute;
      top: 50%;
      right: 0vw;
      transform: translate(0, -50%);
      background-color: #343437;
      width: 4.1vw;
      aspect-ratio: 1/1;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;
      color: #fff;
      cursor: pointer;
   }
   
   .gamepage-footerWrapper-leftButton:hover,
   .gamepage-footerWrapper-rightButton:hover {
      background-color: #636366;
      opacity: 90%;
   }
   
   .gamepage-footerWrapper-contents {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%);
      width: 85%;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;        
      -ms-overflow-style: none;
      display: flex;              
      flex-direction: row;        
   }
   
   .gamepage-footerWrapper-contents-box {
      position: relative;
      flex: 0 0 15vw;             
      height: 100%;
      margin-right: 8px;
      display: block;
      opacity: 70%;
      cursor: pointer;
      transform: scale(0.95);
      border-radius: 3px;
   }
   
   .gamepage-footerWrapper-contents-box:hover {
      transform: scale(0.9);
   }
   
   .gamepage-footerWrapper-contents-box>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 3px;
   }
   
   .gamepage-footerWrapper-contents-box > video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      margin: 0 !important; 
      padding: 0 !important;
      border-radius: 3px;
   }
   
   .gamepage-footerWrapper-contents-box>svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      text-shadow: 1px 1px 1px black;
      font-size: 25px;
   }

   .gamepage-rightHandSide {
      position: absolute;
      top: 42vh;
      left: 53%;
      transform: translate(-50%);
      width: 92%;
      height: 100%;
   }
   
   .gamepage-rightHandSide-logo {
      position: absolute;
      top: 0vh;
      left: 50%;
      transform: translate(-50%);
      width: 15vw;
   }
   
   .gamepage-dependsWrapper {
      position: relative;
      top: 37vh;
      left: 0;
      width: 95%;
      height: max-content;
   }
   
   .gamepage-dependsWrapper-box {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 5.5vh;
      border-bottom: 1px solid #FFFFFFA6;
   }
   
   .gamepage-dependsWrapper-box>h1 {
      position: absolute;
      top: 50%;
      left: 0.2vw;
      transform: translate(0, -50%);
      color: #FFFFFFA6;
      font-weight: 600;
      font-size: 13px;
   }
   
   .gamepage-dependsWrapper-box>h2 {
      position: absolute;
      top: 50%;
      right: 0.2vw;
      transform: translate(0, -50%);
      color: #fff;
      font-weight: 600;
      font-size: 13px;
   }

   .gamepage-tags {
      position: absolute;
      top: 121vh;
      left: 8vw;
      width: 50%;
      height: 7.5vh;
   }
   
   .gamepage-tags>h1 {
      position: absolute;
      top: 0;
      left: 0;
      width: max-content;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
   }
   
   .gamepage-tags-wrapper {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 4.2vh;
   }
   
   .gamepage-tags-wrapper-tag {
      position: relative;
      float: left;
      margin-right: 10px;
      height: 100%;
      width: max-content;
      padding: 0 10px;
      color: #fff;
      background-color: #343437;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 600;
      /* font-family: "Poppins"; */
   
   }
   
   .gamepage-tags-wrapper:last-child {
      margin-right: 0;
   }
   
   .gamepage-description {
      position: absolute;
      top: 132vh;
      left: 50%;
      transform: translate(-50%);
      width: 88%;
      color: #b1b1b1;
      font-size: 15px;
      text-align: center;
      padding-bottom: 15vh;
   }

   .gamepage-faq {
      padding-bottom: 150vh;
   }
}