/* 前提 */

body{
    margin: 0;
    padding:0;
    background-color: black;
}
.background_wide {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100vw;
    margin: 0;
    padding: 0;
    z-index: -1;
}

.background_narrow {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: -1;
}

.snow {
    /*雪の色*/
    color: snow;
    /*雪の大きさ*/
    font-size: 10px;
    /*初期位置*/
    position: fixed;
    top: -5%;
    /*雪を適当な幅で降らせる*/
    text-shadow:
            5vw   -100px 2px,
            10vw  -400px 3px,
            20vw  -500px 4px,
            30vw  -580px 1px,
            39vw  -250px 2px,
            42vw  -340px 5px,
            56vw  -150px 2px,
            63vw  -180px 0,
            78vw  -220px 4px,
            86vw  -320px 9px,
            94vw  -170px 7px;
    /*雪アニメーション1*/
    animation: roll 5s linear infinite;
}
/*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
    90% {opacity:1;}
    100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
    100% {color:transparent;top:150%;}
}

/*星空アニメーション*/
#sky{
    width: 100%;
    height: 60vh;
}
.star {
    background-color: white;
    position: relative;
    border-radius: 50%;
    animation-name: twinkle;
    animation-iteration-count: infinite;
    z-index: -2;
}
@keyframes twinkle {
    50% {
        transform: scale(0.2);
    }
}