@font-face {
  font-family: Lavanderia;
  src: url("fonts/Lavanderia Regular.otf");
}

:root {
  --background: #D7C1A2;
  --foreground: #111;
  --link: oklab(from #A28667  calc(l - 0.2) a b);
  --accent: oklab(from #9C6F6A calc(l - 0.2) a b);
  --off: #ddd;
}

/* @media (prefers-color-scheme: dark) { */
/*   :root { */
/*     --background: black; */
/*     --foreground: white; */
/*   } */
/* } */

a {
  color: var(--link)
}

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;
}

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