/* 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: "SethDaBoi2 Font";
    src: url("fonts/SethDaBoi2 Font.woff2") format("woff2");
}

body {
  background-color: white;
  color: black;
  font-family: "SethDaBoi2 Font", sans-serif;
}

nav {
  display: flex;

  justify-content: center;
  
  gap: 30px;
}

nav a {
  /* 1. Turns on the dark, semi-transparent background block (Black at 75% opacity) */
  background-color: rgba(0, 0, 0, 0.75);

  /* 2. Adds breathing room inside the box so the text isn't squished */
  padding: 10px 14px;

  /* 4. Keeps your text color white inside the dark box */
  color: #999999;

  /* 5. Keeps the font settings you already established */
  font-size: 32px;
  text-decoration: none;
}

nav a:hover {
  color: #ffffff;
  
  background-color: rgba(0, 0, 0, 0.95);
}

a:hover {
  filter: brightness(1,5); /* Boosts the brightness of the GIF/image by 50% */
}