@font-face {
  font-family: "Domine";
  src: url("/assets/Domine-VariableFont_wght.ttf");
  font-display: block;
}

:root {
  font-size: 1em;
  line-height: 1.5;
  font-family: "Domine", serif;
  --trapezoid-r: polygon(0 0, 2rem 100%, 100% 100%, calc(100% - 2rem) 0);
  --trapezoid-l: polygon(2rem 0, 0 100%, calc(100% - 2rem) 100%, 100% 0);
  --clipped-edge-r: polygon(0 0, 0 100%, calc(100% - 2rem) 100%, 100% 0);
  --clipped-corner-br: polygon(0 0, 0 100%, calc(100% - 3rem) 100%, 100% calc(100% - 3rem), 100% 0);
}

.container {
  --bg1: #000f14;
  --bg2: #0a191e;
  --fg1: #f6f7fa;
  --fg2: #a0a0b4;
  --accent1: #844454;
  --accent2: #468264;
  --accent3: #326482;
  background-color: var(--bg2);
  color: var(--fg2);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  align-self: center;
}

main {
  flex-grow: 1;
}

header,
main {
  max-width: 1024px;
}

footer {
  margin-top: 2em;
  width: 100%;
  padding: 1em;
  background-color: var(--bg1);
  display: flex;
  align-items: center;
  justify-content: center;
}

footer p {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 1024px;
}

footer .social {
  margin-left: 2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  opacity: 0.8;
}

footer .social + .social {
  margin-left: 1em;
}

footer .social:hover {
  opacity: 1;
}

@media (max-width: 1040px) {
  main {
    padding: 0 1em;
  }
}