html {
  height: 100dvh;
  inset: 0;
  padding: 0 3rem;
  font: 100%/1.4 system-ui, sans-serif;
}

body {
  margin: 0;
  background: transparent;
  overflow: auto;
  padding-block-end: 3rem;
}


body::before {
  pointer-events: none;
  z-index: 1;
  content: "";
  position: fixed;
  left: 2rem;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0 1rem,
    black 1rem 1.8rem,
    transparent 1.8rem calc(100% - 1.8rem),
    black calc(100% - 1.8rem) calc(100% - 0.8rem),
    transparent calc(100% - 0.8rem)
  )
}

body::after {
  pointer-events: none;
  z-index: 1;
  content: "";
  position: fixed;
  top: 0;
  right: 2rem;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0 1rem,
    black 1rem 1.8rem,
    transparent 1.8rem calc(100% - 1.8rem),
    black calc(100% - 1.8rem) calc(100% - 0.8rem),
    transparent calc(100% - 0.8rem)
  )
}

html::before {
  pointer-events: none;
  z-index: 1;
  content: "";
  position: fixed;
  left: 0;
  top: 2rem;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    transparent 0 1rem,
    black 1rem 1.8rem,
    transparent 1.8rem calc(100% - 1.8rem),
    black calc(100% - 1.8rem) calc(100% - 0.8rem),
    transparent calc(100% - 0.8rem)
  )
}

html::after {
  pointer-events: none;
  z-index: 1;
  content: "";
  position: fixed;
  bottom: 2rem;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    transparent 0 1rem,
    black 1rem 1.8rem,
    transparent 1.8rem calc(100% - 1.8rem),
    black calc(100% - 1.8rem) calc(100% - 0.8rem),
    transparent calc(100% - 0.8rem)
  )
}

#border {
  position: fixed;
  inset: 0;
  border: 2rem solid lch(100% 0 0 / 0.5);
  pointer-events: none;
}

h1 {
  color: #F57C00;
  font-weight: 900;
  font-size: 18dvi;
  letter-spacing: -0.01em;
  margin: -0.5rem 0 3rem 0;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -15dvb;
    left: -30dvi;
    width: 60dvi;
    aspect-ratio: 1;
    background: #ffb62f;
    border-radius: 50%;
    z-index: -1;
  }
}

img {
  margin: 0 -3rem;
  width: calc(100% + 6rem);
}