body {
  padding: 15px 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  line-height: 1.6em;
}

img {
  width: 100%;
}

#navigation h1.nav-header {
  padding: 0 0px;
  margin-bottom: 0;
}

#navigation a.nav-header {
  padding: 5px 15px;
  font-weight: bold;
}

#navigation ul.uk-nav {
  padding: 15px 0;
}

#navigation p {
  padding-bottom: 10px;
}

#navigation li.language-select select {
  float: right;
}

#content h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
}

#content img.header {
  margin-bottom: 20px;
}

#content ul {
  list-style-type: square;
}

#content li.done {
  color: #008000;
  text-decoration: line-through;
}

#content div.images div {
  padding-bottom: 25px;
}

#content p.images-text {
  margin-top: -15px;
}

#content .iframe-container {
  position: relative;
  /* Magic! Makes sure the container is high enough to show the entire iframe 
	 * Thanks to http://andmag.se/2011/11/responsive-embeds/ */
  padding-bottom: 56.5%;
}

#content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  h2 {
    margin-top: 25px;
  }
}

:root {
  --main-darkest: #000000;
  --main-dark: #fcd600;
  --main-darker: #999999;
  --main-medium: #cfcfcf;
  --main-light: #ebebeb;
  --main-lightest: white;

  --aphotic-darkest: #200096;
  --aphotic-dark: #d30046;
  --aphotic-darker: #84b9ff;
  --aphotic-medium: #c8e6ff;
  --aphotic-light: #f6ebff;
  --aphotic-lightest: white;

  --mosaic-darkest: #0e381c;
  --mosaic-dark: #079913;
  --mosaic-darker: #b8fdcf;
  --mosaic-medium: #d1ffc8;
  --mosaic-light: #f9ffeb;
  --mosaic-lightest: white;
}

body {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  line-height: 1.6em;
  list-style: none;
  background-color: black;
  /* box-shadow: inset 0 0 20vw 10vw white; */
}

.uk-grid {
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.header {
  margin-bottom: 2vh;
}

#content h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
}

h2,
.uk-h2 {
  font-size: 24px;
  line-height: 30px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 15px 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #444;
  text-transform: none;
}

/* links */
#content a:not(.no_border),
.nav-header a {
  color: var(--main-darkest);
  text-decoration: none;
  /* border: 1px var(--main-medium) solid; */
  border-radius: 2px;
  padding: 1px 4px;
  background-color: var(--main-light);
  transition: background-color 60ms ease-in-out, color 60ms ease-in-out;
  /* transition: border 60ms ease-in-out, color 60ms ease-in-out; */
}

#content a:visited:not(.no_border),
.nav-header a:visited {
  color: var(--main-darkest);
}

#content a:hover:not(.no_border),
.nav-header a:hover {
  color: var(--main-lightest);
  text-decoration: none;
  background-color: var(--main-darkest);
  /* border: 1px white solid; */
}

/* APHOTIC */
#aphotic #content a:not(.no_border),
#aphotic .nav-header a {
  color: var(--aphotic-darkest);
  background-color: var(--aphotic-light);
}
#aphotic #content a:visited:not(.no_border),
#aphotic .nav-header a:visited {
  color: var(--aphotic-darkest);
}
#aphotic #content a:hover:not(.no_border),
#aphotic .nav-header a:hover {
  color: white;
  background-color: var(--aphotic-dark);
}

/* MOSAIC */
#mosaic #content a:not(.no_border),
#mosaic .nav-header a {
  color: var(--mosaic-darkest);
  background-color: var(--mosaic-light);
}
#mosaic #content a:visited:not(.no_border),
#mosaic .nav-header a:visited {
  color: var(--mosaic-darkest);
}
#mosaic #content a:hover:not(.no_border),
#mosaic .nav-header a:hover {
  color: white;
  background-color: var(--mosaic-dark);
}


img {
  margin-bottom: 10px;
  border-radius: 6px;
}