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


/* Ensure your middle content fills all remaining empty space */
main {
  flex: 1; 
}



body {
  
  background-color: white;
  color: black;
  font-family: Times New Roman;
  text-align: center;

}

/* The outer parent element */
.container {
  display: flex;         /* Activates Flexbox, aligning children horizontally */
  gap: 20px;            /* Adds a 20px space between the boxes */
  justify-content: center; /* Optional: Centers the boxes horizontally on the page */
  flex-wrap: wrap; /* allows boxes to wrap/stack */
}

/* Base styles for both boxes */
.box {
  flex: 1 1 250px; /* grow, shrink, min width before wrapping */
  padding: 20px;        /* Internal padding for text */
  height: auto;
  color: white;
  height: auto;
  min-height: 100px; /* or whatever minimum looks good */
  box-sizing: border-box;


  
  
}


.blue-box {
  background-color: #4a9cb5;
  text-align: center;

}

.blue-box ul {
  display: inline-block;
  text-align: left;
}



.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #4a9cb5;
  color: white;
  text-align: center;
}



.main-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0px;
}


.box3 {
  background-color: #4a9cb5;
  color: white;
  flex: 0 0 100%;
  max-width: 300px;   /* optional: caps width on wide screens */
  margin: 10px auto;  /* auto left/right centers it */
  padding: 10px;
  text-align: center;
}


.box1 {
  margin: auto;
  background-color: #4a9cb5;
  width: 85%;
  padding: 10px;
  
}