h1 {font-size: 50px;}
h1 {text-align: center;}
h1 {font-family: arial;}
h1 {color:darkgreen;}
h1 {background-color: limegreen;}
h2 {font-size: 35px; }
h2 {font-family:arial;}
h2 {text-align: center;}

img {width: 100%; height: 200px; display: block; }  

h4 {font-size: 18px; }
h4 {font-family:arial;}
h4 {text-align: center;}

h3 {font-size: 18px; }
h3 {font-family:arial;}
h3 {text-align: center;}


a {text-align: center; font-size: 20px;}
a {font-family:arial; }
a {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a{
  display: flex;
  flex-direction: column; /* Stacks the word on top of the link */
  justify-content: center; /* Centers them vertically (top to bottom) */
  align-items: center;     /* Centers them horizontally (left to right) */
  width: 100%;
  font-family: sans-serif; /* Clean modern font text */
}

body {
    background-color:rgb(216, 248, 206);
}


* Removes extra spacing around the logo container */
.logo {
  display: flex;
  align-items: center;
}


/* Turns the links into lookalike buttons */
.nav-buttons {
  display: flex;       
  flex-direction: row; /* Rows them horizontally */
  align-items: center; /* Aligns them perfectly straight */
}

/* Adjusts the button spacing */
.nav-btn {
  color: rgb(47, 207, 15);
  text-decoration: none;        
  background-color: #119721;    
  padding: 8px 16px;            
  border-radius: 4px;           
  margin: 0 10px;       /* Adds equal 5px gaps to the left and right */
  transition: background 0.3s;  
}
/* Changes the button color when you hover over it */
.nav-btn:hover {
  background-color: #60e33f;    /* Darker blue on hover */
}