body,
html {
  margin: 0;
  padding: 0!important;
  overflow-x: hidden;
  background: #000 center center url("/img/night_sky_gradient.png");
  background-size: cover;
  cursor: none;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: 1;
  padding: 10px;
}

header img {
  max-height: 70px;
  left: 5vw;
  position: relative;
}

.header-logo img {
  transition: transform 0.3s ease, filter 0.3s ease; /* Add transitions for smooth hover effect */
}

.header-logo a:hover img {
  filter: brightness(1.5) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); /* Add a glowing effect on hover */
}

@media only screen and (max-width: 896px) {
  header img {
    max-height: 50px;
  }
  .cursor-image {
    display: none !important;
    visibility: hidden !important;
  }
}
@media only screen and (max-width: 414px) {
  .parallax-container {
    scale: 2;
    left: 50%;
  }
  .parallax-image {
    width: 200%;
  }
  .social-icons a {
    margin-right: 1.5vw !important; /* Adjust the spacing between social icons */
  }
}
@media only screen and (max-width: 896px) {
  .flip-container {
    margin-top: -10vw !important;
  }
  .parallax-container {
 /* margin-top: 0vw !important; This is a fix for iPhone XR */
  }
  .spiral-text {
    opacity: 1 !important;
    animation: none;
    transform: none;
    transition: none;
    font-size: 3vw !important;
    margin-left: -9vw !important;
  }
  .flip-text {
    opacity: 1 !important;
    animation: none;
    transform: none;
    transition: none;
    font-size: 3vw !important;
    margin-left: -6.5vw !important;
    margin-top: -2.75vw !important;
  }
  .tablet-text,
  .tablet-container {
    opacity: 1 !important;
    animation: none;
    transform: none;
    transition: none;
    background: transparent !important;
  }
  .tablet-text {
    font-size: 3vw !important;
    margin-left: -3.5vw !important;
    margin-top: -1.5vw !important;
  }

  .spiral-container:hover .spiral-text,
  .flip-container:hover .flip-text,
  .tablet-container:hover .tablet-text {
    opacity: 1;
    transform: translateY(0vw) !important;
  }
}

.parallax-container {
  position: relative;
  width: 200vw;
  height: 100vh;
  overflow: hidden;
}

.parallax-image {
  background-image: url("https://sandbox.vultur3s.com/img/aeropagus_gradient.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 65%;
  height: 100%;
  top: 0;
  left: -7.5%;
  position: relative;
}

.pulse-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(calc(1vw / 19.2));
  z-index: 1;
  margin-left: 33vw;
  margin-top: 1vw;
}

.pulse {
  height: 2vw;
  width: 2vw;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2.5vw;
  color: #ffffff;
}

.pulse:before,
.pulse:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #eee;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.7;
}

.pulse:before {
  animation: pulse 2s ease-out infinite;
}

.pulse:after {
  animation: pulse 2s 1s ease-out infinite;
}

@keyframes pulse {
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.spiral {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin-left: -20vw;
  margin-top: -20vw;
  width: 40vw; /* Adjust the size as needed */
  height: 40vw; /* Adjust the size as needed */
  background: url("https://sandbox.vultur3s.com/img/spiral_med.png") no-repeat
    center center;
  background-size: cover!important;
  animation: hoverUpDown 0.7s infinite alternate; /* Adjust the animation speed as needed */
}

@media only screen and (min-width: 897px) {
  .spiral {
    background: url("https://sandbox.vultur3s.com/img/spiral_med.png") no-repeat
      center center;
  }
}

.spiral-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1 !important;
  margin-left: -20vw;
  margin-top: -20vw;
  width: 40vw;
  height: 40vw;
  animation: hoverUpDown 0.7s infinite alternate;
}

@keyframes hoverUpDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

/* Styles for the spiral text */
.spiral-text {
  font-family: "GreekFreak", sans-serif;
  position: absolute;
  margin-left: -15vw;
  top: 2vw;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 5vw;
  opacity: 0;
  animation: fadeInOut 0.5s ease-out forwards;
  text-decoration: none;
  z-index: 2;
}

