/* 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." */

@font-face {
  font-family: 'DOS';
  src: url('fonts/DOS.woff2') format('woff2'),
       url('fonts/DOS.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Shows a fallback font while loading to prevent blank text */
}

/* 2. Apply it to your HTML elements */
body {
  background-color: black;
  background-image: url('backgrounds/woods.png');
  background-repeat: no-repeat;            /* Prevents the image from repeating like a tile */
  background-size: cover;                  /* Stretches the image to fill the entire screen */
  background-position: center;             /* Centers the image on the screen */
  background-attachment: fixed;            /* Keeps the background in place while scrolling */
  color: white;
  font-family: 'DOS', sans-serif;
}

.banner {
  display: flex;
  width: fit-content; /* Shrinks the banner width to match its contents */
  gap: 20px;
  margin: 0 auto;   /* Keeps the shrunken banner centered on the page */
  height: 10vh;
  padding: 10px;
  border: 2px solid green;
  background-color: black;
}