@charset "utf-8";

/* Copyright (c) 2025 by nanba (https://codepen.io/nanba/pen/jORNarW) */
/* snow */
.c-snowfrake {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: opening 3s ease-in 0s forwards;
}

.c-snowfrake li:nth-child(1) {
  color: snow;
  font-size: 4px;
  position: fixed;
  top: -20%;
  left: -10%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 6s ease 0s infinite;
}

.c-snowfrake li:nth-child(2) {
  color: snow;
  font-size: 4.5px;
  position: fixed;
  top: -20%;
  left: -10%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 6.5s ease 0.5s infinite;
}

.c-snowfrake li:nth-child(3) {
  color: snow;
  font-size: 5px;
  position: fixed;
  top: 40%;
  left: -80%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 7s ease 1s infinite;
}

.c-snowfrake li:nth-child(4) {
  color: snow;
  font-size: 5.5px;
  position: fixed;
  top:-20%;
  left: -10%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 7.5s ease 1.5s infinite;
}

.c-snowfrake li:nth-child(5) {
  color: snow;
  font-size: 6px;
  position: fixed;
  top: 20%;
  left: -100%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 8s ease 3s infinite;
}

.c-snowfrake li:nth-child(6) {
  color: snow;
  font-size: 6.5px;
  position: fixed;
  top: -20%;
  left: -10%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 8.5s ease 4.5s infinite;
}

.c-snowfrake li:nth-child(7) {
  color: snow;
  font-size: 7px;
  position: fixed;
  top: -20%;
  left: -10%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 9s ease 5s infinite;
}

.c-snowfrake li:nth-child(8) {
  color: snow;
  font-size: 7.5px;
  position: fixed;
  top: 40%;
  left: -100%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 9.5s ease 6.5s infinite;
}

.c-snowfrake li:nth-child(9) {
  color: snow;
  font-size: 8px;
  position: fixed;
  top: -20%;
  left:  -10%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 10s ease 7s infinite;
}

.c-snowfrake li:nth-child(10) {
  color: snow;
  font-size: 8.5px;
  position: fixed;
  top: 50%;
  left:  -100%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 10.5s ease 8.5s infinite;
}

.c-snowfrake li:nth-child(11) {
  color: snow;
  font-size: 9px;
  position: fixed;
  top: -20%;
  left:  -10%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 12s ease 9s infinite;
}

.c-snowfrake li:nth-child(12) {
  color: snow;
  font-size: 9.5px;
  position: fixed;
  top: -20%;
  left: -30%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 12.5s ease 10.5s infinite;
}

.c-snowfrake li:nth-child(13) {
  color: snow;
  font-size: 10px;
  position: fixed;
  top: -20%;
  left:  -20%;
  text-shadow: 5vw -100px 2px white, 7vw -400px 3px white, 10vw -130px 5px white, 13vw -450px 10px white, 15vw -260px 7px white, 17vw -100px 0px white, 20vw -220px 7px white, 21vw -520px 2px white, 22vw -90px 5px white, 25vw -600px 2px white, 28vw -240px 6px white, 30vw -80px 4px white, 34vw -380px 5px white, 36vw -580px 0px white, 39vw -250px 6px white, 42vw -140px 3px white, 46vw -540px 5px white, 50vw -50px 2px white, 52vw -500px 4px white, 54vw -350px 6px white, 56vw -150px 1px white, 57vw -400px 5px white, 58vw -60px 8px white, 59vw -70px 5px white, 60vw -200px 1px white, 63vw -280px 4px white, 65vw -700px 2px white, 73vw -80px 6px white, 75vw -500px 5px white, 78vw -220px 4px white, 82vw -150px 0px white, 86vw -200px 7px white, 90vw -180px 3px white, 94vw -100px 1px white, 96vw -500px 10px white;
  animation: snowfrake 11s ease 12s infinite;
}

/* aniMation
---------------------*/
@keyframes opening {
  100% {
    opacity: 0.6;
  }
}
@keyframes snowfrake {
  100% {
    color: transparent;
    top: 150%;
	  left: 110%;
    transform: rotate(70deg);
  }
}