@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');

:root {
  --bg: #111216;
  --footer: #0d0e11;
  --blue: #ea00ff;
  --dark-blue: #8b0097;
  --white: #f0f0f0;
  --dark: #1a1b21;
  --grey: #32343e;
  --text: #838383;
}

@font-face {
  font-family: ExtraBold;
  src: url(../fonts/Inter-ExtraBold.ttf);
}

@font-face {
  font-family: Bold;
  src: url(../fonts/Inter-Bold.ttf);
}

@font-face {
  font-family: Medium;
  src: url(../fonts/Inter-Medium.ttf);
}

@font-face {
  font-family: Light;
  src: url(../fonts/Inter-Medium.ttf);
}



body,
html {
  background-color: var(--bg);
  background-image: url(/images/background.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
  overflow-x: hidden;
}

a,
ul,
li,
h1 {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#loading-screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #001f24 0%, #000b12 100%);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  z-index: 9999;
  font-family: Audiowide;
  animation: hueRotate 6s ease-in-out infinite;
}

@keyframes flicker4 {
  0% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }

  30% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }

  31% {
    color: #00f7ff;
    text-shadow: 0px 0px 4px #00f7ff;
  }

  32% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }

  36% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }

  37% {
    color: #00f7ff;
    text-shadow: 0px 0px 4px #00f7ff;
  }

  41% {
    color: #00f7ff;
    text-shadow: 0px 0px 4px #00f7ff;
  }

  42% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }

  85% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }

  86% {
    color: #00f7ff;
    text-shadow: 0px 0px 4px #00f7ff;
  }

  95% {
    color: #00f7ff;
    text-shadow: 0px 0px 4px #00f7ff;
  }

  96% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }

  100% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }
}

@keyframes fadeInText {
  1% {
    color: #00f7ff;
    text-shadow: 0px 0px 4px #00f7ff;
  }

  70% {
    color: #00f7ff;
    text-shadow: 0px 0px 14px #000000;
  }

  100% {
    color: #000000;
    text-shadow: 0px 0px 4px #000000;
  }
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }

  50% {
    filter: hue-rotate(-120deg);
  }

  100% {
    filter: hue-rotate(0deg);
  }
}

#loading-screen h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 32px;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  display: block;
  color: #00f7ff;
  font-weight: 300;
  font-family: Audiowide;
  text-shadow: 0px 0px 4px #00f7ff;
  animation: fadeInText 3s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}


/* HERO START*/

.hero {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100vh;
  min-height: 30rem;
  border-bottom: var(--blue) 5px solid;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-img {
  max-width: 33rem;
  min-width: 33rem;
  display: grid;
  grid-template-columns: 1fr;
}


.left {
  background-image: url(/images/dome.webp);
  transform: translate(0px, 149px)
}

.right {
  background-image: url(/images/tarkov.webp);
  transform: translate(0px, 153px)
}

.right img {
  margin-left: auto;
}

.left img {
  margin-right: auto;
}




.man-left {
  margin-top: auto;
  z-index: 2;
  height: 40%;
  transform: translate(-0px, -1360px);
  transition: height ease-in-out 300ms;
}


.man-left:hover {
  height: 43%;
}

.man-right {
  margin-top: auto;
  z-index: 2;
  height: 90%;
  transform: translate(-35px, 0px);
  transition: height ease-in-out 300ms;
}


.man-right:hover {
  height: 93%;
}


.hero-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 55%;
  width: 100%;
  margin: auto;
  font-family: ExtraBold;
  font-size: 5rem;
}

.title-blue {
  text-align: center;
  color: var(--blue);
  animation: glow-animation 1.5s ease-in-out infinite alternate;
}

@keyframes glow-animation {
  0% {
    text-shadow: 0 0 10px rgba(45, 91, 217, 0.2);
  }

  100% {
    text-shadow: 0 0 20px rgba(45, 91, 217, 0.6);
  }
}

.title-white {
  text-align: center;
  color: var(--white);
}

