/* 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." */
/* === Base Styles === */
body, h1, p, nav, a {
  margin: 0;
  padding: 0;
  font-family: 'Verdana', sans-serif;
}

body {
  background-image: url('gifs/bow background.gif'); /* Replace with your actual file name */
  background-repeat: repeat;
  background-attachment: fixed; /* optional: keeps background still when scrolling */
  background-size: auto; /* ensures it's not stretched */
  background-color: #eaf2fa; /* fallback color if gif doesn't load */
  color: black;
}

/* === Container === */
.container {
  max-width: 800px;         /* Limit how wide your content gets */
  margin: 40px auto;        /* Adds top/bottom spacing and centers left/right */
  padding: 20px;            /* Inner spacing so content doesn’t hug edges */
  background-color: white;  /* Optional: make content box contrast with background */
  text-align: center;       /* Centers text and inline elements */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Optional: soft shadow for floating look */
}
/* === Box ===*/

.box {
  max-width: 800px;         /* Limit how wide your content gets */
  margin: 40px auto;        /* Adds top/bottom spacing and centers left/right */
  padding: 20px;            /* Inner spacing so content doesn’t hug edges */
  background-color: white;  /* Optional: make content box contrast with background */
  text-align: center;       /* Centers text and inline elements */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Optional: soft shadow for floating look */
}

/* === Header === */
header {
  background-color: white;
  padding: 20px 0;
  text-align: center;
}

/* Welcome text above logo */
.welcome-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.welcome-gif {
  width: 100px;  /* Adjust size to be smaller */
  height: auto;
}

.mirrored {
  transform: scaleX(-1); /* flips the gif horizontally */
}

.welcome-text {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: black;
}

/* Logo styling */
.logo {
  width: 300px; /* Slightly larger than default */
  height: auto;
  background-color: white;
  display: block;
  margin: 0 auto 15px auto;
}

/* === Navigation === */
.nav-buttons {
  margin-top: 10px;
  text-align: center;
}

.nav-buttons a {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: black;
  text-decoration: none;
  margin: 0 10px;
  font-size: 14px;
}

.nav-buttons a:hover {
  text-decoration: none;
}
/* === Other Elements === */


footer {
  text-align: center;
  padding: 10px;
  background-color: white;
  margin-top: 20px;
}

h1 {
  font-size: 3em;
  text-shadow: 2px 2px #333;
}

/* If you ever return to horizontal nav */
.header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}