.card:has(.selected) {
  border: 2px solid #00ffae;
  background: #f0fdfa;
}

@layer reset, base, components, utilities;

@layer base {
  body {
    font-family: system-ui;
    background-color: #f8f9fa;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  }
}

input[type="checkbox"], input[type="radio"] {
  accent-color: #6f42c1;
}

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@scroll-timeline progress {
  time-range: auto;
}

.progress-bar {
  animation: grow linear forwards;
  animation-timeline: progress;
}

@keyframes grow {
  from { width: 0; }
  to { width: 100%; }
}

:is(h1, h2, h3) {
  font-family: 'Merriweather', serif;
}

:where(.btn, .link) {
  padding: 0.5rem 1rem;
}

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.rotating {
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

.rotating::after {
  transform: rotate(var(--angle));
}

.glass {
  backdrop-filter: blur(10px) brightness(1.1);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1rem;
}