.spiral-container .spiral-text {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.spiral-container:hover .spiral-text {
  opacity: 1;
  transform: translateY(-1vw);
}

.tablet-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin-left: 29vw;
  margin-top: -7.75vw;
  width: 10vw;
  height: 20vw;
  background: url("https://sandbox.vultur3s.com/img/tablet.png") no-repeat
    center center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tablet-container:hover {
  pointer-events: auto;
  opacity: 1;
}

@font-face {
  font-family: "GreekFreak";
  src: url("https://sandbox.vultur3s.com/font/Greek-Freak.woff2")
    format("woff2");
}

.tablet-text {
  font-family: "GreekFreak", sans-serif;
  position: absolute;
  margin-left: -6vw;
  margin-top: -2.5vw;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 5vw;
  opacity: 0;
  animation: fadeInOut 0.5s ease-out forwards;
  text-decoration: none;
}

.tablet-container .tablet-text {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tablet-container:hover .tablet-text {
  opacity: 1;
  transform: translateY(-1vw);
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 2;
  padding: 10px;
}

.footer-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 20px; /* Adjust the margin to move icons inward from the right */
}

.social-icons {
  display: flex;
}

.social-icons a {
  margin-right: 2vw; /* Adjust the spacing between social icons */
}

.social-icons img {
  width: 30px; /* Adjust the size as needed */
  height: 30px; /* Adjust the size as needed */
  transition: transform 0.3s ease, filter 0.3s ease; /* Add transitions for smooth hover effect */
}

.social-icons a:hover img {
  transform: scale(1.2); /* Increase size on hover */
  filter: brightness(1.5) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); /* Add a glowing effect on hover */
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: #fff; /* Adjust the text color */
  font-size: 18px; /* Adjust the font size */
  font-family: "GreekFreak", sans-serif; /* Use the same font as other links */
  opacity: 0.8; /* Adjust the opacity */
}

.stream-icons {
  position: absolute;
  bottom: 10px;
  left: 0;
  display: flex;
  margin-left: 2vw; /* Adjust the margin to move icons inward from the left */
}

.stream-icons a {
  margin-right: 2vw; /* Adjust the spacing between stream icons */
}

.stream-icons img {
  width: 30px; /* Adjust the size as needed */
  height: 30px; /* Adjust the size as needed */
  transition: transform 0.3s ease, filter 0.3s ease; /* Add transitions for smooth hover effect */
}

.stream-icons a:hover img {
  transform: scale(1.2); /* Increase size on hover */
  filter: brightness(1.5) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); /* Add a glowing effect on hover */
}
.custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
 /* transition: transform 0.05s ease-out; */
}

.cursor-image {
  width: 40px; /* Adjust the size of your cursor */
  height: 40px;
  transform-origin: center;
  will-change: transform;
}

a:hover,
button:hover {
  cursor: none;
}

.swipe-image-container {
  position: fixed;
  bottom: 45px; /* Adjust the distance from the bottom as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
}
#swipe-image-container {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.swipe-image {
  width: 70px; /* Adjust the size as needed */
  height: auto; /* Maintain aspect ratio */
}

@media only screen and (min-width: 897px) {
  .swipe-image-container {
    display: none; /* Show the container on mobile devices */
  }
}

@media only screen and (min-width: 897px) {
  .flipper {
    animation: flip 8s infinite;
  }
  .flipper img:nth-child(2) {
    transform: rotateY(180deg);
  }

  .flipper-wrapper:hover .flipper {
    transform: rotateY(180deg);
  }
}

@media only screen and (max-width: 896px) {
   .flipper {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        display: flex; /* Added display: flex */
        justify-content: center; /* Center horizontally within each grid cell */
        align-items: center; /* Center vertically within each grid cell */
    }

        .flipper img {
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            position: absolute;
        }

        .flipper img:nth-child(2) {
            transform: rotateY(180deg);
        }

        @keyframes flip {
            0%, 100% {
                transform: rotateY(0deg);
            }
            50% {
                transform: rotateY(180deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
}

.flip-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  margin-left: -40vw;
  margin-top: -10vw;
  width: 20vw;
  height: 20vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  row-gap: 0.1vw;
  column-gap: 0.125vw;
}

.flipper-wrapper {
  width: 10vw;
  height: 10vw;
  display: grid;
}

.flipper {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.8s ease; /* Add a transition for smooth rotation */
}

.flipper img {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  position: absolute;
}

.flip-text {
  font-family: "GreekFreak", sans-serif;
  position: absolute;
  margin-left: -11.5vw;
  margin-top: -3.5vw;
  left: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 5vw;
  opacity: 0;
  transform: translateY(0); /* Initial position */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Add transition for transform */
  z-index: 2;
}

.flip-container:hover .flip-text {
  opacity: 1;
  transform: translateY(-1vw); /* Adjust the translation distance */
}