/*
 * SPDX-FileCopyrightText: Amolith <amolith@secluded.site>
 *
 * SPDX-License-Identifier: BSD-2-Clause
 */

@font-face {
  font-family: "Equity";
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-display: fallback;
  src: url("/static/equity-subset.woff2") format("woff2");
  unicode-range: U+20,U+21,U+24,U+25,U+27-29,U+2B-3B,U+40-45,U+47,U+49,U+4A,U+4C,U+4D,U+4F,U+50,U+52-54,U+56-58,U+61-7A,U+2014,U+21A9;
}
html {
  font-family: "Equity", "system-ui";
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px;
  background: white;
  color: black;
}
header,
section {
  margin: 50px 0;
}
header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
header > div {
  padding-right: 25px;
}
header > div > .subtitle {
  font-style: italic;
}
header > figure {
  text-align: center;
  margin: auto auto;
  max-width: 95%;
}
header > figure > img {
  max-width: 95%;
}
section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section > div {
  width: min(90%, 75rem);
  display: grid;
  gap: 2rem;
  grid-auto-flow: column;
}
section > h2 {
  grid-area: title;
}
main > figure {
  text-align: center;
  margin: auto auto;
  height: 13vh;
  position: relative;
}
main > figure > img {
  position: absolute;
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  max-width: 95%;
}
.contact {
  margin-bottom: 200px;
}
a {
  color: #0E4ECE;
}
a:visited {
  color: #0E4ECE;
}
@media (max-width: 55em) {
  html {
    max-width: 650px;
  }
  section > div {
    width: 100%;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    gap: 0rem;
  }
  header {
    flex-direction: column-reverse;
  }
  header > img {
    width: 250px;
  }
}
@media (prefers-color-scheme: dark) {
  html {
    background: black;
    color: white;
  }
  img {
    filter: invert();
  }
  a {
    color: #6293F7;
  }
  a:visited {
    color: #6293F7;
  }
}