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

:root{
  
  --color-bg: #CBC09F;
  --color-bg-alt:  #F7EECB;
  --color-text: #5C552B;
  --color-primary:  #482D58;
  --color-secondary: #8E76AA;
  --color-accent: #EFB262;
  --color-muted:  #EFB262;
  --color-border: #B4B4AA;
}

body {
  /* Replace 'your-image.jpg' with your actual file path or URL */
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url('webbackground.jpg');

  /* Scale the image to cover the entire screen */
  background-size: cover;

  /* Keep the image from repeating */
  background-repeat: no-repeat;

  /* Keep the image fixed so it doesn't scroll with the page */
  background-attachment: fixed;

  /* Center the image */
  background-position: center;
  
  /* Fallback color in case the image doesn't load */
  background-color: #869f76;
  color: black;
  font-family: Verdana;
}

.navbar ul {
  list-style-type: none;
  background-color: #333;
  padding: 10px;
  display: flex; /* Aligns links horizontally */
  justify-content: center; /* Centers the links */
}

.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF;
  border: none;
  cursor: pointer;  
  color: white;
  text-decoration: none;
  border-radius: 5px;
}