@media screen and (min-width: 1000px) {
   :root {
      scroll-snap-type: y proximity;
   }
}


header {
   /* scroll-snap-align: center; */
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   row-gap: 1em;
}

header h1 {
   font-size: 3rem;
   text-align: center;
}

header .add-card {
   display: block;
   width: max-content;
   padding: 0.4em 0.8em;
   margin: 1rem auto;
   font-size: 1.5rem;
   text-align: center;
   background-color: var(--accent-color);
   color: white;
   text-decoration: none;
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   border-radius: var(--l); 
   transition: 0.5s box-shadow ease-in-out;
}
header .add-card:hover {
   box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.countdown-timer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5ch; font-size: min(7vw, 3rem); }
.countdown-timer small { font-size: 0.5em; transform: translateY(25%); }

#confetti { display: grid; grid-auto-flow: row; }
#confetti-1 {  }
#confetti > * { width: 100px; height: 30px; }
/* #confetti > * { position: absolute; top: var(--y, 50vh); left: var(--x, 50vw); width: 10px; height: 10px; } */


#scroll-down, #scroll-up { display: block; position: fixed; right: 0.5rem; font-size: 3rem; background-color: transparent; border: none; cursor: pointer; }
#scroll-up { top: 20%; }
#scroll-down { bottom: 20%; }
#scroll-down:disabled, #scroll-up:disabled { opacity: 0; pointer-events: none; }

.birthday-cards {
   display: grid;
   grid-auto-rows: 80vh;
   gap: 10vh;
   justify-content: center;
   margin-bottom: 10vh;
}

.birthday-card {
   position: relative;

   scroll-snap-align: center;
   /* scroll-snap-stop: ; */
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   border-radius: var(--l);
   text-align: center;
   aspect-ratio: 1;
   max-width: 80vw;
}
.card-svg {
   width: auto;
   height: 100%;
}

.card-svg path {
   stroke-dasharray: var(--length);
   stroke-dashoffset: var(--length);
}
.card-svg.animating path {
   animation: var(--duration) fill-stroke linear forwards;
   animation-delay: var(--delay);
   opacity: 0;
}
.card-svg path.finished {
   opacity: 1;
   stroke-dasharray: 0;
   stroke-dashoffset: 0;
}
@keyframes fill-stroke {
     0% { opacity: 0; stroke-dashoffset: var(--length); }
   0.1% { opacity: 1; stroke-dashoffset: var(--length); }
   100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes fade-in {
     0% { opacity: 0; }
   100% { opacity: 1; }
}

.birthday-card:nth-child(even) .card-name { opacity: 0; position: absolute; bottom: 0; left: 0; transform: translate(-30%, +50%) rotate(+20deg); background-color: var(--accent-color); color: white; padding: 0.5em 1.5em; border-radius: 100vw; }
.birthday-card:nth-child(odd) .card-name { opacity: 0; position: absolute; bottom: 0; right: 0; transform: translate(+30%, +50%) rotate(-20deg); background-color: var(--accent-color); color: white; padding: 0.5em 1.5em; border-radius: 100vw; }
.card-svg.animating + .card-name {
   animation: 1s fade-in forwards;
   animation-delay: var(--delay);
}