@font-face {
  font-family: "Gill Sans";
  src:
    local("Gill Sans"),
    url("/fonts/Gill Sans.otf");
}

body {
  background-color: tan;
  font-family: "Gill Sans", Sans-Serif;
}

#header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  font-weight: bold;
}
#header img {
  height: 4em;
}
#header a:hover {
  color: white;
}

#nav, #footer {
  background-color: red;
}
#nav a {
  color: white;
}
#nav a:hover {
  color: tan;
}

#content {
  background-color: yellow;
}
#viewer {
  margin-top: 2em;
  position: relative;
  display: none;
  background-color: black;
  border-radius: 0.5em;
}
#viewerText {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}
.closeButton {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
} 
#MOCs {
  margin-top: 2em;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
}
#MOCs div {
  color: white;
  background-color: red;
  border-radius: 0.25em;
  margin: 0.25em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#MOCs div:hover > * {
  font-weight: bold;
}
#MOCs div h2 {
  padding: 0.25em;
}
#MOCs img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}