:root{
    --pepe-dark: #1e7f43;
    --pepe-main: #2ecc71;
    --pepe-light: #7bed9f;
    --pepe-accent: #a3ffcc;
    --pepe-glow1: #2ecc71;
    --pepe-glow2: #6affb8;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:system-ui,sans-serif;
    padding:20px;
    overflow:hidden;

    background:
        radial-gradient(circle at top left, #a3ffcc 0%, transparent 45%),
        radial-gradient(circle at bottom right, #74b9ff 0%, transparent 50%),
        linear-gradient(135deg,#1e7f43,#2ecc71 45%,#74b9ff 100%);

    background-size:200% 200%;
    animation:bgMove 12s ease infinite;
}

@keyframes bgMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* Hoofdkaart */

.card{
    background:white;
    padding:30px;
    border-radius:22px;
    max-width:420px;
    width:100%;
    text-align:center;
    box-shadow:0 20px 40px rgba(0,0,0,.2);
}

/* Glow */

.glow-sync{
    animation:glowDance .6s infinite ease-in-out;
}

@keyframes glowDance{
    0%{box-shadow:0 0 25px var(--pepe-glow1),0 0 60px var(--pepe-glow1);}
    50%{box-shadow:0 0 30px var(--pepe-glow2),0 0 70px var(--pepe-glow2);}
    100%{box-shadow:0 0 25px var(--pepe-glow1),0 0 60px var(--pepe-glow1);}
}

button{
    width:100%;
    padding:16px;
    font-size:1.1rem;
    border:none;
    border-radius:999px;
    background:linear-gradient(135deg,var(--pepe-main),var(--pepe-dark));
    color:white;
    cursor:pointer;
    margin-top:20px;
}

/* Overlay */

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:10;
}

.modal{
    background:white;
    padding:25px;
    border-radius:22px;
    text-align:center;
    max-width:360px;
    width:100%;
}

/* Pepo */

#pepo{
    width:180px;
    margin:15px auto;
    animation:dance .6s infinite ease-in-out;
    filter:drop-shadow(0 0 20px var(--pepe-glow2));
}

@keyframes dance{
    0%{transform:translateY(0) rotate(0);}
    25%{transform:translateY(-12px) rotate(-8deg);}
    50%{transform:translateY(0);}
    75%{transform:translateY(-12px) rotate(8deg);}
}

/* Confetti */

.confetti{
    position:fixed;
    width:10px;
    height:14px;
    border-radius:3px;
    pointer-events:none;
    z-index:20;
}

.fall{
    top:-20px;
    animation:fallSmooth linear forwards;
}

@keyframes fallSmooth{
    0%{
        transform:translateX(0) translateY(0) rotate(0deg);
        opacity:1;
    }
    100%{
        transform:translateX(var(--drift)) translateY(110vh) rotate(540deg);
        opacity:0;
    }
}

.shoot{
    animation:shoot 1.8s ease-out forwards;
}

@keyframes shoot{
    to{
        transform:translate(var(--x),var(--y)) rotate(720deg);
        opacity:0;
    }
}