body {
    background-color: #acdede;
    margin: 0;
    overflow: hidden;
    height: 100vh;
    cursor: url('boba.png'), auto;
}

nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: rgb(214, 244, 238);
    height: 8vh;
}

nav .link {
    font-size: 1.5rem;
    color: rgb(8, 88, 89);
    margin: 0 2rem 0 1rem; 
    text-decoration: none;
}

nav .link:hover {
    cursor: url('boba.png'), auto;
    color: rgb(14, 145, 147);
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 92vh;
}

img {
    width: 30%;
    margin-right: 5rem;
}

.snowflake {
    position: absolute;
    background-color: white;
    border-radius: 50%;
}

@keyframes fall {
    0% {
        /* top: 0; */
    }
    100% {
        top: 100vh;
    }
}

@keyframes drift-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

@keyframes drift-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100px);
    }
}

/* Generate multiple snowflakes */
.snowflake:nth-child(1) {
    width: 8px;
    height: 8px;
    top: -10%;
    left: 10%;
    animation: fall 8s linear infinite, drift-left 12s linear infinite;
}

.snowflake:nth-child(2) {
    width: 12px;
    height: 12px;
    top: 20%;
    left: 30%;
    animation: fall 10s linear infinite, drift-right 14s linear infinite;
}

.snowflake:nth-child(3) {
    width: 6px;
    height: 6px;
    top: 40%;
    left: 50%;
    animation: fall 9s linear infinite;
}

.snowflake:nth-child(4) {
    width: 10px;
    height: 10px;
    top: 60%;
    left: 70%;
    animation: fall 7s linear infinite, drift-right 11s linear infinite;
}

.snowflake:nth-child(5) {
    width: 14px;
    height: 14px;
    top: 30%;
    left: 90%;
    animation: fall 12s linear infinite, drift-left 16s linear infinite;
}

.snowflake:nth-child(6) {
    width: 9px;
    height: 9px;
    top: -20%;
    left: 15%;
    animation: fall 6s linear infinite;
}
.snowflake:nth-child(7) {
    width: 11px;
    height: 11px;
    top: 90%;
    left: 40%;
    animation: fall 11s linear infinite, drift-left 15s linear infinite;
}
.snowflake:nth-child(8) {
    width: 13px;
    height: 13px;
    left: 60%;
    top: -40%;
    animation: fall 8s linear infinite, drift-left 14s linear infinite;
}
.snowflake:nth-child(9) {
    width: 7px;
    height: 7px;
    left: 80%;
    top: 50%;
    animation: fall 9s linear infinite, drift-right 12s linear infinite;
}
.snowflake:nth-child(10) {
    width: 10px;
    height: 10px;
    left: 25%;
    top: 30%;
    animation: fall 7s linear infinite, drift-right 13s linear infinite;
}

.snowflake:nth-child(11) {
    width: 3px;
    height: 3px;
    left: 12%;
    top: 40%;
    animation: fall 8s linear infinite, drift-right 12s linear infinite;
}

.snowflake:nth-child(12) {
    width: 13px;
    height: 13px;
    left: 33%;
    top: 20%;
    animation: fall 10s linear infinite;
}

.snowflake:nth-child(13) {
    width: 8px;
    height: 8px;
    left: 80%;
    top: 80%;
    animation: fall 3s linear infinite, drift-left 13s linear infinite;
}

.snowflake:nth-child(14) {
    width: 10px;
    height: 10px;
    left: 21%;
    top: -10%;
    animation: fall 7s linear infinite, drift-left 11s linear infinite;
}

.snowflake:nth-child(15) {
    width: 11px;
    height: 11px;
    left: 40%;
    top: -10%;
    animation: fall 12s linear infinite;
}

.snowflake:nth-child(16) {
    width: 3px;
    height: 3px;
    left: 95%;
    top: -60%;
    animation: fall 6s linear infinite, drift-right 10s linear infinite;
}
.snowflake:nth-child(17) {
    width: 7px;
    height: 7px;
    left: 30%;
    top: 50%;
    animation: fall 11s linear infinite, drift-left 15s linear infinite;
}
.snowflake:nth-child(18) {
    width: 7px;
    height: 7px;
    left: 80%;
    top: 30%;
    animation: fall 8s linear infinite, drift-right 14s linear infinite;
}
.snowflake:nth-child(19) {
    width: 11px;
    height: 11px;
    left: 85%;
    top: -30%;
    animation: fall 9s linear infinite, drift-left 12s linear infinite;
}
.snowflake:nth-child(20) {
    width: 10px;
    height: 10px;
    left: 75%;
    top: 50%;
    animation: fall 7s linear infinite;
}