html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #222; */
}

body {
  display: flex;
} 

* {
  font-family: "Jura", sans-serif;
  letter-spacing: 1.5px;
  position: relative;
}

.weather_box:hover .bottom {
  height: 120px;
}
.weather_box:hover .day_weather {
  opacity: 1;
  top: 0;
}
.weather_box:hover .day_weather:nth-child(1) {
  transition-delay: 0.2s;
}
.weather_box:hover .day_weather:nth-child(2) {
  transition-delay: 0.4s;
}
.weather_box:hover .day_weather:nth-child(3) {
  transition-delay: 0.6s;
}
.weather_box:hover .day_weather:nth-child(4) {
  transition-delay: 0.8s;
}
.weather_box:hover .day_weather:nth-child(5) {
  transition-delay: 1s;
}
.weather_box:hover .day_weather:nth-child(6) {
  transition-delay: 1.2s;
}
.weather_box:hover .day_weather:nth-child(7) {
  transition-delay: 1.4s;
}

label {
  cursor: pointer;
}

#switch {
  display: none;
}

#switch:checked + .top {
  animation: background_rainy 4s linear;
  animation-fill-mode: forwards;
}
@keyframes background_rainy {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 100% 400%;
  }
}
#switch:checked + .top .cloud_rain {
  top: 5px;
  right: 420px;
}
#switch:checked + .top .top_sun {
  opacity: 0.1;
}
#switch:checked + .top .top_rain {
  animation: top_rainy 1s infinite linear;
}
@keyframes top_rainy {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(250px);
  }
}
#switch:checked + .top .top_rain_1 {
  top: -30px;
  left: 70px;
  animation-delay: -0.4s;
}
#switch:checked + .top .top_rain_2 {
  top: -30px;
  left: 150px;
  animation-delay: -0.7s;
}
#switch:checked + .top .top_rain_3 {
  top: -30px;
  left: 190px;
  animation-delay: -0.2s;
}
#switch:checked + .top .top_rain_4 {
  top: -30px;
  left: 250px;
  animation-delay: -0.5s;
}
#switch:checked + .top .top_rain_5 {
  top: -30px;
  left: 370px;
  animation-delay: -0.9s;
}
#switch:checked + .top .top_rain_6 {
  top: -30px;
  left: 450px;
  animation-delay: -0.3s;
}

.weather_box {
  /* width: 490px; */
  width: 99%;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(34, 34, 34, 0.3);
  overflow: hidden;
}

/* .top {
  height: 900px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #243949 20%, #EDF7FF 80%);
  background-size: 100% 200%;
  animation: background_color 4s;
  animation-fill-mode: forwards;
} */

.top {
  height: 900px;
  border-radius: 20px 20px 0 0;
  /* background-size: 100% 200%; */
  /* この行を追加 */
  /* min-height: 100vh;  */

   /* ビューポートの高さに合わせてグラデーションを伸びるように変更 */
   background-size: cover; /* 背景画像のサイズをビューポートに合わせる */
   background-attachment: fixed; /* 背景画像を固定する */
   background-position: center; /* 背景画像の位置を中央に設定 */


  animation: background_color 4s;
  animation-fill-mode: forwards;
}

