@font-face {
  font-family:"actor";
  src:url("/assets/fonts/Actor-Regular.ttf")
}

@font-face {
  font-family:"amaranth";
  src:url("/assets/fonts/Amaranth-Regular.ttf")
}

@media (prefers-color-scheme: light) {
  body { color: #141f28; background: #eff2f4; }
}
@media (prefers-color-scheme: dark) {
  body { color: #eff2f4; background: #141f28; }
  img[src*=svg] { filter: invert(90%) grayscale(30%); }
}

* { margin: 0; padding: 0; }
a { text-decoration: none; color: #bb2222; }
a:hover { color: #dd1144; }
body {
  font-family: "actor", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 960px;margin-left: auto;margin-right: auto;
}

#gallery { margin: 8px; }

header { margin: 4em auto 0 auto; text-align: center; font-family: "amaranth"; }
header img.avatar { width: 96px; border-radius: 50%; }
header .title { font-size: 1.6em; font-weight: bold; line-height: 1.6em; }
header .description { line-height: 1.6em; }
header nav { margin: 1em 0; }
header nav a { margin: 0 0.6em; }
header nav img { height: 24px; }

.section { margin-top: 3em; }
.section-header-wrapper { max-width: 800px; margin-left: 2em; }
.section-title { font-family: "amaranth"; font-size: 1.6em; font-weight: medium; line-height: 1.6em; }
.section-description { line-height: 1.4em; }
.section-images { margin-top: 2em; }

/* This is requried for Grid */
.section-image img { width: 100%; }

.pswp__img { border: 50px solid #fff; }
@media only screen and (max-width: 600px) { .pswp__img { border: 25px solid #fff; } }
.pswp-caption-content-exif { color: fff; line-height:1.4em; }
.pswp-caption-content-copyright { color:fff; font-size:0.9em; }

footer { margin: 4em auto 4em; text-align: center; line-height: 1.6em; }
footer p { font-size: 0.9em; }
footer .foto_footer { font-size: 0.8em; }