@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1em, 0);
    -moz-transform: translate3d(0, 1em, 0);
    -ms-transform: translate3d(0, 1em, 0);
    -o-transform: translate3d(0, 1em, 0);
    transform: translate3d(0, 1em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1em, 0);
    -moz-transform: translate3d(0, 1em, 0);
    -ms-transform: translate3d(0, 1em, 0);
    -o-transform: translate3d(0, 1em, 0);
    transform: translate3d(0, 1em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-ms-keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1em, 0);
    -moz-transform: translate3d(0, 1em, 0);
    -ms-transform: translate3d(0, 1em, 0);
    -o-transform: translate3d(0, 1em, 0);
    transform: translate3d(0, 1em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1em, 0);
    -moz-transform: translate3d(0, 1em, 0);
    -ms-transform: translate3d(0, 1em, 0);
    -o-transform: translate3d(0, 1em, 0);
    transform: translate3d(0, 1em, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@-ms-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: black;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

html body {
  animation-delay: 0.1s;
  background-color: #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Libre Baskerville", Times New Roman, serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  line-height: 1.6em;
  font-weight: 300;
  font-size: 16px;
  color: #eee;
  animation: fadeIn 0.5s ease-in;
}
@media only screen and (min-width: 480px) {
  html body {
    font-size: clamp(18px, 1.8vw, 22px);
  }
}

@-moz-document url-prefix() {
  html body {
    font-weight: 200 !important;
  }
}
@font-face {
  font-family: "Deutsch Gotisch Heavy";
  src: url("../fonts/deutsch-gotisch-heavy-webfont.woff2") format("woff2"), url("../fonts/deutsch-gotisch-heavy-webfont.woff") format("woff"), url("../fonts/deutsch-gotisch-heavy-webfont.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../fonts/librebaskerville-regular.woff2") format("woff2"), url("../fonts/librebaskerville-regular.woff") format("woff"), url("../fonts/librebaskerville-regular.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Libre Baskerville Bold";
  src: url("../fonts/librebaskerville-bold.woff2") format("woff2"), url("../fonts/librebaskerville-bold.woff") format("woff"), url("../fonts/librebaskerville-bold.ttf") format("ttf");
  font-weight: bold;
  font-style: normal;
}
.bg-lqip {
  background-size: cover;
  background-position: center;
  transition: filter 400ms ease, opacity 300ms ease;
  filter: blur(12px);
}

.bg-lqip.bg-lqip--loaded {
  filter: blur(0);
}

header {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  header {
    justify-content: center;
    align-items: flex-end;
  }
}
header .background {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 90% auto;
  background-position: top left;
  background-repeat: no-repeat;
  background-color: #000;
  filter: blur(12px);
  transition: filter 400ms ease, opacity 300ms ease;
  background-image: url("../img/background-header-thumb.jpg");
}
.no-js header .background {
  background-image: url("../img/background-header.jpg");
}
@media only screen and (min-width: 768px) {
  header .background {
    background-size: contain;
    background-position: center left;
    top: 10%;
    right: 50%;
  }
}
header .background.bg-lqip--loaded {
  filter: blur(0);
}
header .lines {
  animation: fadeIn 0.25s cubic-bezier(1, 0.07, 0.58, 1) both;
}
header .line-1 {
  animation-delay: 0.3s;
}
header .line-2 {
  animation-delay: 0.4s;
}
header .line-3 {
  animation-delay: 0.5s;
}
header .line-4 {
  animation-delay: 0.6s;
}
header .line-5 {
  animation-delay: 0.7s;
}
header .text, header .socials {
  z-index: 1;
  position: relative;
}
header .text {
  padding: 0 10vw;
}
header h1, header p {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  header h1, header p {
    text-align: right;
  }
}
header h1 {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.35em;
  font-family: "Deutsch Gotisch Heavy", "Libre Baskerville", Times New Roman, serif;
  font-weight: normal;
  line-height: 1em;
  font-size: clamp(60px, 15vw, 100px);
  color: #eee;
  -webkit-text-stroke: 10px black;
  paint-order: stroke fill;
}
@media only screen and (min-width: 768px) {
  header h1 {
    line-height: 1em;
    font-size: clamp(90px, 8vw, 150px);
  }
}
header h1 span {
  display: block;
}
header p {
  -webkit-text-stroke: 4px black;
  paint-order: stroke fill;
}
header .socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2vh 0 6vh;
  min-height: 5vh;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  header .socials {
    align-items: flex-end;
    margin: 6vh 0;
    padding: 0 10vw 0 0;
  }
}
header .socials-text {
  width: auto;
  flex-grow: 1;
}
header .socials-icons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  header .socials-icons {
    margin-right: -1vw;
    padding: 0;
    gap: 25px;
    justify-content: end;
  }
}
header .socials-icons a svg path {
  transition: all 0.15s ease-in-out;
  fill: rgb(234.1818181818, 3.8181818182, 10.1818181818);
}
@media only screen and (min-width: 640px) {
  header .socials-icons a svg path {
    fill: #fff;
  }
}
header .socials-icons a:hover svg path {
  fill: #fff;
}
@media only screen and (min-width: 640px) {
  header .socials-icons a:hover svg path {
    fill: rgb(234.1818181818, 3.8181818182, 10.1818181818);
  }
}
header .socials-bluesky, header .socials-tiktok, header .socials-insta, header .socials-youtube, header .socials-threads, header .socials-facebook {
  height: clamp(48px, 8vw, 8vw);
}
@media only screen and (min-width: 768px) {
  header .socials-bluesky, header .socials-tiktok, header .socials-insta, header .socials-youtube, header .socials-threads, header .socials-facebook {
    height: 52px;
  }
}

section.content {
  max-width: 45em;
  margin: 10em auto;
  padding: 0 2.5em;
}

img {
  display: block;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
}

::-moz-selection,
::-webkit-selection,
::selection {
  color: #eee;
  background-color: #b80308;
}