#st-h1 {
  font-size: clamp(2.5rem, 15vmin, 6rem);
  font-family: sans-serif;
  color: grey;
  width: 100%;
  transition: all 0.3s ease;
  &:hover {
    transform: scale(1.05);
  }
}

.underlined {
  /*   background: red; */
  position: relative;
  color: hsl(10 80% 50%);
}

.underline-mask:after {
  content: "";
  position: absolute;
  top: 95%;
  width: 150%;
  aspect-ratio: 3 / 1;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 6px solid hsl(280 80% 50%);
  /* Use a conic gradient mask to hide and show the bits you want */
  --spread: 140deg;
  --start: 290deg;
  mask: conic-gradient(
    from var(--start),
    white 0 var(--spread),
    transparent var(--spread)
  );
}

.underline-overflow {
  display: inline-block;
  /* A little extra padding and overflow hidden   */
  overflow: hidden;
  padding-bottom: clamp(1rem, 2vmin, 2rem);
  color: hsl(10 80% 50%);
}

.underline-overflow:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 150%;
  aspect-ratio: 2.5 / 1;

  left: 50%;
  transform: translate(-50%, -10%);
  border-radius: 50%;
  border: 6px solid hsl(10 80% 50%);
}

.underline-clip:after {
  content: "";
  position: absolute;
  color: hsl(130 80% 50%);
  top: 95%;
  width: 150%;
  aspect-ratio: 3 / 1;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 6px solid hsl(130 80% 50%);
  /* Use a clip-path to hide and show the bits you want */
  clip-path: polygon(0 0, 50% 50%, 100% 0);
}

#big {
  padding: 30px;
  font-size: 6.5rem;
  color: orange;
  text-shadow: 0 0 5px yellow, 0 0 10px yellow, 0 0 20px orange, 0 0 30px red,
    0 0 40px red, 0 0 50px orange, 0 0 75px yellow;
}

.did-y-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  .did-y-container {
    width: 90% !important;
    h1 {
      width: 100%;
      font-size: 1rem;
    }
    #st-h1 {
      font-size: 2rem;
    }
  }
}