/** Variables **/

:root {
    /* Sizes */
    --font-size: 14pt;
    --banner-height: 460px;

    /* Colors */
    --link-color: #09f;
    --heading1-color: #94d968d6;;
    --heading2-color: #b1c5a4d6;
}

.green {
  color: var(--heading1-color);
}

/*
 * general policy
 */

body {
  font-family: system-ui, sans-serif;
  font-size: var(--font-size);
}

h1 {
  colour: var(--heading1-color);
}

h2 {
  clear: both;
  color: var(--heading2-color);
  padding-top: 1em;
}

h3 {
  colour: var(--heading1-color);
}

banner img {
  height: var(--banner-height);
  width: 100%;
  object-fit: cover;
}

logo img {
  float: left;
  height: auto;
  width: 120px; /* trial and error */
  object-fit: scale-down;
  z-index: 2; /* on top of banner image */
  position: absolute;
  left: 1%;
  top: 1%;
}

@media only screen and not (orientation: landscape) {
  logo img {
    width: 60px;
    position: absolute;
    left: 6px;
    top: 6px;
  }
}

content {
  margin: 2%;
  display: block;
  line-height: 135%;
}

/* overloaded for large text quotations (blockquote already used for banner image) */
code {
  text-align: center;
  font-style: italic;
  font-size: x-large;
  margin-left: 20%;
  display: block;
  width: 65%;
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "AmstelvarAlpha"; 
  text-wrap: balance;
  line-height: 135%;
}

/*
 * Navigation (menu bar)
 */

navigation > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--heading2-color); /* defined in js.css */
}

navigation > ul > li {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

navigation > ul > li a {
  color: white;
  font-weight: bold;
  
}

navigation > ul > li a:hover {
  background-color: aquamarine;
}

.active {
  background-color: #04AA6D;
}

/* float image and flow text using dl/dt/dd */
/* see https://cloudfour.com/thinks/solved-tricky-floating-image-alignment/ */

.media /* div inserted by [widget.wrap-media] */ {
  display: grid;
}

dl.media_inner {
  display: block; /* original is a div */
} 

dd /* .media__content */ {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

img[src*='#right'] /* .media__object */ {
  float: right;
  padding-left: 12px;
  object-fit: fill;
}

img[src*='#right-190'] /* .media__object */ {
  float: right;
  padding-left: 12px;
  object-fit: fill;
  height: 190px;
}

img[src*='#right-240'] /* .media__object */ {
  float: right;
  padding-left: 12px;
  object-fit: fill;
  height: 240px;
}

img[src*='#left'] {
  float: left;
  padding-right: 1em;
  object-fit: fill;
}

img[src*='#left-140'] {
  float: left;
  padding-right: 1em;
  object-fit: fill;
  height: 140px;
}


/* pandoc wraps images as figures with a margin-left of 40! */
figure {
  margin: 0;
}

figcaption { /* pandoc puts alt text as a figcaption */
  display: none;
}

/* don't show arrows inserted by soupault toc if configured (default) */
a.here {
  display:none;
}

toc {
  display: block;
}