/* Body styling */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Let the body grow if necessary */
  background: radial-gradient(circle, #001f3f, #000000); /* Dark gradient background */
  font-family: 'Press Start 2P', cursive; /* Retro pixelated font */
  color: #fff;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  overflow-y: auto; /* Allow vertical scroll only when needed */
  margin: 0; /* Remove any default margins */
}

/* Falling pixels effect */
.falling-pixels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.pixel {
  width: 3px;
  height: 3px;
  background-color: #00ff00;
  position: absolute;
  top: -10px;
  animation: fall linear infinite;
  opacity: 0.7;
}

@keyframes fall {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* Retro scanlines effect */
.scanlines {
  background: repeating-linear-gradient(
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 3px
  );
  padding: 20px;
  border-radius: 8px;
}

/* Arcade frame styling */
.arcade-frame {
  position: relative;
  padding: 20px;
  border: 2px solid #333;
  background-color: #000;
  color: #32CD32;
  max-width: 600px;
  margin: auto;
  overflow: hidden; /* Ensures no content leaks outside */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Video container for embedding */
.video-container {
  position: relative;
  width: 100%; /* Makes the video container responsive */
  max-width: 480px; /* Limits the iframe to its original size */
  height: 0;
  padding-bottom: 56.25%; /* Aspect ratio for 16:9 video */
  margin: 10px auto;
  overflow: hidden; /* Hides any overflowing content */
  border: 1px solid #32CD32; /* Optional border for the video */
  border-radius: 5px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Glowing arcade header */
.arcade-header {
  font-size: 2.2rem;
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; /* Bright cyan glow */
  animation: flicker 1s infinite alternate;
  margin-bottom: 20px;
  text-align: center; /* Center-aligns the text */
}

/* Profile picture container */
.profile-picture-container {
  position: absolute; /* Allow free movement across the viewport */
  width: 80px; /* Match the profile picture's size */
  height: 80px; /* Match the profile picture's size */
  margin: 0; /* Remove margins that interfere with placement */
  top: 0; /* Start from the top */
  left: 0; /* Start from the left */
  z-index: 10; /* Keep it on top */
}

/* Profile picture */
.profile-picture {
  width: 100%; /* Fill the container */
  height: 100%; /* Fill the container */
  border-radius: 50%; /* Optional: Circular profile picture */
  border: 3px solid #00ff00;
  box-shadow: 0px 0px 15px #00ff00;
  animation: rotate 4s linear infinite; /* Add rotation effect */
}

/* Arcade description */
.arcade-desc {
  font-size: 1rem;
  color: #ff00ff;
  text-shadow: 0 0 5px #ff00ff;
  animation: flash 1.5s infinite;
  margin-bottom: 15px;
  text-align: center;
  max-width: 100%; /* Ensure it fits within the arcade frame */
}

/* Centering the links in the arcade frame */
.links {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center the buttons */
}

/* Arcade button */
.arcade-button {
  display: inline-block;
  margin: 10px 0;
  padding: 10px 20px;
  font-size: 1rem;
  color: #000;
  background-color: #00ffff;
  border: 2px solid #00ff00;
  border-radius: 10px;
  transition: transform 0.2s ease-in-out;
  animation: bounce 2s infinite;
  box-shadow: 0px 0px 10px #00ff00;
}

/* Button hover */
.arcade-button:hover {
  transform: scale(1.1) rotate(3deg); /* Fun, bouncy interaction */
}

/* Score counter */
.score-counter {
  position: fixed;
  bottom: 10px; /* Fix to the bottom */
  right: 10px; /* Fix to the right */
  font-family: 'Press Start 2P', cursive;
  color: #ff00ff;
  font-size: 1.2rem;
  z-index: 1000; /* Ensure it stays on top */
}

/* Animations */
@keyframes glow {
  from {
    box-shadow: 0px 0px 10px #ff00ff;
  }
  to {
    box-shadow: 0px 0px 20px #00ffff;
  }
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #111;
}

::-webkit-scrollbar-thumb {
  background-color: #ff00ff;
  border-radius: 6px;
  border: 3px solid #00ffff;
}

/* Responsive styling for mobile devices */
@media (max-width: 768px) {
  body {
    padding: 15px;
  }

  .arcade-frame {
    padding: 15px;
    width: 90%; /* Make sure it fills the mobile screen */
    max-width: 100%; /* Remove max-width limit on mobile */
    margin: auto; /* Center the frame */
  }

  .arcade-header {
    font-size: 1.8rem; /* Smaller header font */
  }

  .arcade-button {
    font-size: 0.9rem; /* Smaller buttons on mobile */
    padding: 10px 15px; /* Reduced padding */
  }

  .profile-picture {
    width: 60px; /* Smaller profile picture on mobile */
    height: 60px;
    border-radius: 50%;
  }

  .arcade-desc {
    font-size: 0.9rem; /* Smaller description text */
    margin-bottom: 10px;
    text-align: center;
  }

  .score-counter {
    font-size: 1rem; /* Smaller font size for the score counter */
  }
}