/* Classic 2000s Geocities/Angelfire Style - Now Responsive! */
:root {
  --neon-pink: #FF00FF;
  --neon-green: #00FF00;
  --neon-blue: #00FFFF;
  --neon-yellow: #FFFF00;
  --neon-red: #FF0000;
  --dark-bg: #000000;
  --dark-blue: #000080;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--dark-bg);
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGElEQVQYV2NkYGD4z4AEYBgqgGMIABIFAA24A/ceoZ3/AAAAAElFTkSuQmCC'); /* Tiny stars pattern */
  color: var(--neon-green);
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", cursive;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Animated rainbow header - Responsive */
.header {
  background: linear-gradient(90deg, 
    var(--neon-red), #FF7F00, var(--neon-yellow), var(--neon-green), 
    #0000FF, #4B0082, var(--neon-pink), var(--neon-red));
  background-size: 800% 800%;
  padding: 0.5vh 0;
  border: 3px double #FFFFFF;
  margin: 0;
  animation: rainbow 5s linear infinite;
  font-weight: bold;
  font-size: clamp(10px, 0vw, 20px);
  text-shadow: 2px 2px 0 #000000;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}

@keyframes rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Blinking text for extra 2000s */
.blink {
  animation: blink 0.8s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Main content area - Responsive */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1vh;
  min-height: 0; /* Important for flex children */
}

/* Video container - Responsive full screen */
.video-container {
  flex: 1;
  background: var(--dark-bg);
  border: 8px ridge var(--neon-pink);
  margin: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px var(--neon-pink);
  min-height: 0; /* Important for flex children */
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Makes video fit container while maintaining aspect ratio */
  max-width: 100%;
  max-height: 100%;
}

/* Navigation buttons - Responsive */
.navigation {
  background: var(--dark-blue);
  border: 3px outset #C0C0C0;
  padding: 1vh;
  margin: 1vh;
  font-size: clamp(14px, 3vw, 18px);
  font-weight: bold;
  flex-shrink: 0;
}

.nav-button {
  color: var(--neon-blue);
  background: #0000FF;
  border: 2px outset #C0C0C0;
  padding: 1vh 2vw;
  margin: 0 1vw;
  text-decoration: none;
  font-family: "Comic Sans MS", cursive;
  font-size: inherit;
  cursor: pointer;
  display: inline-block;
  min-width: 20vw;
  max-width: 150px;
}

.nav-button:hover {
  background: var(--neon-red);
  color: var(--neon-yellow);
  border: 2px inset #C0C0C0;
}

/* Visitor counter - Responsive */
.counter {
  position: absolute;
  top: 1vh;
  right: 1vw;
  background: var(--dark-bg);
  color: var(--neon-green);
  border: 2px dotted var(--neon-yellow);
  padding: 0.5vh 1vw;
  font-size: clamp(10px, 2vw, 14px);
  font-family: "Courier New", monospace;
  z-index: 10;
}

/* Counter12 styling */
.counter img {
  border: 2px solid var(--neon-green) !important;
  background: var(--dark-bg) !important;
  max-width: 100%;
  height: auto;
}

/* Scrolling marquee for extra authenticity - Responsive */
.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  background: var(--dark-blue);
  color: var(--neon-yellow);
  padding: 0.5vh;
  border: 1px dotted #FFFFFF;
  font-weight: bold;
  font-size: clamp(12px, 2.5vw, 16px);
  flex-shrink: 0;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

/* Status message - Responsive */
.status-message {
  color: var(--neon-yellow);
  font-size: clamp(12px, 2.5vw, 16px);
  margin: 1vh;
  flex-shrink: 0;
}

/* Keyboard help - Responsive */
.keyboard-help {
  color: var(--neon-blue);
  font-size: clamp(10px, 2vw, 14px);
  margin: 1vh;
  flex-shrink: 0;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  body {
    height: 100vh;
    overflow: hidden;
  }
  
  .header {
    padding: 0.5vh 0;
  }
  
  .video-container {
    border-width: 4px;
    margin: 0.5vh;
  }
  
  .navigation {
    padding: 0.5vh;
    margin: 0.5vh;
  }
  
  .nav-button {
    padding: 0.5vh 3vw;
    margin: 0 2vw;
    min-width: 25vw;
  }
  
  .counter {
    padding: 0.5vh 2vw;
  }
}

/* Ultra-small mobile devices */
@media (max-width: 480px) {
  .header h1 {
    font-size: clamp(14px, 5vw, 20px);
  }
  
  .nav-button {
    min-width: 28vw;
    font-size: 12px;
    padding: 0.5vh 1vw;
  }
  
  .marquee {
    font-size: 11px;
  }
}

/* Tablet and larger screens */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-button {
    min-width: 15vw;
  }
}

/* TV and very large screens */
@media (min-width: 1200px) {
  .header {
    padding: 2vh 0;
  }
  
  .video-container {
    margin: 2vh;
  }
  
  .navigation {
    padding: 2vh;
    margin: 2vh;
  }
}

/* Landscape mode for mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .header {
    padding: 0.5vh 0;
    font-size: 16px;
  }
  
  .marquee {
    display: none; /* Hide marquee in landscape to save space */
  }
  
  .navigation {
    padding: 0.5vh;
  }
  
  .status-message, .keyboard-help {
    font-size: 12px;
    margin: 0.5vh;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .video-player {
    /* Ensure video looks crisp on retina displays */
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .blink, .marquee span, .header {
    animation: none;
  }
  
  .marquee span {
    animation: none;
    padding-left: 0;
    text-align: center;
  }
}