@charset "UTF-8";
.tab-night {
  background-color:#0b0c2a;
}
.tab-day {
  background-color:#87CEEB;
}

.moving-back {
  position: relative;
  height:100%;
  width:100%;
  overflow: hidden;
}
/*夜背景*/
.night-c {
background-color:#232B36;
background: linear-gradient(to bottom, #0b0c2a, #1e1f4b, #3c2a67, #5a3d85);
z-index: -1;
}
.night-active {
  background-color:#0b0c2a!important;
}

.sky {
  position: absolute;
  height:200vh;
  width:100%;
}

.star {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  animation: twinkle 1s infinite ease-in-out;
}

/* チカチカのアニメーション定義 */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
    filter: brightness(1) blur(0);
    background-color: white;
  }
  50% {
    opacity: 1;
    transform: scale(2); /* sparkle中に拡大 */
    filter: brightness(2.5) blur(2px);
    background-color: #ff0000; /* 柔らかい光色 */
  }
}

.star.sparkle {
  animation: sparkle 0.4s ease-in-out infinite;
}