.title-info {
  color: var(--text);
  font-size: 25px;
  margin: 1rem auto;
  text-align: center;
  font-family: Light;
  position: relative;
  z-index: 1;
  /* Ensures the text appears above the image */
}

.title-blue img {
  width: 30rem;


}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding: 1rem 2rem;
  font-family: Bold;
  color: var(--white);
  border-radius: .5rem;
  margin: 0 1rem;
  font-size: 10px;
  min-width: 150px;
  cursor: pointer;
  transition: color 150ms ease-in-out;
  /* Add this line */
  border: thin solid var(--blue);
  background-color: var(--dark);
  box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
  /* Adds an inner shadow while maintaining the outer shadow */
  transition: box-shadow 0.5s ease, transform 0.2s ease;
  /* Smooth transitions for both the shadow and the transform */
}

.buttons button i {
  margin-right: .5rem;
  font-size: large;
}

.store {
  border: none;
  background-color: rgb(0, 159, 207);
  transition: box-shadow 0.5s ease, transform 0.2s ease;
  /* Smooth transitions for both the shadow and the transform */
  box-shadow: 0 0 10px rgb(0, 159, 207);
  /* Initial outer shadow */
}

.store:hover {
  box-shadow: 0 0 10px rgb(0, 159, 207), inset 0 0 2px rgba(0, 0, 0, 1);
  /* Adds an inner shadow while maintaining the outer shadow */
}

.store:active {
  transform: translateY(4px);
  /* Simulates pressing down by moving the button 2 pixels down */
}

.status {
  border: thin solid var(--blue);
  background-color: var(--dark);
  box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
  /* Adds an inner shadow while maintaining the outer shadow */
  transition: box-shadow 0.5s ease, transform 0.2s ease;
  /* Smooth transitions for both the shadow and the transform */
}

.status:hover {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .75);
  /* Adds an inner shadow while maintaining the outer shadow */
}

.status:active {
  transform: translateY(4px);
  /* Simulates pressing down by moving the button 2 pixels down */
}

.typing-cursor {
  display: inline;
  opacity: 1;
  animation: blink 1s steps(1) infinite;
}

/* The animation that makes our cursor blink */
@keyframes blink {
  50% {
    opacity: 0;
  }
}

@media screen and (min-width: 3000px) {
  .hero-img {
    display: none;
  }


}

@media screen and (max-width: 1700px) {
  .hero-img {
    max-width: 30vw;
    min-width: 30vw;
  }

  .man {
    height: 40vw;
  }

  .man:hover {
    height: 42vw;
  }

}

@media screen and (max-width: 1500px) {
  .hero-img {
    display: none;
  }

}


@media screen and (max-width: 700px) {

  .title-blue img {
    width: 20rem;


  }

  .hero-info {
    height: 50%;
    font-size: 3.5rem;
  }

  .title-info {
    width: 90%;
    font-size: 20px;
  }


}

@media screen and (max-width: 500px) {
  .hero-info {
    font-size: 2.7rem;
  }


}


/* HERO END*/

/* GAMES START*/

.games {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 1rem auto;
}

.game {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  cursor: pointer;
  background-color: var(--dark);
  border: 3px solid var(--blue);
  height: 100px;
  width: 100px;
  border-radius: 1rem;
  margin: 1rem 2rem 1rem 2rem;
}

.private {
  top: 0;
  right: 0;
  background-color: var(--blue);
  color: white;
  font-family: Light;
  padding: 2px 8px;
  font-size: 14px;
  border-top-right-radius: .7rem;
  border-bottom-left-radius: .7rem;
  position: absolute;
}

@media screen and (max-width: 800px) {
  .game {
    margin: 1rem 1rem 1rem 1rem;
  }

}



/* GAMES END*/


/* SCROLL START */


.image-slider {
  text-align: center;
}

.scroller {
  margin: 5rem auto auto auto;
  max-width: 250rem;
}


.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller_item {
  transition: transform 0.3s ease;
}

.scroller_item:hover {
  transform: scale(1.03);
  /* Enlarge image by 1.5 times */
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,
      transparent,
      white 20%,
      white 80%,
      transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: forwards;
}

