/* 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-color: black;
  color: green;
  font-family: Garamond;
}

.yagimg {
  display: block; /* Images are inline by default, must be block-level for margin: auto to work */
  margin-left: auto;
  margin-right: auto;
  /*width: 50%; /* Optional: Define a width smaller than the container for centering to have an effect */
}

.image-container {
  /* Set the background image and properties */
  background-image: url('/images/Yagorix.png');
  background-size: cover; /* Ensures the image covers the container area */
  background-position: center;
  position: relative; /* Needed for positioning text if required */
  min-height: 200px; /* Minimum height if text is short */
}

.text-content {
  /* Add padding for readability and ensure the container naturally expands */
  padding: 20px;
  color: white; /* Example text color for readability */
  /* You may need a text shadow or background overlay for better contrast */
}

.topnav {
    background-color: #333; /* W3Schools */
    overflow: hidden; /* Ensures the background color covers all floated elements */
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left; /* Makes the links horizontal */
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; /* Removes the default underline from links */
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav .active {
    background-color: #04AA6D;
    color: white;
}