@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');


* {
    font-family: 'Caveat', cursive;
}
section {
    width: 35%;
    height: 500px;
    
    margin: auto;
    background-color: rgb(255, 77, 91);
    background-image: url("media/christmaslights.png");
    background-size: 15%;
    background-repeat: repeat-x;
    font-size: 1.15em;
    padding-top: 10px;

    animation: appear 1s ease-out;
    z-index: 0;
}

div {
    background-image: linear-gradient(rgb(221, 226, 255),rgb(184, 195, 255));
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

article {
    width: 45%;
    height: 350px;

    margin-left: 15px;
    background-color: white;
    float: left;
}

p {
    padding: 10px;
    z-index: 2;
}

h1 {
    color: white;
    padding: 15px;
}

img {
    width: 45%;
    float: right;
}

/* snowfall, keyframe*/
/* ;-; */
.zero {
    left: 28%;
    animation: snowfall 2.65s infinite linear;
}
.first {
    left: 35%;
    animation: snowfall 2.3s infinite linear;
}
.second {
    left: 43%;
    animation: snowfall 4s infinite linear;
}
.third {
    left: 50%;
    animation: snowfall 3s infinite linear;
}
.fourth {
    left: 57%;
    animation: snowfall 2s infinite linear;
}
.fifth {
    left: 62%;
    animation: snowfall 3.45s infinite linear;
}
.sixth {
    left: 69%;
    animation: snowfall 2.65s infinite linear;
}

@keyframes snowfall {
    0% {
        top: -100px;
        opacity: 1;
    }
    80% {
        opacity: 1;
    } 
    100% {
        top: 600px;
        opacity: 0;
    }  
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 1000px) {
    section {
        width: 100%;
        height: auto;
    }

    /* ;-; pt2 */
    .zero {left: 5%;}
    .first {left: 15%;}
    .second {left: 25%;}
    .third {left: 50%;}
    .fourth {left: 75%;}
    .fifth {left: 85%;}
    .sixth {left: 95%;}
}