@font-face {
  font-family: Lexend;
  src: url(Lexend-VariableFont_wght.ttf);
}
* {
  margin: 0;
  padding: 0;
  font-family: Lexend, sans-serif;
  font-weight: bold;
  letter-spacing: 4px;
}

html {
  background-color: rgb(0, 0, 0);
  overflow: hidden;
}
html body {
  color: white;
  width: 100dvw;
  height: 100dvh;
}
html body main {
  height: 100%;
  width: 100%;
}
html body main .center {
  height: 100%;
  display: grid;
}
html body main .center .heading {
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}
html body main .center .logo {
  width: 50dvw;
  filter: invert(1);
}
html body main .center .text {
  font-size: 6.5dvw;
}
html body main .center .text .emoji {
  overflow: visible;
  display: inline-block;
  width: 17dvw;
}
html body main .center .teaser {
  margin-top: 2dvw;
  text-align: center;
  font-size: 1.5dvw;
  filter: drop-shadow(2px 3px 3px rgba(255, 255, 255, 0.5));
  line-height: 3dvw;
}
html body main .center .teaser span {
  display: inline-block;
}
html body main .center .teaser .side {
  transform: rotate(45deg);
}
html body main .center .teaser .stretch {
  transform: rotate(180deg) scale(1.2);
  left: 10px;
  top: 5px;
  position: relative;
  transform-origin: 25% 50%;
}
html body main .center .teaser .spin {
  transform: translateY(0.3em);
  font-size: 1.6dvw;
}
html body main .center .teaser .exclamation {
  position: relative;
  font-size: 2dvw;
}
html body main .center .teaser .exclamation > span {
  position: absolute;
  top: -2dvw;
  transform-origin: bottom center;
}
html body main .center .teaser .exclamation :nth-child(0) {
  transform: rotate(0deg);
  filter: opacity(100%);
}
html body main .center .teaser .exclamation :nth-child(1) {
  transform: rotate(15deg);
  filter: opacity(85%);
}
html body main .center .teaser .exclamation :nth-child(2) {
  transform: rotate(30deg);
  filter: opacity(70%);
}
html body main .center .teaser .exclamation :nth-child(3) {
  transform: rotate(45deg);
  filter: opacity(55%);
}
html body main .center .teaser .exclamation :nth-child(4) {
  transform: rotate(60deg);
  filter: opacity(40%);
}
html body main .center .teaser .exclamation :nth-child(5) {
  transform: rotate(75deg);
  filter: opacity(25%);
}
html body main .center .teaser .exclamation :nth-child(6) {
  transform: rotate(90deg);
  filter: opacity(10%);
}
html body main .corner {
  position: absolute;
  width: 5dvw;
  height: auto;
  pointer-events: none;
  filter: invert(1) drop-shadow(5px 5px 4px rgba(255, 255, 255, 0.5));
}
html body main .corner.top-left {
  top: 1dvw;
  left: 1dvw;
}
html body main .corner.bottom-right {
  bottom: 1dvw;
  right: 1dvw;
  transform: rotateZ(180deg);
}
html body main .background {
  position: absolute;
  z-index: -1;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
}
html body main .background .background-image {
  box-shadow: 0 0 5px 10px #555;
  height: 200%;
  width: 300%;
  position: absolute;
  left: -25%;
  top: -25%;
  background-image: url("plus.svg");
  background-size: 1vw;
  background-repeat: repeat;
  filter: opacity(0.2) blur(1px);
}

@media only screen and (max-width: 600px) {
  html body main .corner {
    width: 15dvw;
  }
  html body main .corner.top-left {
    top: 3dvw;
    left: 3dvw;
  }
  html body main .corner.bottom-right {
    bottom: 3dvw;
    right: 3dvw;
  }
  html body main .background .background-image {
    background-size: 5vw;
    animation-duration: 10s;
  }
  html body main .center .teaser {
    margin-top: 4dvw;
    font-size: 5dvw;
    line-height: 7dvw;
    letter-spacing: 3px;
  }
  html body main .center .teaser .spin {
    font-size: 7dvw;
  }
  html body main .center .teaser .stretch {
    left: 5px;
  }
  html body main .center .teaser .exclamation {
    font-size: 7.25dvw;
    top: -4dvw;
  }
}

/*# sourceMappingURL=style.css.map */