@font-face {
  font-family: 'UnifrakturCook';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/unifrakturcook-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --red: #C8291C;
}

* {
  box-sizing: border-box;
}

*::before, *::after {
  box-sizing: inherit;
}

body {
  background-image: url("../img/bg.jpg");
  background-image: image-set(url("../img/bg.avif") type("image/avif"), url("../img/bg.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4rem 2rem 6rem 2rem;
  min-height: 100vh;
  min-height: 100dvh;
  color: #F6EF22;
  font-family: 'UnifrakturCook', cursive;
  font-size: 130%;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin: auto;
}

img {
  max-width: 100%;
}

h1 {
 color: var(--red);
 margin: 0 0 2rem;
 font-size: 4rem;
 line-height: 0.6;
 text-align: center;
}

#summon {
  background-image: url("../img/button.png");
  background-image: image-set(url("../img/button.avif") type("image/avif"), url("../img/button.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  padding: 1.5rem;
  margin: 0 0 2.5rem 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  transition: transform 200ms ease-out;
}

#summon:active {
  transform: scale(0.9) rotate(-2deg);
}

.demon-part-wrapper {
  width: 100%;
  background-color: var(--red);
  overflow: hidden;
}

.demon-part-wrapper picture {
  display: block;
}

.demon-part-wrapper:first-of-type {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.demon-part-wrapper:last-of-type {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  margin: 0 0 3rem 0;
}

.demon-part {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 695;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.demon-part[src] {
  opacity: 1;
}

a {
  color: inherit;
}

p {
  text-align: center;
  margin: 0 0 2rem 0;
}

.logo {
  width: 120px;
}

.shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-3px, 1px, 0);
  }

  20%, 80% {
    transform: translate3d(2px, -7px, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 2px, 0);
  }

  40%, 60% {
    transform: translate3d(4px, -2px, 0);
  }
}

.noise-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}

.noise {
  position: absolute;
  top: -500px;
  right: -500px;
  bottom: -500px;
  left: -500px;
  background: transparent url("../img/noise.png") 0 0;
  background-image: image-set(url("../img/noise.avif") type("image/avif"), url("../img/noise.png") type("image/png"));
  background-size: 320px 320px;
  opacity: .35;
  animation: noise 1s steps(8, end) infinite both;
}

footer {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
  font-size: 70%;
  opacity: 0.5;
  text-align: center;
}

@keyframes noise {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(-100px, 100px);
  }
  20% {
    transform: translate(150px, -100px);
  }
  30% {
    transform: translate(-100px, 100px);
  }
  40% {
    transform: translate(100px, -150px);
  }
  50% {
    transform: translate(-100px, 200px);
  }
  60% {
    transform: translate(-200px, -100px);
  }
  70% {
    transform: translate(50px, 100px);
  }
  80% {
    transform: translate(100px, -150px);
  }
  90% {
    transform: translate(0px, 200px);
  }
  100% {
    transform: translate(-100px, 100px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}