body {
  margin: 0;
  min-width: 250px;
  display: flex; /*Used to make main always fill at least the viewport and have footer at the bottom.*/
  flex-direction: column;
  min-height: calc(
    100vh
  ); /*Force the body to always fill the page. -4px avoids the scrollbar because 100vh is slightly too large.*/
}

/*Container for the title.*/
#logodiv {
  background-color: #0070c0;
  height: 10vh;
  min-height: 50px;
  margin: 0;
  display: flex;
  justify-content: space-between; /*Spaces elements horizontally with no space left or right.*/
  align-items: center; /*Centers elements vertically.*/
}

.logoheader {
  margin: 10px;
  max-width: 20vw;
  height: 80%;
}

/*Scales element to parent container size while preserving aspect ratio.*/
.logoinlink {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#titletext {
  color: white;
  font-family:
    "Century Gothic", "Franklin Gothic Medium", "Arial Narrow", Arial,
    sans-serif;
  font-weight: bolder;
  font-size: clamp(10px, 4vw, 48px);
  text-align: center;
}

#menustrip {
  background-color: #0070c0;
  color: white;
}

#menulist {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

#menulist a,
#menubutton {
  display: block;
  padding: 10px;
  background-color: #0070c0;
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

#menubutton {
  display: none;
}

#menulist a:hover {
  background-color: rgb(255, 145, 0);
}

#menubutton:hover {
  cursor: pointer;
}

#menubutton:hover ~ #menulist {
  display: block;
  position: absolute; /*Puts menu list always on the same spot regardless of scroll position*/
}

.active {
  background-color: rgb(255, 145, 0) !important;
}

main {
  flex: 1 0 auto; /*Allow main to grow to fill all available space.*/
}

footer {
  background-color: rgb(255, 136, 0);
  height: 10vh;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 0;
}

#sponsors {
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  align-content: center;
  height: 100%;
  column-gap: 20px;
}

#sponsors a {
  display: block;
  margin: 15px 0px;
}

@media (max-width: 600px) {
  #menulist {
    flex-direction: column;
    display: none;
  }
  #menubutton {
    display: block;
  }
  #menulist:hover {
    display: block;
    position: absolute;
  }
}