.scroller {
  --_animation-duration: 60s;
}

.scroller__inner img {
  width: auto;
  max-height: 20rem;
  border-radius: 1rem;
  object-fit: cover;
  /* Ensures the image covers the area without distorting */
}

@media screen and (max-width: 1200px) {
  .scroller__inner img {
    height: 15rem;
  }
}

@media screen and (max-width: 700px) {
  .scroller__inner img {
    height: 10rem;
  }
}


@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* SCROLL END */


/* CHOOSE US CARDS START */
.discord-vouches {
  width: 600px;
}

.choose-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 14rem;
}

.choose-cards header {
  font-family: Bold;
  color: white;
  font-size: 2.5rem;
}

#cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 75rem;
  margin-top: 5rem;
  width: calc(100% - 20px);
}

#cards:hover>.card::after {
  opacity: 1;
}

.card {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  height: 20rem;
  flex-direction: column;
  position: relative;
  width: 22rem;
}

.card:hover::before {
  opacity: 1;
}

.card::before,
.card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card::before {
  background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
      rgba(255, 255, 255, 0.06),
      transparent 40%);
  z-index: 3;
}

.card::after {
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
      rgba(45, 91, 217, 0.8),
      transparent 40%);
  z-index: 1;
}

.card>.card-content {
  background-color: var(--dark);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  inset: 1px;
  padding: 10px;
  position: absolute;
  z-index: 2;
}

.card-info {
  width: 100%;
  display: flex;
  justify-content: center;
}

.card-image svg path {
  fill: var(--grey);
}



.card-info-title {
  width: 80%;
  text-align: center;
  color: white;
  font-family: Bold;

}


/* CHOOSE US CARDS END */


/* INFO START */

.cheats-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 80rem;
  width: 90%;
  margin: 5rem 0;
}

.cheats-info .divider {
  width: 60%;
  height: 5px;
  background-color: grey;
  border-radius: 1111rem; 
}

.info-text {
  margin: 0 1rem;
  max-width: 27rem;
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.info-text h1 {
  font-family: Bold;
  font-size: 2rem;
  color: var(--white);
}

.info-text p {
  font-family: Medium;
  color: var(--text);
}

.info-features {
  display: flex;
  width: 90%;
  justify-content: center;
  margin: auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.info-features div {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-family: Medium;
  margin: 1rem .5rem;
  color: var(--text);
}

.info-media {
  border-radius: 1rem;
  border: thin solid var(--blue);
  width: 50%;
  width: 50rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  background-color: var(--dark);
  box-shadow: 0 12px 16px rgba(0, 0, 0, 1); /* Shadow below the iframe */
}

.info-media img {
  width: 100%;
  object-fit: cover;
}

.info-media iframe {
  max-height: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Shadow below the iframe */
}


@media screen and (max-width: 1050px) {
  .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .info-media {
    margin: 1rem;
  }

  .info-features {
    width: 100%;
  }

  .info-text {
    margin: 1rem 1rem;
    text-align: center;
  }
}


/* INFO END */



/* FAQ START */

.faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 12rem auto 10rem auto;
  align-items: center;
  width: 100%;
}

.faq-block {
  display: flex;
  flex-direction: column;
  width: 90%;
  cursor: pointer;
  max-width: 60rem;
  overflow: hidden;
  margin: 1.5rem 0;
  height: 3rem;
  border-bottom: var(--blue) thin solid;
  transition: height ease-in-out 200ms;

}

.faq-block svg {
  transition: rotate ease-in-out 200ms;
  rotate: 0deg;
}

.faq-active svg {
  transition: rotate ease-in-out 200ms;
  rotate: 180deg;
}

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.question p {
  font-family: Medium;
  color: var(--white);
  font-size: 20px;
  margin: 0;
}

.answer {
  color: var(--text);
  margin: 0;
  font-family: Light;
}

.answer a {
  color: var(--blue);
}

@media screen and (max-width: 700px) {
  .question p {
    font-size: 15px;
  }

  .answer {
    font-size: 13px;
  }

}

/* FAQ END */