/* 
   Viewport Fix CSS
   This file addresses the issues with content being cut off when the viewport height or width is small,
   while still maintaining the CRT terminal aesthetic.
*/

/* Enable scrolling on HTML while preserving the background */
html.crt {
  height: 100%; 
}

/* Adjust body for viewport filling */
body {
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
  /* Maintain terminal feel with dark background */
  background-color: var(--bg-color, #000);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Left align content */
  justify-content: flex-start; /* Start from the top */
}

/* Make main content fill viewport and scale appropriately */
.crt main {
  position: static;
  width: 90%;
  min-height: 90vh; /* Use most of the viewport height */
  height: auto;
  margin: 2vh auto 2vh 5vw; /* Top, right, bottom, left */
  padding: 2vh 2vw; /* Simplified padding */
  animation: turn-on 2s linear;
  text-align: left; /* Ensure text is left-aligned */
  align-self: flex-start;
  
  /* Ensure font scales with viewport */
  font-size: calc(0.7em + 0.5vmin);
  line-height: 1.4;
  
  /* Apply scaling transform for better visibility */
  transform-origin: top left; /* Scale from top-left corner for terminal feel */
  transform: scale(var(--content-scale, 1));
  
  /* Remove bottom white space */
  display: flex;
  flex-direction: column;
}

/* Dynamic scaling variable (will be set via JS) */
:root {
  --content-scale: 1;
}

/* Add blinking cursor effect to the terminal */
main::before {
  content: "█";
  position: static;
  left: 10px;
  opacity: 0;
  animation: blink 1s infinite;
}

/* Animation for CRT startup effect */
@keyframes turn-on {
  0% {
    opacity: 0;
    filter: brightness(30);
    transform: scale(0.9, 0.1);
  }
  10% {
    opacity: 0.6;
    filter: brightness(14);
    transform: scale(0.9, 0.2);
  }
  30% {
    opacity: 0.4;
    filter: brightness(8);
    transform: scale(1, 0.5);
  }
  50% {
    opacity: 0.2;
    filter: brightness(4);
    transform: scale(1, 1);
  }
  80% {
    opacity: 0.8;
    filter: brightness(1.6);
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1, 1);
  }
}

/* Specific adjustments for very small screens */
@media (max-width: 480px) {
  .crt main {
    width: 95%;
    margin: 2vh auto 2vh 2vw;
    padding: 2vh 2vw;
    font-size: calc(0.6em + 0.5vmin);
    min-height: 85vh;
  }
}

/* Ensure CRT effects remain fixed to the viewport */
body::before, body::after {
  pointer-events: none;
}

/* Additional responsive font classes for nested elements */
.key, .value {
  font-size: calc(1em + 0.1vmin);
}

/* Fix specific layout for the terminal JSON content */
#json {
  text-align: left;
  display: block;
  width: 100%;
  height: 100%;
  flex-grow: 1;
} 

/* Retro Terminal Scrollbar Styling */
/* Width and base styling */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: #000000;
}

/* Track - the area behind the thumb */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid var(--punct-color, #00ff41);
  border-radius: 0;
}

/* Thumb - the draggable part */
::-webkit-scrollbar-thumb {
  background: var(--punct-color, #00ff41);
  border: 1px solid #000;
  box-shadow: 0 0 8px var(--punct-color, #00ff41);
}

/* Thumb hover effect */
::-webkit-scrollbar-thumb:hover {
  background: var(--hover-color, #39ff14);
  box-shadow: 0 0 12px var(--hover-color, #39ff14);
}

/* Buttons at ends of scrollbar */
::-webkit-scrollbar-button {
  background-color: #000;
  border: 2px solid var(--punct-color, #00ff41);
  height: 16px;
  width: 16px;
  display: block;
}

/* Buttons hover effect */
::-webkit-scrollbar-button:hover {
  background-color: rgba(0, 255, 65, 0.2);
}

/* Corner where scrollbars meet */
::-webkit-scrollbar-corner {
  background-color: #000;
  border: 2px solid var(--punct-color, #00ff41);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--punct-color, #00ff41) #000;
}