@font-face {
  font-family: Dyslexic;
  src: url(../assets/OpenDyslexic-Regular.otf);
}

html {
  --foreground: #1a052e;
  --background: #f0d8bc;
  --warn: #8a0045;
  --info: #004761;
  --base03: #945f65;
  --off: #351539;
  --accent: #000;
  text-align: justify;

  @media (prefers-color-scheme: dark) {
    --background: #1a052e;
    --warn: #ff6fb7;
    --info: #00bcff;
    --base01: #351539;
    --base02: #4e2444;
    --base03: #945f65;
    --off: #dfbea6;
    --accent: #fff2d4;
    --foreground: #f0d8bc;
  }
}

body {
  font-size: 2em;
  color: var(--foreground);
  background-color: var(--background);
}

main {
  max-width: max(66rem, 80vw);
  margin: 1em auto;
}

.image-list {
  display: flex;
  width: 100vw;
  flex-wrap: wrap;
  justify-content: space-around;
}
figure {
  width: min-content;
  float: right;
}
figure:nth-of-type(2n + 1) {
  float: left;
}
figure img {
  max-height: 7em;
  max-width: 10em;
}
figure figcaption {
  text-align: center;
}

h2.title {
  text-align: center;
}

.title {
  color: var(--accent);
  font-family: Lavanderia;
  font-weight: bold;
  font-size: bigger;
}

.description {
  color: var(--accent);
  font-size: smaller;
}

.infobox {
  float: right;
  width: 3em;
  background-color: var(-off);
}

summary {
  font-size: 1.17em; /* Default font size for h3 */
  font-weight: bolder;
}

summary.doi {
  font-size: 1em;
  font-weight: normal;
}

/* Animate Details and Summary */
details.section {
  interpolate-size: allow-keywords;
}
details.section::details-content {
  height: 0;
}
details.section[open]::details-content {
  transition: height ease 900ms;
  overflow: hidden;
  height: auto;
}

caption {
  font-size: smaller;
  border-top: 1px solid;
  background-color: var(--off);
  caption-side: bottom;
}

img.hero {
    display: block;
    width: 95vw;
    margin: auto auto;
}

.date {
    display: inline;
    font-size: small;
}

navbar {
    font-size: smaller;

    ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}