/* 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." */
  /* dark orange: 9C4627
  Bright orange: EE9E68
  Pale orange:
  Dark teal: 004543 
  Teal:
  Bright teal:
  Beige:FAEEDA
  
  style="Text-align: center;"
  */ 
header {
  background-color: #004543;
  color: #FAEEDA;
  text-align: center;
  padding: 5px;
}


/* Style the topnav */
ul.topnav {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #004543;
}

/* Style links in topnav */
ul.topnav li a {
  display: block;
  color: #FAEEDA;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
ul.topnav li a:hover {
  background-color: #EE9E68;
  color: #004543;
}

a {
 color: inherit;  
}

body {
  background-color: #FAEEDA;
  color: #004543;
  font-family: Garamond;
  padding: 0px;
}

p {
  padding: 10px;
  margin: 0 25px;
  }

.newspaper-columns {
  column-count: 2;   /* Automatically splits the text into 2 columns */
  column-gap: 30px;  /* Adds space between the columns */
}

.flex-container {
  display: flex;
  gap: 5px;
}

.flex-child {
  flex: 1; /* Forces both columns to take up equal width */
  border-radius: 10px; 
  padding: 10px;
  border-style: none solid;
  border-width: 0px;
}
.flex-child:hover {
  flex: 1; /* Forces both columns to take up equal width */
  border-radius: 10px; 
  padding: 10px;
  border-style: none solid;
  border-width: 0px;
}

/* Optional: Stacks columns vertically on screens smaller than 600px */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}

article {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  padding: 10px;
  margin: 5px;
  
}

/* On mouse-over, add a deeper shadow */
article:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}