:root {
  --base-size: 1.2rem; /* The starting size for body text */
  --ratio: 1.5;      /* Each heading is 150% larger than the previous */
  --imsize: 1008px;
  /* Color Palette  */
  --antwarp-blue: lch(from #007190 l c h);
  --benzol-green: lch(from #00978D l c h);
  --cobalt-green: lch(from #96D1AA l c h);
  --pale-lemon-yellow: lch(from #FFEFAE l c h);
  --background: var(--antwarp-blue);
  --background2: var(--benzol-green);
  --text: var(--pale-lemon-yellow);
  --highlight: var(--cobalt-green);
  /* Calculated font sizes */
  --h4: var(--base-size);
  --h3: calc(var(--h4) * var(--ratio));
  --h2: calc(var(--h3) * var(--ratio));
  --h1: calc(var(--h2) * var(--ratio));
}

/* Body */
body {
  background-color: var(--background);
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: var(--base-size);
  font-weight: 400;
  color: var(--text);
}

a {
  text-decoration: none;
  color: var(--highlight);
}

a:hover {
  color: var(--text);
}

h1, h2, h3, h4 {
  font-family: "Roboto Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
  font-weight: 400;
  color: var(--highlight);
}

h1 { font-size: var(--h1); }

h2 { font-size: var(--h2); }

h3 { font-size: var(--h3); }

h4 { font-size: var(--h4); }

table, th, td {
  border: none;
  border-collapse: collapse;
}

table {
  width: 100%;
  max-width: var(--imsize);
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
}

th, td {
  /* Equivalent to cellpadding="10" */
  padding: 0.5em;
  border: none;
  text-align: left;
}

tr:nth-child(odd) {
  background-color: var(--background2);
}

tr:nth-child(even) {
  background-color: var(--highlight);
  color: var(--background);
}

figure {
  margin: 0; /* Removes the default indentation */
  padding: 0; /* Optional: ensures no default padding is left */
  padding-bottom: 16pt;
}

img {
  width: var(--imsize);
  max-width: 100%;
  height: auto;
  display: block; /* Removes unwanted space below the image */
}

figcaption {
  margin-top: 0.5em;
  font-size: 0.8em;
  text-align: center;
  font-style: italic;
}

iframe {
  width: var(--imsize);
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

#banner {
}
/*  object-fit: cover;
  object-position: center;
  aspect-ratio: 3 / 1 ;
}*/

/* The side navigation menu */
.sidebar {
  margin: 0;
  padding: 0;
  width: 240px;
  background-color: var(--background2);
  position: fixed;
  height: 100%;
  overflow: auto;
  font-family: "Roboto Condensed", sans-serif;
  font-size: var(--h3);
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: var(--highlight);
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: var(--background);
  color: var(--text);
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: var(--background);
  color: var(--text);
}

.sidebar img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 0;
  max-width: 240px; /* Limits the width to your desired size */
  width: 100%;      /* Allows it to shrink if container is smaller */
  height: auto;     /* Keeps aspect ratio */
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  max-width: var(--imsize);
  margin-left: 240px;
  padding: 1px 32px;
  padding-bottom: 64px;
  min-height: 1000px;
  background-color: var(--background);
}

.bottom {
  max-width: var(--imsize);
  margin-left: 240px;
  padding: 1px 32px;
  padding-bottom: 64px;
  background-color: var(--background);
  color: var(--highlight);
  text-align:center;
  font-size: 0.8em;
}

/* On screens that are less than 1000px wide, make the sidebar into a topbar */
@media screen and (max-width: 1000px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 600px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}