.day {
  background: linear-gradient(180deg, #243949 -100%, #EDF7FF 80%);
  
}

.night {
  background: linear-gradient(180deg, #243949 40%, #EDF7FF 80%);
}

@media (max-width: 768px) {
 
  .top {
    height: 100vh; /* モバイルデバイスでの高さを100vhに設定 */
   



  }
  .day {
    background: linear-gradient(180deg, #243949 -100%, #EDF7FF 80%);
  }

  .night {
    background: linear-gradient(180deg, #243949 50%, #EDF7FF 80%);
    
  }
}



@keyframes background_color {
  0% {
    background-size: 100% 400%;
  }
  100% {
    background-size: 100% 100%;
  }
}
.top .top_rain {
  width: 1px;
  height: 20px;
  background-color: #BFDBF2;
  opacity: 0.1;
  border-radius: 2px;
  position: absolute;
  top: -30px;
  left: 30px;
}
.top .top_content {
  z-index: 255; /* 任意の数値を設定してください */
  position: absolute;
  /* top: 30px; */
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFF8E7;

}
.top .tem {
  font-size: 90px;
}
.top .deg {
  font-size: 70px;
  position: absolute;
  left: 120px;
}
.top .city {
  font-size: 16px;
  margin: 10px 0 0 0;
}
.top .date {
  font-size: 12px;
  margin: 5px 0 0 0;
}
.top .cloud_rain {
  position: absolute;
  top: 10px;
  right: -200px;
  transform: scale(0.3);
  opacity: 0.4;
  transition: 10s;
}
.top .cloud_left {
  position: absolute;
  top: 50px;
  left: -130px;
  transform: scale(0.25);
  opacity: 0.6;
  animation: cloud_move_left 5s;
  animation-fill-mode: forwards;
  animation-delay: 6s;
}
@keyframes cloud_move_left {
  0% {
    top: 50px;
    left: -130px;
  }
  100% {
    top: 50px;
    left: -100px;
  }
}
.top .top_sun {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 60px;
  right: -100px;
  transition: 6s;
  animation: sun_move 8s;
  animation-fill-mode: forwards;
}
@keyframes sun_move {
  0% {
    top: 250px;
    right: -100px;
  }
  100% {
    top: 90px;
    right: 350px;
  }
}
.top .wrapper_cloud_slender {
  transform: scale(0.3);
  opacity: 0.7;
  position: absolute;
  top: 50px;
  right: 180px;
  animation: cloud_slender_drop 6s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}
@keyframes cloud_slender_drop {
  0% {
    top: 50px;
    right: 180px;
  }
  100% {
    top: 50px;
    right: 260px;
  }
}
.top #cloud_circle {
  width: 500px;
  height: 100px;
  border-radius: 50%;
  filter: url(#filter);
  box-shadow: 400px 400px 60px 0px #fff;
  position: absolute;
  top: -320px;
  left: -320px;
}
.top .picture_1 {
  width: 100%;
  position: absolute;
  /* bottom: 250px; */
  bottom: -430px;
}
@media (max-width: 600px) {
  .top .picture_1 {
    width: 100%;
    bottom: 300px;
    position: absolute;
  }
}

.bottom {
  display: flex;
  border-radius: 0 0 20px 20px;
  background-color: #EDF7FF;
  height: 0;
  transition-duration: 0.8s;
}
.bottom .day_weather {
  width: 70px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 0 0 0;
  opacity: 0;
  top: -15px;
  transition: 0.5s;
}
.bottom h3 {
  font-size: 10px;
  font-weight: 400;
  color: #616161;
}
.bottom svg {
  width: 40px;
  height: 40px;
}

.wrapper_cloud {
  transform: scale(0.1);
  position: absolute;
  top: 25px;
  right: 47px;
}

.cloud {
  width: 500px;
  height: 275px;
  border-radius: 50%;
  position: absolute;
  top: -35vh;
  left: -25vw;
  animation: cloud_drop 2s infinite;
}

#cloud_back {
  filter: url(#filter-back);
  box-shadow: 300px 300px 30px -20px #F0F0F0;
}

#cloud_mid {
  filter: url(#filter-mid);
  box-shadow: 300px 340px 70px -60px rgba(158, 168, 179, 0.5);
  left: -25vw;
  opacity: 1;
}

#cloud_front {
  filter: url(#filter-front);
  box-shadow: 300px 370px 60px -100px rgba(0, 0, 0, 0.3);
  left: -25vw;
  opacity: 1;
}

.sun {
  background-color: #fed400;
  opacity: 0.6;
  box-shadow: 0 0 30px 10px #fed400;
  border-radius: 50%;
}

.bottom_sun {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50px;
  left: 20px;
  opacity: 0.9;
  box-shadow: 0 0 10px 3px #fed400;
  animation: sun 3s infinite;
}

@keyframes sun {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}
.cloud_sun {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 45px;
  left: 37px;
  opacity: 0.9;
  box-shadow: 0 0 10px 3px #fed400;
  animation: sun 3s infinite;
}

.rain {
  width: 1px;
  height: 8px;
  background-color: #00CFFF;
  border-radius: 1px;
  opacity: 0.3;
  position: absolute;
  right: 15px;
  top: 20px;
  animation: rain_drop 1s infinite linear;
}

.rain2 {
  right: 5px;
  top: 20px;
  animation-delay: -0.4s;
}

.rain3 {
  right: -10px;
  top: 20kpx;
  animation-delay: -0.7s;
}

.rain4 {
  right: -15px;
  top: 30px;
  animation-delay: -1.2s;
}

@keyframes rain_drop {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(30px);
  }
}
@keyframes cloud_drop {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}