:root, [data-theme="gildedhour"] {
    --p: 21 33% 56%;
    --s: 88 28% 70%;
    --a: 98 28% 70%;
    --n: 0 0% 29%;
    --b1: 33 21% 88%;
    --in: 198 93% 60%;
    --su: 158 64% 52%;
    --wa: 43 96% 56%;
    --er: 0 91% 71%;
}

.sparkle-container {
    position: relative;
    display: inline-block;
}

.sparkle-animation::before, .sparkle-animation::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 10px 5px white;
    animation: sparkle 1.5s linear infinite;
}

.sparkle-animation::after {
    animation-delay: 0.75s; /* Stagger the animations */
}

@keyframes sparkle {
    0% { transform: scale(0.5) translate(-100px, -50px); opacity: 0; }
    25% { opacity: 1; }
    50% { transform: scale(1) translate(100px, 80px); opacity: 1; }
    75% { opacity: 1; }
    100% { transform: scale(0.5) translate(-100px, -50px); opacity: 0; }
}

/* Use the Google Fonts */
body {
    font-family: 'Lato', sans-serif;
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

.font-sans {
    font-family: 'Lato', sans-serif;
}

/* Custom button animations */
.btn {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}