/* Add a footer at the bottom of the content or the bottom of the page. */
html
  {
  height: 100%;
  box-sizing: border-box;
  }

*,
*:before,
*:after
  {
  box-sizing: inherit;
  }

/* Modify core HTML elements. */

/* HTML body. */
body
  {
  /* Make the text a nice dark green. */
  color: #004400;

  /* Use a nice, tight font. */
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5em;

  /* Green background. */
  background-color: rgb(224, 255, 204);
  
  /* Get rid of all body margins. */
  margin: 0;

  /* Make sure the footer appears properly at the bottom of the content
     or the bottom of the page. */
  position: relative;
  margin: 0;
  min-height: 100%;
  padding-bottom: 8rem;
  }

/* Images. */
img
  {
  /* Turn off image borders. */
  border: none;
  }

/* Links. */
a
  {
  /* Make the text a nice sea green. */
  color: #006644;
  
  /* Use a proper pointer. */
  cursor: pointer;
  
  /* Fix Firefox. */
  outline: none !important;
  }

/* Hover links. */
a:hover
  {
  /* Use a brigher green for this one. */
  color: #00aa00;
  }

/* Active links. */
a:active
  {
  /* Make the text a nice dark green. */
  color: #004400;

  /* While the button is pressed, keep the underline and press the link. */
  text-decoration: underline;
  }

/* Header. */
div.header
  {
  /* Make a fixed header across the top. */
  
  /* Fixed height. */
  height: 5em;
  
  /* No margin. */
  margin: 0;
  
  /* Add a rule. */
  border-bottom: 1px solid #ddddaa;
  
  /* Keep at the top of the page. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  
  /* Green background. */
  background-color: rgb(224, 255, 204);

  /* Make sure the header is on top of the content. */
  z-index: 3000;
  }

/* Header table layout. Use a table to keep items from overlapping and
   automatically resize. */
div.header table
  {
  /* Remove borders and stretch across the page. */
  border: 0px;
  width: 100%;
  height: 100%;
  }

/* Header logo. */
div.header .logo
  {
  /* Don't let the logo get too big. */
  height: 4em;
  
  vertical-align: middle;
  margin-left: 0.5em;
  }
  
/* Header title. */
div.header h1
  {
  /* Make the header title dark green and bold. */
  color: #77aa77;
  font-size: 2em;
  font-weight: bold;
  margin: 0;
  }

/* Language switcher. */
div.header .language
  {
  /* Float the language controls at the right of the header. */
  float: right;
  width: 7em;
  font-size: 14px;
  }

/* Language switcher labels. */
div.header .language label
  {
  /* Give the controls a little whitespace. */
  margin-left: 5px;
  }

/* Site content. */
.content
  {
  /* Add some spacing. */
  padding: 10px;
  padding-top: 5em;

  /* Position in the middle. */
  position: relative;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;

  /* Make sure it is underneath the header and footer. */
  z-index: 1000;
  }

.content_backdrop
  {
  /* Use yellow background. */
  background-color: #ffffcc;

  position: absolute;
  width: 100%;
  top: 5em;
  bottom: 9em;

  /* Make sure it is underneath the header and footer. */
  z-index: 900;
  }
  
/* Content headers. */
.content h1
  {
  /* Give multi-line headers more room. */
  line-height: 1em;
  }

/* Content title. */
.content h1.title
  {
  /* Hide by default on desktop. */
  display: none;
  }

/* Footer menu and backdrop. */
#footer_backdrop,
#footer
  {
  /* Stretch the footer across the bottom of the screen. */
  margin: 0;

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;

  /* Use a fixed height. */
  height: 10em;

  /* Make the text easy to see. */
  font-size: .9em;
  line-height: 1.2em;

  /* Make sure the footer is on top of the content. */
  z-index: 3000;

  /* Add a border and transparent green background colour. */
  border-top: 1px solid #ddddaa;

  /* Green background. */
  background-color: rgb(224, 255, 204);
  }

/* Menu. */
#menu
  {
  /* Put the address in the lower left corner. */
  position: absolute;
  left: 15px;
  top: 10px;
  margin: 0;
  text-align: left;
  }

#menu a
  {
  margin-right: 10px;
  font-weight: bold;
  }

/* Address. */
#address
  {
  /* Put the address in the lower left corner. */
  position: absolute;
  left: 15px;
  bottom: 0px;
  margin: 0;
  text-align: left;
  }

/* Legal stuff. */
#legal
  {
  /* Put the legal stuff in the lower right corner. */
  position: absolute;
  right: 10px;
  bottom: 0px;
  margin: 0;
  text-align: right;
  }

/* Wrap these nicely. */
#legal span
  {
  margin-left: .5em;
  }

/* Social media. */
.social-media-list
  {
  /* Put the social media list in the upper right corner. */
  position: absolute;
  right: 0;
  top: 10px;
  width: 100px;
  margin: 0;
  margin-right: 10px;
  text-align: right;
  }

/* Social media items. */
.social-media-list li
  {
  /* Display horizontally. */
  display: inline-block;
  
  /* Remove the disc. */
  list-style-type: none;
  }

/* Social media svg images. */
.social-media-list .icon > svg
  {
  /* Use inline-blocks, rather small, and centered. */
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  }

/* Social media svg image fills. */
.social-media-list .icon > svg path
  {
  /* Use the standard grey. */
  fill: #828282;
  }

@media (prefers-color-scheme: dark)
  {
  /* HTML body. */
  body
    {
    /* Make the text a nice pale yellow. */
    color: #ffffcc;

    /* Green background. */
    background-color: rgba(13, 28, 13);
    }

  /* Links. */
  a
    {
    /* Make the text a nice sea green. */
    color: #66bb88;
    }

  /* Hover links. */
  a:hover
    {
    /* Use a brigher green for this one. */
    color: #00aa00;
    }

  /* Active links. */
  a:active
    {
    /* Make the text a nice pale yellow. */
    color: #00ff00;
    }

  /* Header. */
  div.header
    {
    /* Add a rule. */
    border-bottom: 1px solid #ddddaa;
    
    /* Green background. */
    background-color: rgba(13, 28, 13);
    }

  .content_backdrop
    {
    /* Use green background. */
    background-color: rgb(4, 33, 3);
    }
  
  /* Footer. */
  #footer
    {
    /* Add a border and transparent green background colour. */
    border-top: 1px solid #ddddaa;

    /* Green background. */
    background-color: rgba(13, 28, 13);
    }
  }