/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  font-family: verdana;
  background-color: white;
  color: black;
}

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

.wip-text {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
}

.container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically (if the container has height) */
}

/* Cube logic and Animation */
#ascii-cube {
  font-family: 'Press Start 2P', monospace; /* Font */
  font-size: 10px;
  line-height: 10px; /* Crucial: Keeps the rows tightly stacked */
  color: black;    /* Hacker green */
  background-color: white;
  overflow: hidden;
}

/* Bad apple ASCII player */
#bad-apple-player {
  font-family: 'Press Start 2P', monospace; 
  font-size: 8px; /* Kept small to fit all 80 characters across the screen */
  line-height: 13px; 
  color: black;
  background-color: white;
  overflow: hidden;
  margin: 20px auto;
}

/* Mobile responsiveness to fix centering and cube size */
@media (max-width: 800px) {
  
  /* Ensures the image never stretches wider than the phone screen */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Overrides the desktop size for the cube and ASCII player when on mobile */
  #ascii-cube {
    font-size: 1.4vw;   /* Uses 'vw' (viewport width) so the font scales dynamically to fit perfectly */
    line-height: 1.4vw; /* Keeps the rows perfectly stacked at the new dynamic size */
  }
  
  /* Overrides the desktop size for the ASCII player when on mobile */
  #bad-apple-player {
    font-size: 1.4vw; 
    line-height: 2.5vw; 
  }
  
  h1 {
    font-size: 24px; /* adjusts font size for h1 on mobile */
  }
}