*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    overflow:hidden;
    height:100vh;
    background:linear-gradient(to bottom,#87CEEB,#98FB98);
}

/* IGRICA */

#game{
    width:100%;
    height:100vh;
    position:relative;
    text-align:center;
}

#game h1{
    margin-top:20px;
    font-size:35px;
}

.subtitle{
    margin-top:10px;
    font-size:20px;
}

#counter{
    margin-top:15px;
    font-size:28px;
    font-weight:bold;
    color:#d6336c;
}

/* SRCA */

.heart{
    position:absolute;
    font-size:40px;
    cursor:pointer;
    user-select:none;
    animation:float 2s infinite;
}

@keyframes float{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }
}

/* KRAVICE */

.cow{
    position:absolute;
    font-size:80px;
    animation:walk 10s linear infinite;
}

.cow1{
    top:70%;
    left:-100px;
    animation-delay:0s;
}

.cow2{
    top:55%;
    left:-200px;
    animation-delay:2s;
}

.cow3{
    top:78%;
    left:-300px;
    animation-delay:4s;
}

.cow4{
    top:63%;
    left:-400px;
    animation-delay:6s;
}

@keyframes walk{
    from{
        left:-120px;
    }

    to{
        left:110%;
    }
}

/* PLES KRAVICA */

.dance{
    animation:dance 0.4s infinite !important;
}

@keyframes dance{
    0%{
        transform:rotate(-10deg);
    }

    50%{
        transform:rotate(10deg);
    }

    100%{
        transform:rotate(-10deg);
    }
}

/* KOVERTA */

#envelope{
    position:fixed;

    top:-500px;
    left:50%;

    transform:translateX(-50%);

    text-align:center;

    transition:2s;

    cursor:pointer;

    display:none;
}

#envelope.show{
    top:150px;
}

.envelope-body{
    font-size:180px;
}

#envelope p{
    font-size:24px;
    font-weight:bold;
}

/* ČESTITKA */

.hidden{
    display:none;
}

#card{
    width:100%;
    height:100vh;

    display:flex;

    justify-content:center;
    align-items:center;

    background:rgba(255,255,255,0.9);
}

.birthday-card{

    width:70%;

    max-width:700px;

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:0 0 25px rgba(0,0,0,0.2);

    text-align:center;

    animation:appear 1.5s;
}

.birthday-card h1{
    color:#ff4d6d;
    margin-bottom:20px;
}

#sadText{
    font-size:22px;
    line-height:1.7;
}

@keyframes appear{
    from{
        opacity:0;
        transform:scale(0.7);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}