:root {
  --ink: #14080b;
  --paper: #f4ebe3;
  --wine: #6b1028;
  --burgundy: #4a0b18;
  --oxblood: #3a0710;
  --crimson: #c81e3a;
  --scarlet: #e11d2e;
  --rose: #a31832;
  --mute: #d8c8c2;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
  background: #0b0506;
  color: var(--paper);
  font-family: "Archivo Black", "Impact", sans-serif;
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  max-height: 100svh;
  background: var(--ink);
  isolation: isolate;
}

.poster {
  position: absolute;
  inset: 2.4%;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 10%, rgba(107, 16, 40, 0.55), transparent 30%),
    radial-gradient(circle at 86% 80%, rgba(200, 30, 58, 0.22), transparent 34%),
    radial-gradient(circle at 50% 50%, #1c0a10 0%, #100608 62%, #0c0406 100%);
  box-shadow:
    0 0 0 1px #3a151c,
    inset 0 0 0 3px var(--paper);
}

.grain,
.scratches,
.crumple {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.halftone {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0 0.9px, transparent 1.3px) 0 0 / 4px 4px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.grain {
  z-index: 8;
  opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scratches {
  z-index: 7;
  opacity: 0.2;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      98deg,
      transparent 0 38px,
      rgba(244, 235, 227, 0.05) 39px,
      transparent 41px
    ),
    repeating-linear-gradient(
      -12deg,
      transparent 0 72px,
      rgba(200, 30, 58, 0.07) 73px,
      transparent 75px
    );
}

.crumple {
  z-index: 6;
  opacity: 0.14;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 230, 220, 0.16), transparent 36%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, 0.5), transparent 40%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(20, 0, 4, 0.35) 100%);
}

