@charset "UTF-8";
@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-SemiboldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic; }

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: "Libertinus Serif";
  src: url("../fonts/LibertinusSerif-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Hair.woff2") format("woff2");
  font-weight: 100;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-HairItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-ExtraLightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-BoldItalic.woff2") format("woff2");
  font-weight: 700 bold;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-ExtraBoldItalic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-Heavy.woff2") format("woff2");
  font-weight: 900;
  font-style: normal; }

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/FiraSans-HeavyItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic; }

html, body {
  font-family: "Fira Sans";
  padding: 0;
  margin: 0;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: discretionary-ligatures; }

.language-select {
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-size: 0.7em;
  position: absolute;
  top: 0;
  right: 0;
  margin: 1em;
  color: white; }

footer {
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-size: 0.7em;
  padding: 1em; }

a, a:link, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: inherit; }

a:hover {
  -webkit-text-stroke-width: 0.5px; }

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto; }

header {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-left: 10%;
  padding-right: 10%;
  color: white;
  background: top left / cover no-repeat black; }
  @media (min-width: 80em) {
    header {
      padding-left: 20%;
      padding-right: 20%; } }
nav {
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-size: 0.7em;
  width: 100%;
  padding: 1em 0 1em 0;
  display: inline-grid;
  grid-template-columns: auto; }
  @media (min-width: 16em) {
    nav {
      grid-template-columns: repeat(2, auto); } }
  @media (min-width: 32em) {
    nav {
      grid-template-columns: repeat(4, auto); } }
  @media (min-width: 48em) {
    nav {
      display: flex;
      justify-content: space-between; } }
nav > * {
  padding: 0.2em; }

main {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-left: 10%;
  padding-right: 10%;
  font-family: "Libertinus Serif", serif;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-feature-settings: "liga";
  font-variant-ligatures: discretionary-ligatures;
  font-kerning: normal;
  padding-top: 3em;
  background: white;
  color: #323232;
  text-align: justify;
  hyphens: auto; }
  @media (min-width: 80em) {
    main {
      padding-left: 20%;
      padding-right: 20%; } }
  main a {
    font-style: italic; }
  main p:first-child:first-letter {
    font-size: 3.4em;
    line-height: 0.65em;
    float: left;
    padding: 0.08em 0.05em 0 0; }

footer {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 5em;
  padding-bottom: 5em;
  text-align: right; }
  @media (min-width: 80em) {
    footer {
      padding-left: 20%;
      padding-right: 20%; } }
.gallery {
  margin-top: 1.5em;
  margin-bottom: 3em;
  transition: 0.5s; }

.gallery > * {
  background: #eee;
  transition: 0.5s;
  opacity: 0;
  width: 1px;
  height: 1px; }

.gallery-zoomed::before {
  content: "«";
  position: absolute;
  left: -0.7em;
  top: 50%;
  line-height: 0;
  font-size: 2em; }

.gallery-zoomed::after {
  content: "»";
  position: absolute;
  right: -0.7em;
  top: 50%;
  line-height: 0;
  font-size: 2em; }