/* =========
   Universal
   ========= */

@font-face {
  font-family: LiberationSerif-web;
  src: url(_fonts/LiberationSerif-Regular.ttf);
}

@font-face {
  font-family: LiberationSerif-web;
  src: url(_fonts/LiberationSerif-Italic.ttf);
  font-style: italic;
}

@font-face {
  font-family: LiberationSerif-web;
  src: url(_fonts/LiberationSerif-BoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
}

body {
  font-family: "Liberation Serif", LiberationSerif-web, "Times New Roman", "Times", serif;

  /* Fallback backgrounds */
  background-image: linear-gradient(#408040, #004000 55%, #002000 80%, #001000);
  background-color: #206020;
  /* Stretch gradient to fill viewport */
  background-attachment: fixed;

  /* Default font */
  font-style: italic;
  font-weight: bold;
  text-align: left;
  letter-spacing: 0.5px;
}

body a {
  /* Remove underline and color from links */
  color: inherit;
  text-decoration: none;
}

body a:hover {
  color: yellow;
  scale: 110%;
  display: inline-block;
}

body a:active {
  scale: 100%;
}

/* ===============
   Universal: grid
   =============== */

.grid {
  display: grid;
}

.grid a {
  display: block;
  overflow: hidden;
  
  background-color: #c2c2c2;
  border: 4px inset black;
}

.grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ======
   Header
   ====== */

#title {
  font-size: 48pt;
  color: white;
  padding-left: 16px;
  text-shadow: 4px 4px black;
}

#subtitle {
  font-size: 24pt;
  color: #f0f0f0;
  padding-left: 46px;
  text-shadow: 3px 3px #111;
}

.navbar {
  font-size: 24pt;
  color: white;
  text-shadow: 3px 3px #111;

  height: 48px;
  text-align: center;
}

/* ==============
   Main container
   ============== */

#main-container {
  width: 640px;
  height: 480px;
  margin: auto;

  /* Container div layout */
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(20, 1fr);
  grid-gap: 16px;
}

#main-container>div {
  background-color: lightgrey;
  outline: 4px outset black;
}

/* --------------------
   Top left: main image
   -------------------- */

#top-left {
  grid-column: span 6;
  grid-row: span 11;

  display: flex;
  justify-content: center;
  align-items: center;
}

#top-left>img {
  width: 85%;
  height: 90%;

  display: block;
  object-fit: contain;
}

/* -----------------------
   Top right: Main content
   ----------------------- */

#top-right {
  grid-column: span 14;
  grid-row: span 14;
}

#top-right>p {
  font-style: normal;
  font-weight: normal;
  text-align: left;
  letter-spacing: 0;
  font-size: 16pt;
  margin: 16px;
}

/* ------------------
   Bottom left: Links
   ------------------ */

#bottom-left {
  grid-column: span 6;
  grid-row: span 9;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

#bottom-left>a {
  width: 90%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 18pt;
  color: black;
  text-align: center;
  word-spacing: -3px;

  /* Override this in the tag */
  background-color: white;

  box-sizing: border-box;
  border: 4px inset black;

  cursor: pointer;
  user-select: none;
}

/* -------------------------------
   Bottom right: Additional images
   ------------------------------- */

#bottom-right {
  grid-column: span 14;
  grid-row: span 6;

  display: flex;
  justify-content: center;
  align-items: center;
}