.slash,
.slash-paper {
  position: absolute;
  left: -8%;
  top: 28%;
  width: 116%;
  height: 38%;
  clip-path: polygon(0.0% 13.6%, 1.1% 15.3%, 2.2% 15.2%, 3.3% 16.8%, 4.4% 16.1%, 5.6% 15.8%, 6.7% 16.1%, 7.8% 18.0%, 8.9% 15.1%, 10.0% 19.5%, 11.1% 14.6%, 12.2% 16.4%, 13.3% 16.4%, 14.4% 16.0%, 15.6% 18.2%, 16.7% 12.6%, 17.8% 15.0%, 18.9% 12.1%, 20.0% 13.9%, 21.1% 12.6%, 22.2% 11.2%, 23.3% 13.7%, 24.4% 13.5%, 25.6% 11.5%, 26.7% 13.4%, 27.8% 12.1%, 28.9% 15.2%, 30.0% 11.8%, 31.1% 12.9%, 32.2% 12.0%, 33.3% 13.6%, 34.4% 12.5%, 35.6% 13.2%, 36.7% 11.6%, 37.8% 10.4%, 38.9% 13.0%, 40.0% 8.2%, 41.1% 11.0%, 42.2% 7.3%, 43.3% 9.3%, 44.4% 6.8%, 45.6% 8.3%, 46.7% 8.2%, 47.8% 7.7%, 48.9% 7.8%, 50.0% 6.4%, 51.1% 7.6%, 52.2% 7.2%, 53.3% 4.7%, 54.4% 7.2%, 55.6% 5.9%, 56.7% 6.5%, 57.8% 10.3%, 58.9% 6.4%, 60.0% 8.6%, 61.1% 10.7%, 62.2% 4.0%, 63.3% 10.8%, 64.4% 11.6%, 65.6% 5.5%, 66.7% 9.9%, 67.8% 9.0%, 68.9% 13.5%, 70.0% 9.2%, 71.1% 7.4%, 72.2% 10.5%, 73.3% 7.4%, 74.4% 8.8%, 75.6% 7.9%, 76.7% 8.4%, 77.8% 8.3%, 78.9% 14.4%, 80.0% 10.5%, 81.1% 9.7%, 82.2% 10.4%, 83.3% 6.7%, 84.4% 14.7%, 85.6% 11.4%, 86.7% 12.4%, 87.8% 16.4%, 88.9% 16.2%, 90.0% 15.4%, 91.1% 17.3%, 92.2% 17.4%, 93.3% 14.9%, 94.4% 14.9%, 95.6% 15.9%, 96.7% 14.6%, 97.8% 15.4%, 98.9% 13.8%, 100.0% 13.0%, 100.0% 91.4%, 98.9% 91.9%, 97.8% 91.0%, 96.7% 93.4%, 95.6% 94.4%, 94.4% 93.3%, 93.3% 96.0%, 92.2% 92.5%, 91.1% 93.0%, 90.0% 91.2%, 88.9% 92.5%, 87.8% 93.4%, 86.7% 93.1%, 85.6% 86.7%, 84.4% 85.2%, 83.3% 91.8%, 82.2% 88.1%, 81.1% 90.5%, 80.0% 87.3%, 78.9% 88.6%, 77.8% 89.1%, 76.7% 88.6%, 75.6% 88.3%, 74.4% 88.0%, 73.3% 87.5%, 72.2% 88.1%, 71.1% 87.7%, 70.0% 88.0%, 68.9% 87.8%, 67.8% 89.6%, 66.7% 86.0%, 65.6% 86.9%, 64.4% 88.9%, 63.3% 88.3%, 62.2% 87.8%, 61.1% 87.8%, 60.0% 85.3%, 58.9% 87.3%, 57.8% 85.8%, 56.7% 87.3%, 55.6% 84.0%, 54.4% 84.8%, 53.3% 83.1%, 52.2% 85.2%, 51.1% 86.0%, 50.0% 81.9%, 48.9% 83.2%, 47.8% 83.7%, 46.7% 84.6%, 45.6% 84.3%, 44.4% 85.2%, 43.3% 86.8%, 42.2% 86.1%, 41.1% 85.9%, 40.0% 88.2%, 38.9% 89.4%, 37.8% 88.8%, 36.7% 90.7%, 35.6% 88.6%, 34.4% 90.6%, 33.3% 89.8%, 32.2% 89.5%, 31.1% 89.3%, 30.0% 88.6%, 28.9% 91.9%, 27.8% 92.4%, 26.7% 92.3%, 25.6% 91.0%, 24.4% 90.7%, 23.3% 91.8%, 22.2% 90.3%, 21.1% 91.4%, 20.0% 88.9%, 18.9% 92.2%, 17.8% 92.4%, 16.7% 92.9%, 15.6% 90.7%, 14.4% 94.1%, 13.3% 91.8%, 12.2% 93.4%, 11.1% 93.6%, 10.0% 96.0%, 8.9% 94.4%, 7.8% 96.4%, 6.7% 94.0%, 5.6% 92.2%, 4.4% 95.4%, 3.3% 91.9%, 2.2% 94.0%, 1.1% 91.1%, 0.0% 89.5%);
  transform: rotate(-11deg);
}

.slash-paper {
  background: var(--paper);
  transform: translate(-10px, -12px) rotate(-11deg);
  opacity: 0.9;
}

.slash {
  background: linear-gradient(120deg, var(--wine) 0%, var(--rose) 48%, var(--burgundy) 100%);
  filter: contrast(1.15);
  opacity: 0.97;
}

.slash::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(30, 3, 8, 0.55) 0 1.3px, transparent 1.6px) 0 0 / 7px 7px,
    linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.16), transparent);
  opacity: 0.55;
}

.burst {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(92%, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -52%);
  background: var(--crimson);
  clip-path: polygon(
    50% 0%,
    57% 16%,
    73% 6%,
    70% 24%,
    92% 20%,
    78% 36%,
    100% 42%,
    80% 50%,
    97% 64%,
    74% 62%,
    84% 84%,
    64% 72%,
    62% 96%,
    50% 76%,
    40% 100%,
    38% 74%,
    18% 88%,
    28% 66%,
    4% 68%,
    24% 52%,
    0% 42%,
    24% 36%,
    8% 18%,
    32% 26%,
    28% 4%,
    44% 18%
  );
}

.burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(20, 0, 4, 0.7) 0 1.4px, transparent 1.8px) 0 0 / 6px 6px;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 75%);
  mask: radial-gradient(circle at 50% 50%, transparent 30%, #000 75%);
  opacity: 0.75;
}

.halo {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 58%;
  height: 28%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: var(--wine);
  clip-path: polygon(4% 18%, 96% 8%, 92% 86%, 8% 94%);
  opacity: 0.96;
}

