* {
    box-sizing: border-box;
    margin: 0;
}

html, body {
    height: 100%;
    margin: 0;
    overscroll-behavior: none;
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body {
    background: rgb(25, 21, 26);
    overflow: hidden;
    position: relative; /* important for ::before pseudo-elements */
}

body::before {
    content: "";
    position: fixed; /* stay on screen */
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    pointer-events: none;  /* don’t block clicks */
    background-image:
        radial-gradient(3px 3px at 10% 20%, #ffffffcc 50%, transparent 51%),
        radial-gradient(4px 4px at 30% 80%, #ffffffcc 50%, transparent 51%),
        radial-gradient(3px 3px at 70% 10%, #ffffffcc 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 250px 250px;      /* fewer, bigger flakes */
    animation: snow-slow 20s linear infinite;
    opacity: 0.8;
    z-index: 0;
    
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 20% 10%, #ffffffaa 50%, transparent 51%),
        radial-gradient(1px 1px at 50% 50%, #ffffffaa 50%, transparent 51%),
        radial-gradient(2px 2px at 80% 90%, #ffffffaa 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 180px 180px;      /* more, smaller flakes */
    animation: snow-fast 10s linear infinite;
    opacity: 0.9;
    z-index: 0;
}

@keyframes snow-slow {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(100px);
    }
    }

    @keyframes snow-fast {
    0% {
        transform: translateY(-150px);
    }
    100% {
        transform: translateY(150px);
    }
}

/* Bulbs in a row */
.main {
    border-radius: 25px;
    height: 20vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* responsive */
    gap: 0.5rem;  /* responsive */
}

/* Each bulb */
.circle {
    display: flex;
    margin: 1rem;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    transition: 1s all ease;
}

/* Small rectangle on top of the circle */
.circle:before {
    position: absolute;
    content: '';
    height: 15px;
    width: 15px;
    left: 17.5px;
    top: -15px;
    margin: 0;
    padding: 0;
    display: block;
    background: rgb(68, 53, 73);
    border-radius: 2px;
    display: inline-block;
    border-bottom: 2px solid rgb(97, 81, 107);
}

/* Curved wire */
.circle:after {
    position: absolute;
    content: "";
    top: -20px;
    left: 30px;
    position: absolute;
    width: 70px;
    height: 18.6666666667px;
    border-bottom: solid #222 2px;
    border-radius: 50%;
}

.circle:last-child::after {
    content: '';
    position: absolute;
    border: none;
}

.pink {
    background-color: #FF69B4;
    animation: glow-1 1.2s infinite;
}

.yellow {
    background-color: #f1c40f;
    animation: glow-2 1.2s infinite;
}

.blue {
    background-color: #64fcfe;
    animation: glow-3 1.2s infinite;
}

.green {
    background-color: #2ecc71;
    animation: glow-4 1.2s infinite;
}


/* on–off–on */
@keyframes glow-1 {
    0%,
    100% {
        box-shadow: 0 0 20px 5px #FF69B4;
    }
    50% {
        box-shadow: none;
    }
}

/* off–on–off */
@keyframes glow-2 {
    0%,
    100% {
        box-shadow: none;
    }
    50% {
        box-shadow: 0 0 20px 5px #f1c40f;
    }
}

/* on–off–on */
@keyframes glow-3 {
    0%,
    100% {
        box-shadow: 0 0 20px 5px #74f7e1;
    }
    50% {
        box-shadow: none;
    }
}

/* off–on–off */
@keyframes glow-4 {
    0%,
    100% {
        box-shadow: none;
    }
    50% {
        box-shadow: 0 0 20px 5px #2ecc71;
    }
}

@keyframes main-glow {
    0%, 100% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #c0392b, 0 0 60px #c0392b, 0 0 70px #c0392b;
    }
    25% {
        text-shadow: 0 0 20px #fff, 0 0 30px #f1c40f, 0 0 40px #ff4da6, 0 0 50px #f1c40f, 0 0 60px #f1c40f, 0 0 70px #f1c40f, 0 0 80px #ff4da6;
    }
    50% {
        text-shadow: 0 0 20px #fff, 0 0 30px #74f7e1, 0 0 40px #74f7e1, 0 0 50px #74f7e1, 0 0 60px #74f7e1, 0 0 70px #74f7e1, 0 0 80px #74f7e1;
    }
    75% {
        text-shadow: 0 0 20px #fff, 0 0 30px #2ecc71, 0 0 40px #2ecc71, 0 0 50px #2ecc71, 0 0 60px #2ecc71, 0 0 70px #2ecc71, 0 0 80px #2ecc71;
    }
}

@-webkit-keyframes main-glow {
    0%, 100% {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #c0392b, 0 0 60px #c0392b, 0 0 70px #c0392b;
    }
    25% {
        text-shadow: 0 0 20px #fff, 0 0 30px #f1c40f, 0 0 40px #ff4da6, 0 0 50px #f1c40f, 0 0 60px #f1c40f, 0 0 70px #f1c40f, 0 0 80px #ff4da6;
    }
    50% {
        text-shadow: 0 0 20px #fff, 0 0 30px #74f7e1, 0 0 40px #74f7e1, 0 0 50px #74f7e1, 0 0 60px #74f7e1, 0 0 70px #74f7e1, 0 0 80px #74f7e1;
    }
    75% {
        text-shadow: 0 0 20px #fff, 0 0 30px #2ecc71, 0 0 40px #2ecc71, 0 0 50px #2ecc71, 0 0 60px #2ecc71, 0 0 70px #2ecc71, 0 0 80px #2ecc71;
    }
}

.utilities {
    width: 100vw;
    padding: 1rem;
    color: white;
    font-family: 'Lato',sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    font-family: "Poppins", sans-serif;
    letter-spacing: 2px;
    font-size: clamp(1.5rem, 3vw, 2rem);  /* responsive */
    text-align : center;
    text-shadow: 0 0 30px white;
}

h1 {
    padding: 10px;
    color: #CCFFF1;
}

p {
    font-family: "Indie Flower", cursive;
    color:rgb(184, 134, 222);
    margin-top: 30px;
}

.small-text {
    font-size: 1.5rem;
}

.footer {
    margin-top: 0;
    position: static;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.footer a {
    color: #CCFFF1;
    font-size: 1.8rem;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}
.footer a:hover {
    color: rgb(184, 134, 222);      /* match your palette */
    transform: scale(1.1);
    transition: transform 0.2s ease, color 0.2s ease;
}

.music-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #CCFFF1;
    font-size: 22px;
    cursor: pointer;
}
.music-btn:hover {
    color: rgb(184, 134, 222);
}

@media (max-width: 600px) {
    body {
        overflow: auto;          /* allow scroll if needed */
    }

    .main {
        height: auto;            /* let height grow on small screens */
        padding-top: 1rem;
    }

    .utilities {
        padding: 0.5rem;
    }

    .footer {
        height: 50px;
        gap: 1rem;
    }

    .footer a {
        font-size: 1.5rem;
    }
}