html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  height: 100%;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

body {
  background: url(images/trindemossen-1000.jpg) center center fixed;
}

.titlepage {
  min-height: 100vh;
  color: black;
}

.titlebox, .titlebox_subtitle {
  font-family: 'Lora', serif;
}

.titlebox {
  position: relative;
  padding: 3vw;
  padding-top: 0pt;
  padding-bottom: 0pt;
  text-align: center;
  background: rgba(255, 255, 255, 1.0);
  border-radius: 6vw;
  font-size: 30vw;
  display: inline-block;
}

.titlebox_subtitle {
  position: relative;
  font-size: 5vw;
  top: -5vw;
}

.titlebox_padding { min-height: 20vh; }
.titlebox_container { min-height: 35vh; }
.newsbox_container { min-height: 12vh; margin-top: 5vh; }

.newsbox, .blackbox {
  font-size: 2.5vh;
  font-family: Arial, Helvetica, sans-serif;
}

.newsbox {
  position: relative;
  padding: 1vh;
  padding-left: 3vh;
  padding-right: 3vh;
  text-align: center;
  background: rgba(255, 255, 255, 1.0);
  border-radius: 1vw;
  display: inline-block;
  color: black;
}

.linkbox {
  display: inline-block;
}

.blackbox {
  margin: 1vh;
  padding: 2vh;
  padding-left: 3.5vh;
  padding-right: 3.5vh;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 2vh;
  color: white;
  display: inline-block;
}

.toprightcorner {
  position: fixed;
  top:0px;
  right:0px;
}

/* Compact header for sub-pages (echoes the .titlebox/.blackbox vocabulary) */
.subheader {
  text-align: center;
  padding: 12pt 10pt;
}

.subheader_home {
  font-family: 'Lora', serif;
  font-size: 24pt;
  font-weight: bold;
  background: rgba(255, 255, 255, 1.0);
  color: black;
  border-radius: 10pt;
  padding: 4pt 14pt;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}

.subnav {
  display: inline-block;
  vertical-align: middle;
}

.subnav a {
  display: inline-block;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 1.5vh;
  padding: 6pt 12pt;
  margin: 4pt;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

.subnav a.current {
  background: rgba(230, 0, 0, 0.85);
}

.page {
  padding-bottom: 35pt;
  text-align: center;
}

.textbox, .footer {
  text-align: left;
  margin: 10pt;
  margin-bottom: 20pt;
  padding: 8pt;
  padding-left: 5vw;
  padding-right: 5vw;
  padding-bottom: 30pt;
  border-radius: 14pt;
  display: inline-block;
  font-size: 13pt;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  background-color: rgb(255, 255, 255);
  max-width: 85vw;
}

.footer {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2vh;
  padding-left: 60pt;
  padding-right: 40pt;
  text-align: left;
  color: white;
}

h1 {
  position: relative;
  font-size: 32pt;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0pt;
  margin: 0pt;
  margin-top: 15pt;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(230, 0, 0, 1.0);
  font-size: 16pt;
}

a {
  color: rgba(70, 110, 200, 1.0);
}

.logo {
  margin: 15pt;
}

img#ongithub { opacity: 0.6; }

img.logo { float: right; margin-left: 12pt; margin-bottom: 12pt; }

figure.floating-right {
    float: right;
    width: 50%;
    max-width: 300px;
    margin-left: 15pt;
    text-align: center;
}

figure.floating-right img {
    width: 100%;
    height: auto;
}

figcaption {
    font-size: 15px;
    color: #555;
    margin-top: 5px;
}

/* Small screens */
@media screen and (max-width: 965px) {
    figure.floating-right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
}

div.center { text-align: center; }

pre, code {
  color: white;
  border-radius: 3pt;
  background-color: rgb(100,100,100);
  font-size: 11pt;
}

pre {
  padding: 4pt;
  padding-left: 1vw;
  overflow-x: scroll;
}

code {
  padding-left: 4pt;
  padding-right: 4pt;
}

h1, h2 {
  font-family: 'Bree Serif', serif;
}

li {
  padding-bottom: 6pt;
}

.tt { font-family: monospace; }

.wrapper { min-height: 100%; }

.local-footnote-link {
    font-size: 0.8em;
    vertical-align: super;
    text-decoration: none;
}

.local-footnotes {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    font-size: 0.9em;
    color: #555;
}

.footnotelink {
  color: white;
}

/* Footer sits on dark grey; keep its links legible (white, not blue). */
.footer a {
  color: white;
}

.mobile_version { visibility: visible; color: white; }
.desktop_version { visibility: hidden; color: white; }

@media screen and (min-width: 600px) {
  /* the follow applies for desktops */
  body {
    background: url(images/trindemossen.jpg) no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  }
  .titlebox {
    border-radius: 4vw;
    font-size: 15vw;
  }
  .titlebox_subtitle {
    position: relative;
    font-size: 2.5vw;
    top: -2.5vw;
  }
  .textbox, .footer {
    margin-left: 0pt;
    margin-right: 0pt;
    width:60%;
    min-width: 400px;
    padding-left: 45pt;
    padding-right: 45pt;
  }
  .titlebox_container { min-height: 48vh; }
  .mobile_version { visibility: hidden; }
  .desktop_version { visibility: visible; }
}

@media screen and (max-height: 1000px) and (max-width: 1500px) {
  body { background-image: url(images/trindemossen-1000.jpg);
         background-repeat: repeat;
         background-position: top;
         background-attachment: fixed; }
}

@media screen and (max-height: 700px) and (max-width: 1000px) {
  body { background-image: url(images/trindemossen-700.jpg);
         background-repeat: repeat;
         background-position: top;
         background-attachment: fixed; }
}

@media screen and (max-height: 600px) and (max-width: 910px) {
  body { background-image: url(images/trindemossen-600.jpg);
         background-repeat: repeat;
         background-position: top;
         background-attachment: fixed; }
}

@media screen and (max-height: 500px) and (max-width: 760px) {
  body { background-image: url(images/trindemossen-500.jpg);
         background-repeat: repeat;
         background-position: top;
         background-attachment: fixed; }
}

@media screen and (max-height: 400px) and (max-width: 600px) {
  body { background-image: url(images/trindemossen-400.jpg);
         background-repeat: repeat;
         background-position: top;
         background-attachment: fixed; }
}

/* Dark mode: honour the OS preference.  The lake photo stays but is
   dimmed by a fixed overlay, and the white panels become dark with light
   text.  The already-dark elements (.blackbox, .subnav, .footer) are
   left as-is. */
@media (prefers-color-scheme: dark) {
  html, body { color-scheme: dark; }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: -1;
    pointer-events: none;
  }

  .titlebox,
  .newsbox,
  .subheader_home {
    background: rgba(20, 20, 20, 0.92);
    color: #f0f0f0;
  }

  .textbox {
    background-color: rgba(28, 28, 28, 0.95);
    color: #e6e6e6;
  }

  a { color: #6fa8ff; }
  h2 { color: #ff6b6b; }
  figcaption { color: #aaa; }
  .local-footnotes { color: #aaa; border-top-color: #444; }
}