.splat {
  position: absolute;
  z-index: 2;
  fill: var(--rose);
  opacity: 0.55;
  mix-blend-mode: screen;
}

.splat-a {
  top: 6%;
  left: 20%;
  width: 130px;
  transform: rotate(-10deg);
}

.splat-b {
  top: 4%;
  right: 18%;
  width: 118px;
  fill: var(--crimson);
  opacity: 0.45;
  transform: rotate(14deg);
}

.splat-c {
  top: 4%;
  right: 22%;
  width: clamp(60px, 9vh, 100px);
  fill: var(--wine);
  opacity: 0.6;
  transform: rotate(-8deg);
}

.doodle {
  position: absolute;
  z-index: 3;
  fill: none;
  stroke: var(--crimson);
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: bevel;
  color: var(--crimson);
}

.doodle.fill-wine {
  fill: var(--wine);
  stroke: #1a0508;
}

.doodle.fill-crimson {
  fill: var(--crimson);
  stroke: #1a0508;
}

.doodle.fill-paper {
  fill: var(--paper);
  stroke: #1a0508;
}

.doodle.fill-scarlet {
  fill: var(--scarlet);
  stroke: #1a0508;
}

.doodle.horns,
.doodle.horns-b {
  stroke: none;
}

.horn-fill {
  fill: var(--scarlet);
}

.horn-shade {
  fill: var(--burgundy);
}

.horns-b .horn-fill {
  fill: var(--paper);
}

.horns-b .horn-shade {
  fill: var(--wine);
}

.horns {
  top: 3%;
  left: 50%;
  width: clamp(110px, min(14vw, 20vh), 220px);
  transform: translateX(-50%);
}

.horns-b {
  top: auto;
  bottom: 7%;
  left: 7%;
  width: 96px;
  transform: rotate(-14deg);
}

.tornado {
  top: 9%;
  left: 6%;
  width: clamp(70px, min(9vw, 15vh), 124px);
  transform: rotate(-8deg);
}

.tornado-b {
  top: 5%;
  right: 31%;
  width: clamp(60px, min(8vw, 13vh), 104px);
  transform: rotate(12deg);
}

.star {
  top: 30%;
  right: 27%;
  width: clamp(34px, 5vh, 56px);
  transform: rotate(12deg);
}

.star-b {
  left: 12%;
  bottom: 31%;
  width: clamp(26px, 4.2vh, 44px);
  transform: rotate(-8deg);
}

.star-c {
  top: 24%;
  left: 30%;
  width: clamp(18px, 3vh, 30px);
  transform: rotate(22deg);
}

.star-d {
  top: 66%;
  left: 30%;
  width: clamp(22px, 3.4vh, 36px);
  transform: rotate(-18deg);
}

.star-e {
  top: 8%;
  left: 34%;
  width: clamp(16px, 2.4vh, 24px);
  transform: rotate(8deg);
}

.star-f {
  bottom: 30%;
  right: 38%;
  width: clamp(18px, 2.8vh, 28px);
  transform: rotate(-14deg);
}

.bolt {
  top: 28%;
  right: 8%;
  width: 42px;
  transform: rotate(18deg);
}

.x-mark {
  bottom: 8%;
  left: 50%;
  width: 62px;
  transform: translateX(-50%) rotate(7deg);
  stroke: var(--paper);
}

.tape {
  position: absolute;
  z-index: 4;
  background: var(--paper);
  color: var(--burgundy);
  font-family: "Permanent Marker", cursive;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: grid;
  place-items: center;
  box-shadow: 3px 3px 0 #1a0508;
  white-space: nowrap;
  overflow: hidden;
}

.tape-l {
  top: 24%;
  left: 4%;
  width: 92px;
  height: 28px;
  transform: rotate(-78deg);
  font-size: 0.7rem;
}

.tape-r {
  top: 61%;
  right: 3%;
  width: 108px;
  height: 28px;
  transform: rotate(81deg);
  font-size: 0.7rem;
  background: var(--crimson);
  color: var(--paper);
}

