body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, #131862, #546BAB); 
}

.sivusto {
  position: relative;
  width: 100%;
  height: 100%;
}

.taivas {
  position: absolute;
  top: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom, #131862, #546BAB); 
}

.kuu {
  position: absolute;
  top: 15%;
  left: -100px;
  width: 100px;
  height: 100px;
  background-color: #FFE100;
  border-radius: 50%;
  animation: kuu2 200s infinite linear;
  z-index:10;
}

@keyframes kuu2 {
  0% { left: -100px; top: 20%; }
  50% { left: 50%; top: 5%; }
  100% { left: 110%; top: 20%; }
}

.tahti {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: tahti2 5s infinite ease-in-out, tahtiliike 200s infinite linear; 
}

@keyframes tahti2 {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes tahtiliike {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 0); } 
}

.meri {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, #3F5A89 0%, #344863 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.homer {
  width: 200px;
  height: auto;
  transition: transform 0.3s ease, background-image 0.3s ease;
  cursor: pointer;
}

.homer.animate {
  animation: float 10s infinite ease-in-out;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.terveiset {
    position: absolute;
    bottom: 10%; 
    left: 50%;
    transform: translateX(-50%); 
    color: white; 
    font-size: 3vmin;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}


/* siittiö lentää taivaalla efekti by smaulee :DDDdd */

.meteoriitti {
	position: absolute;
	width: 4px; height: 4px;
	background-color: white;
	border-radius: 50%;
	animation: meteoriitinLiike 3s linear forwards;
}


.meteoriitti-haenta {
	position: absolute;
	width: 60px;height: 2px;
	background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
	transform-origin: left;
	animation: meteoriitinLiikeHaenta 3s linear forwards;
}

    
@keyframes meteoriitinLiike {
      0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
      }
      100% {
        transform: translateX(-100vw) translateY(50vh);
        opacity: 0;
      }
    }


@keyframes meteoriitinLiikeHaenta {
  0% {
    transform: translateX(0) translateY(0) rotate(-15deg) scaleX(1); 
    opacity: 1;
  }
  100% {
    transform: translateX(-100vw) translateY(50vh) rotate(-15deg) scaleX(0.3); 
    opacity: 0;
  }
}