/* 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 {
  background-color: white;
  color: white;
  background-image: url('/images/bg.gif');
  font-family: Verdana;
}
/* Centers the content box and creates the 8-bit retro border */
.content-box {
  max-width: 650px;
  margin: 40px auto;
  padding: 25px;
  background-color: #000000;
  color: #ffffff;

  /* Retro 3D Pixel Bevel Border */
  border: 4px solid;
  border-color: #ffffff #888888 #888888 #ffffff;
}

/* Fixes dark purple links so they are bright and easy to read */
a {
  color: #ff99cc;
}

a:visited {
  color: #cc6699;
}
/* Space between boxes */
.video-box {
  margin-top: 30px;
  text-align: center;
}

/* Keeps video 16:9 and prevents overflow on smaller screens */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  margin-top: 15px;
  
  /* Retro Pixel Border around the video screen */
  border: 3px solid #ffffff;
  background-color: #000000;
}

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


.side-cat {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px; /* Adjust size to fit your gif */
  z-index: 10;
}
/* Hides the side cat on small phone screens so it doesn't cover content */
@media (max-width: 900px) {
  .side-cat {
    display: none;
  }
}
/* Ensures absolute positioning stays inside the video box */
.video-box {
  position: relative;
}
/* Pins the cat to the top-left corner */
.corner-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px; /* Adjust width to fit your gif size */
  height: auto;
}
.corner-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px; /* Increase this number to make it bigger (e.g., 80px or 100px) */
  height: auto; /* Keeps the proportions correct so it doesn't stretch */
}
.top-center-gif {
  display: block;
  margin: 0 auto 10px auto; /* Centers the GIF horizontally and adds a 15px gap below it */
  max-width: 200px;         /* Adjust width size as needed */
  height: auto;
}
.inline-new-gif {
  height: 34px;         /* Adjust height to match your heading font size */
  width: auto;          /* Maintains the aspect ratio */
  vertical-align: middle; /* Keeps the GIF centered vertically with the text */
  margin-left: 6px;     /* Adds a small gap between :3 and the GIF */
}
.header-gif {
  display: block;
  margin: 10px auto;     /* Centers the GIF horizontally inside the header */
  height: 300px;          /* Matches a standard large h1 font height */
  max-width: 90%;        /* Keeps it responsive on smaller mobile screens */
  width: auto;           /* Maintains original aspect ratio so it doesn't stretch */
}