/* 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-image: url("images/main-bg.gif");
  background-attachment: fixed;
  background-repeat: repeat;
  /* Add these lines: */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;          /* Make body take full viewport height */
  margin: 0;              /* Remove default body margin */
}
.centered-box {
  width: 700px;
  height: 600px;
  background-color: #ffffff;
  /* A thicker, more pronounced border */
  border: 6px solid #000000;
  /* This property helps keep edges crisp, not blurry */
  image-rendering: pixelated;
  /* Use a pixel art font for the text inside */
  font-family: 'Courier New', monospace;
  text-align: center;
  padding: 20px;
  /* A simple shadow that looks like a blocky drop shadow */
  box-shadow: 8px 8px 0px #666666;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}