h1 {
  font-size: 44px;
  font-family: verdana, serif;
  font-weight: 900;
  font-variant: small-caps;
  color: lightseagreen;
  text-align: center;
}

body {
  background-color: white;
  color: midnightblue;
  font-family: georgia, serif;
}

/*main panel on index page*/
#main {
  background-color:papayawhip;
  border: 1px solid;
  border-color:darkgrey;
  color:midnightblue;
  font-size: 16px;
  font-family: georgia, serif;
  padding: 0px 20px 20px 20px;
  width: 60%;
  height:auto;
  margin-left: 20%;
  margin-right: 20%;
}

/*flex container for a navigation bar /"call-to-action" row of buttons on index page*/
.button-row {
  display: flex; /* Turns on Flexbox */
  width: 100%; /* Ensures the paragraph takes up the full width of its parent */
  justify-content: space-evenly; /* This handles the spacing */
  /* Optional: removes default paragraph margins if they mess with your layout */
  /*margin: 0; 
  padding: 0;*/
}

/*container for "footers"-text and images at the bottom of index.html*/
.right-aligned-container {
  display: flex; /* Turns on Flexbox */
  flex-direction: column; /* Stacks the items vertically */
  align-items: flex-end; /* Pushes all items to the right (end) of the container */
  text-align: right; /* Ensures the text itself is aligned right, not just the box */
  font-size: 12px;
}

/*Button styling*/
.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: lightseagreen;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-family: Arial, sans-serif;
}

/* Adds a slightly darker color when you hover over button-link */
.button-link:hover {
  background-color: seagreen; 
}