:root {
  --color-bg-light:     white;
  --color-bg-dark:      #111111;
  --color-text-light:   black;
  --color-text-dark:    white;
  --color-border-light-1: darkseagreen;
  --color-border-light-2: seagreen;
  --color-border-dark-1:  hsl(251deg 57% 55%);
  --color-border-dark-2:  hsl(326deg 92% 46%);
  --border-gradient-light: linear-gradient(120deg, hsl(71deg 57% 55%) 0%, hsl(100deg 37% 63%) 39%, hsl(129deg 26% 56%) 61%, hsl(146deg 50% 36%) 100%);  
  --border-gradient-dark: linear-gradient(120deg, hsl(251deg 57% 55%) 0%, hsl(280deg 37% 63%) 39%, hsl(309deg 42% 63%) 61%, hsl(326deg 92% 46%) 100%);
  
  /*fallback*/
  --bg-color: var(--color-bg-light);
  --text-color: var(--color-text-light);
  --accent-color: darkseagreen;
  --border-color: var(--color-border-1);
  --border-width: 2px;
  --border-gradient: var(--border-gradient-light);
  --color-border-1:   var(--color-border-light-1);
  --color-border-2:   var(--color-border-light-2);
  --margin: 2em;
  --padding: 2em;
}

@font-face {
  font-family: 'EB Garamond';
  src: url(../../fonts/EBGaramond-Regular.ttf), url(../../fonts/EBGaramond-Regular.otf), url(../../fonts/EBGaramond-Regular.woff), url(../../fonts/EBGaramond-Regular.woff2);
}
@font-face {
  font-family: 'EB Garamond';
  src: url(../../fonts/EBGaramond-Italic.ttf), url(../../fonts/EBGaramond-Italic.otf), url(../../fonts/EBGaramond-Italic.woff), url(../../fonts/EBGaramond-Italic.woff2);
  font-style: italic;
}
@font-face {
  font-family: 'EB Garamond';
  src: url(../../fonts/EBGaramond-Bold.ttf), url(../../fonts/EBGaramond-Bold.otf), url(../../fonts/EBGaramond-Bold.woff), url(../../fonts/EBGaramond-Bold.woff2);
  font-weight: bold;
}
@font-face {
  font-family: 'EB Garamond';
  src: url(../../fonts/EBGaramond-BoldItalic.ttf), url(../../fonts/EBGaramond-BoldItalic.otf), url(../../fonts/EBGaramond-BoldItalic.woff), url(../../fonts/EBGaramond-BoldItalic.woff2);
  font-weight: bold;
  font-style: italic;
}

body {
  margin:   0;
  padding:  0;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 21px;
  text-rendering: optimizelegibility;
  font-family: 'EB Garamond', serif;
}

a {
  color: var(--color-border-2);
  text-underline-offset: .1em;
}
a:hover {
  color: var(--color-border-1);
}
.footnote-ref, .footnote-back {
    text-decoration: none;
}
h1 {
  color: var(--border-color);
  background-image: var(--border-gradient);
  background-clip: text;
  color: transparent;
  text-align: left;
}
h1, h2, h3, h4 {
  text-align: center;
}

h1 {
  font-size: 42px;
}

h2 {
  font-size: 42px;
  font-weight: normal;
}

h3 {
  font-weight: normal;
  font-style: italic;
  font-size: inherit;
}

h4 {
  font-weight: normal;
  font-size: inherit;
}

p, blockquote {
  text-align: justify;
}
figure {
  margin: 0 0 1em 0;
}
figcaption {
  font-style: italic;
  text-align: center;
}
img {
  width: 100%;
}
#index {
  list-style: none;
}

.container {
  width: 800px;
  margin: var(--margin) auto;
}

@media (prefers-color-scheme: dark) {
  :root {
      --bg-color: var(--color-bg-dark);
    --text-color: var(--color-text-dark);
    --accent-color: cornflowerblue;
    --color-border-1: var(--color-border-dark-1);
    --color-border-2: var(--color-border-dark-2);
    --border-color: var(--color-border-2);
    --border-gradient: var(--border-gradient-dark);
  }
}

@media (max-width: 800px) { 
  body {
    font-size: 1em;
  }
  .container {
    width: 100%;
    margin: 0;
  }
  .box {
    border-left: none;
    border-right: none;
    border-top: none;
    padding: calc(var(--padding)/2);
  }
  h1 {
    font-size: 1.2em;
    max-width: 100%;
    word-wrap:break-word;
    hyphens: auto;
  }
}