/* header css, background image is unavailable in bootstrap */
header {
  margin: 0 auto; 
  background-image: url('../images/counties_long.png'); 
  background-size: cover; 
  background-position: center; 
  min-height: 30vh;
  border-top: 5px solid black;
  border-left: 5px solid black;
  border-right: 5px solid black;
  border-bottom: none;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.header-content {
  background-color: rgba(198, 242, 198, 0.65); 
  font-family: 'Kanit', sans-serif; 
  padding: 1rem; 
  border-radius: 1rem;
}

.title-text {
  font-size: 2.5rem;
}

.subtitle-text {
  font-size: 1.5rem;
}

html, body {
  background-color: black; /* Ensures the black border doesnt have white behind it */
}

.content {
  border-style: solid;
  border-color: black;
  border-width: 2px 5px; /* top/bottom = 2px, left/right = 5px */
  background-color: white;
}

.footer {
  margin-top: auto; /* Push footer to the bottom */
  background-color: #c6f2c6;
  border-style: solid;
  border-color: black;
  border-top: none;
  border-left: 5px solid black;
  border-right: 5px solid black;
  border-bottom: 5px solid black;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  max-height: 15vh;
}