details::details-content {
  display: block;
  opacity: 0;
  transition: content-visibility 300ms allow-discrete step-end, opacity 300ms;
}

details[open]::details-content {
  opacity: 1;
  transition: content-visibility 300ms allow-discrete step-start, opacity 300ms;
}

@layer base {
  details {
    background: hsl(30 100% 85%);
    border-radius: 8px;
    font-size: 1.5rem;
    padding: 1rem;

    &[open] {
      background: hsl(130 100% 85%);
    }
  }
}

details summary::-webkit-details-marker {
  color: hsl(30 100% 30%);
}

details[open] summary::-webkit-details-marker {
  color: hsl(130 100% 30%);
}

summary {
  font-family: "Caveat", cursive;
  font-size: 1.5em;
}

@layer global {
  body {
    background-image: radial-gradient(
      50% 50% at center bottom,
      rgba(0, 0, 0, 0.66),
      rgb(38, 38, 38)
    ),
    linear-gradient(rgb(255, 255, 255), rgb(38, 38, 38));
    height: 100dvh;
    padding: 1.5rem;
  }
  
  .support {
    background: hsl(45 100% 80%);
    border-radius: 30px;
    font-size: 1.2rem;
    margin-block-end: 1.5rem;
    padding: 1rem;
    text-align: center;
  }
  
  @supports selector(details::details-content) {
    .support {
      display: none;
    }
  }
}