.dots {
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(var(--crimson) 1.4px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.5;
  mix-blend-mode: screen;
}

.dots-a {
  top: 18%;
  left: 16%;
  transform: rotate(18deg);
  clip-path: polygon(10% 0, 100% 20%, 80% 100%, 0 70%);
}

.dots-b {
  right: 12%;
  bottom: 22%;
  transform: rotate(-22deg);
  clip-path: polygon(0 10%, 90% 0, 100% 90%, 20% 100%);
}

.title {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-3deg);
  width: 86%;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.word {
  display: flex;
  gap: 0.28rem;
  align-items: flex-end;
}

.cut {
  display: inline-grid;
  place-items: center;
  min-width: 0.85em;
  padding: 0.08em 0.12em 0.02em;
  background: var(--paper);
  color: var(--oxblood);
  font-family: "Anton", "Impact", sans-serif;
  font-size: clamp(4.2rem, 16vw, 7.4rem);
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 5px 6px 0 #1a0508;
  transform: rotate(var(--r, 0deg));
}

.cut.ink {
  background: var(--oxblood);
  color: var(--paper);
}

.cut.wine {
  background: var(--wine);
  color: var(--paper);
}

.cut.crimson {
  background: var(--crimson);
  color: var(--paper);
}

.cut.sm {
  font-size: clamp(2.6rem, 10vw, 4.6rem);
  padding: 0.16em 0.22em 0.08em;
}

.cut.h {
  font-size: clamp(3.8rem, 14vw, 6.4rem);
  padding: 0.1em 0.2em 0.04em;
}

.fx {
  position: absolute;
}

.title.brush {
  position: absolute;
  gap: 0;
  width: auto;
  transform: translate(-50%, -52%) rotate(-7deg);
  filter: url(#rough) drop-shadow(5px 7px 0 #1a0508);
}

.title.brush .swoosh {
  bottom: auto;
  top: 68%;
  height: 0.9em;
  font-size: clamp(1.4rem, 5vw, 3.6rem);
}

.brush-line {
  display: block;
  font-family: "Caveat Brush", cursive;
  font-weight: 400;
  color: var(--paper);
  line-height: 0.8;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brush-main {
  font-size: clamp(4rem, min(26vw, 30vh), 22rem);
  color: var(--paper);
}

.brush-sub {
  display: inline-block;
  justify-self: end;
  margin-top: 0.05em;
  margin-right: 0.2em;
  padding: 0.12em 0.42em 0.08em;
  font-family: "Permanent Marker", cursive;
  font-size: clamp(1.7rem, min(7vw, 8.5vh), 5.4rem);
  color: var(--oxblood);
  background: var(--paper);
  box-shadow: 5px 6px 0 #1a0508;
  transform: rotate(4deg);
  line-height: 1;
}

.swoosh {
  position: absolute;
  left: -4%;
  bottom: 22%;
  width: 108%;
  height: 0.25em;
  fill: none;
  stroke: var(--scarlet);
  stroke-width: 9;
  stroke-linecap: round;
  pointer-events: none;
}

.guitar {
  position: absolute;
  z-index: 2;
  right: -4%;
  top: -6%;
  width: clamp(150px, min(22vw, 30vh), 340px);
  transform: rotate(-28deg);
  filter: drop-shadow(6px 8px 0 #1a0508);
  opacity: 0.95;
}

.guitar .body {
  fill: var(--crimson);
  stroke: #1a0508;
  stroke-width: 6;
}

.guitar .ht {
  fill: url(#ht);
}

.guitar .dark {
  fill: #1a0508;
}

.guitar .light {
  fill: var(--paper);
}

.guitar .str {
  stroke: var(--paper);
  stroke-width: 1.6;
}

.flames {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 27%;
  fill: var(--wine);
  stroke: var(--rose);
  stroke-width: 2.5;
  opacity: 0.92;
}

.flames-in {
  fill: var(--crimson);
  stroke: none;
  transform: translateY(4%) scale(1, 0.62);
  transform-origin: bottom;
  opacity: 0.9;
}

.mark {
  position: absolute;
  z-index: 4;
  fill: none;
  stroke: var(--paper);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.mark.red {
  stroke: var(--scarlet);
}

.arrow-a {
  top: 30%;
  left: 27%;
  width: 90px;
  transform: rotate(18deg);
}

.arrow-b {
  bottom: 30%;
  right: 24%;
  width: 80px;
  transform: rotate(-150deg);
}

.slashes {
  top: 12%;
  left: 40%;
  width: 60px;
  transform: rotate(-10deg);
}

.slashes-b {
  bottom: 14%;
  left: 36%;
  width: 46px;
  transform: rotate(12deg);
}

.ring {
  top: 40%;
  left: 12%;
  width: 110px;
  transform: rotate(-6deg);
}

.zig {
  top: 20%;
  right: 30%;
  width: 90px;
  transform: rotate(6deg);
}

.zig-b {
  bottom: 24%;
  left: 20%;
  width: 70px;
  transform: rotate(-16deg);
}

.star-g {
  top: 20%;
  left: 17%;
  width: clamp(22px, 3.6vh, 40px);
  transform: rotate(10deg);
}

.star-h {
  top: 42%;
  left: 7%;
  width: clamp(16px, 2.6vh, 26px);
  transform: rotate(-20deg);
}

.star-i {
  top: 12%;
  right: 42%;
  width: clamp(16px, 2.6vh, 26px);
  transform: rotate(18deg);
}

.star-j {
  bottom: 30%;
  right: 22%;
  width: clamp(18px, 3vh, 30px);
  transform: rotate(-6deg);
}

.horns-b {
  top: auto;
  bottom: 31%;
  left: 5%;
  width: clamp(60px, min(7vw, 10vh), 90px);
  transform: rotate(-12deg);
}

.horns-b .horn-fill {
  fill: var(--paper);
}

.horns-b .horn-shade {
  fill: var(--wine);
}

.ostar {
  top: 56%;
  right: 26%;
  width: clamp(28px, 4.4vh, 48px);
  transform: rotate(14deg);
}

.ostar-b {
  top: 7%;
  left: 62%;
  width: clamp(22px, 3.4vh, 36px);
  transform: rotate(-10deg);
}

.stamp {
  position: absolute;
  z-index: 5;
  font-family: "Bungee", sans-serif;
  font-size: clamp(0.7rem, 2.4vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.86;
}

.stamp-top {
  top: 11%;
  left: 16%;
  transform: rotate(-8deg);
}

.stamp-bot {
  bottom: 11%;
  right: 14%;
  transform: rotate(6deg);
  color: var(--crimson);
}


.scribble {
  position: absolute;
  z-index: 4;
  font-family: "Permanent Marker", cursive;
  color: var(--paper);
  opacity: 0.55;
  letter-spacing: 0.04em;
}

.s1 {
  top: 26%;
  right: 9%;
  transform: rotate(14deg);
  font-size: 0.85rem;
}

.s2 {
  bottom: 24%;
  left: 8%;
  transform: rotate(-12deg);
  font-size: 0.8rem;
  color: var(--crimson);
}

.socials {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 8%;
  display: flex;
  gap: 16px;
  transform: translateX(-50%);
}

.social {
  --tilt: -7deg;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: var(--paper);
  color: var(--oxblood);
  box-shadow: 5px 6px 0 #1a0508;
  text-decoration: none;
  transform: rotate(var(--tilt));
  transition:
    transform 700ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 700ms cubic-bezier(0.32, 0.72, 0, 1),
    color 700ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 700ms cubic-bezier(0.32, 0.72, 0, 1);
}

.social:nth-child(2) {
  --tilt: 5deg;
}

.social:nth-child(3) {
  --tilt: -4deg;
}

.social svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
}

.social:hover {
  background: var(--crimson);
  color: var(--paper);
  transform: rotate(var(--tilt)) scale(1.08);
}

.social:active {
  transform: rotate(var(--tilt)) scale(0.98);
}

.social:focus-visible {
  outline: 3px solid var(--scarlet);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .poster {
    inset: 1.6%;
  }

  .cut {
    font-size: clamp(3.4rem, 18vw, 5.4rem);
    box-shadow: 3px 4px 0 #1a0508;
  }

  .tornado,
  .tornado-b,
  .star,
  .bolt {
    width: 48px;
  }

  .horns {
    width: 84px;
    top: 4%;
  }

  .horns-b,
  .star-b,
  .star-c,
  .star-d {
    width: 28px;
  }

  .splat {
    width: 72px;
  }

  .guitar {
    width: 150px;
    right: -26%;
    top: -2%;
  }

  .flames {
    width: 250%;
    left: -75%;
    right: auto;
    height: 20%;
  }

  .arrow-a,
  .arrow-b,
  .ring,
  .zig {
    width: 48px;
  }

  .brush-sub {
    font-size: clamp(1.6rem, 8vw, 3rem);
  }

  .socials {
    bottom: 6%;
    gap: 12px;
  }

  .social {
    width: 40px;
    height: 40px;
    padding: 8px;
    box-shadow: 3px 4px 0 #1a0508;
  }

  .social svg {
    width: 20px;
    height: 20px;
  }
}

@media (orientation: landscape) and (max-width: 1200px) {
  .guitar {
    right: -13%;
    top: -4%;
  }

  .brush-main {
    font-size: clamp(3.6rem, min(20vw, 30vh), 22rem);
  }

  .tornado-b {
    right: 33%;
    top: 7%;
  }

  .splat-c {
    right: 24%;
    top: 6%;
  }
}

@media (orientation: landscape) and (min-width: 900px) {
  .burst {
    width: min(56vh, 560px);
    top: 50%;
  }

  .halo {
    width: min(44vw, 720px);
    height: min(28vh, 300px);
  }

  .slash {
    top: 24%;
    height: 46%;
  }

  .cut {
    font-size: clamp(4.6rem, 10vw, 8rem);
  }

  .cut.sm {
    font-size: clamp(2.8rem, 6vw, 5rem);
  }

  .cut.h {
    font-size: clamp(4rem, 9vw, 6.8rem);
  }

  .title {
    width: min(720px, 70%);
  }

  .tornado,
  .tornado-b {
    width: clamp(60px, 12vh, 108px);
  }

  .splat {
    width: clamp(70px, 14vh, 130px);
  }
}

@media (orientation: portrait) {
  .horns {
    top: 4.5%;
    width: clamp(96px, 28vw, 150px);
  }

  .tornado {
    top: 13%;
    left: 6%;
    width: clamp(56px, 18vw, 96px);
    transform: rotate(-10deg);
  }

  .tornado-b {
    top: auto;
    bottom: 17%;
    right: 7%;
    width: clamp(52px, 16vw, 90px);
    transform: rotate(14deg);
  }

  .guitar {
    width: clamp(120px, 38vw, 170px);
    right: -20%;
    top: -3%;
  }

  .splat-c {
    top: auto;
    bottom: 14%;
    left: 3%;
    right: auto;
    width: clamp(64px, 20vw, 90px);
    opacity: 0.8;
    fill: var(--rose);
  }

  .burst {
    width: min(96%, 460px);
    top: 46%;
  }

  .halo {
    top: 45%;
    width: 70%;
  }

  .title {
    top: 46%;
  }

  .star {
    top: 62%;
    left: 12%;
    right: auto;
    width: 34px;
  }

  .star-b {
    top: 69%;
    right: 30%;
    left: auto;
    bottom: auto;
    width: 28px;
  }

  .star-c {
    top: 73%;
    left: 52%;
    width: 20px;
  }

  .star-d {
    top: 58%;
    left: auto;
    right: 12%;
    width: 24px;
  }

  .star-e {
    top: 12%;
    left: 32%;
    width: 16px;
  }

  .star-f {
    top: 9%;
    bottom: auto;
    right: 40%;
    width: 18px;
  }

  .ostar {
    top: 66%;
    right: auto;
    left: 24%;
    width: 30px;
  }

  .ostar-b {
    top: 22%;
    left: auto;
    right: 34%;
    width: 22px;
  }

  .flames {
    width: 250%;
    left: -75%;
    right: auto;
    height: 23%;
  }

  .star-g {
    top: 27%;
    left: 8%;
    width: 30px;
  }

  .star-h {
    top: 17%;
    left: auto;
    right: 30%;
    width: 18px;
  }

  .star-i {
    top: 9%;
    right: 26%;
    width: 16px;
  }

  .star-j {
    bottom: auto;
    top: 84%;
    right: 12%;
    width: 26px;
  }

  .horns-b {
    bottom: auto;
    top: 78%;
    left: 8%;
    right: auto;
    width: clamp(64px, 20vw, 90px);
    transform: rotate(-6deg);
  }

  .ostar-b {
    top: 33%;
    right: 40%;
  }

  .socials {
    bottom: 5%;
  }
}