body {
  margin: 0;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 20px;
  color: #faf4f4;
}

.solid {
  width: 100%;
  height: 50px;
  background-color: aqua;
  border-bottom: 15px solid #000;
  position: absolute;
  top: -50px;
  transition: top 1s ease-in-out;
  animation: render 5s ease-in-out infinite;
}
 
.solid p {
  text-align: center;  
}

.solid:hover {
  top: 0;
}

@keyframes render {
  0%{
    background-color: rgb(0, 255, 34);
  }
  25%{
    background-color: #0766f5;    
  }
  50%{
    background-color: rgb(183, 0, 255);
  }
  75%{
    background-color: #fc0442;
  }
  100%{
    background-color: rgb(255, 187, 0);
  }
}

h1 {
  text-align: center;
  font-style: italic; 
  text-shadow:#077eb6 1px 1px 1px;
  font-size: 80px;
  color: rgba(156, 154, 154, 0.801);
  background-image: "img/Облака.jpg";
}

h3 {
  text-align: center;
  font-style: oblique; 
  font-size: 30px;
  color: rgba(5, 5, 5, 0.801);
  background-image: "img/Облака.jpg";
}

p {
  text-align: left;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 16px;
  margin-left: 50px; 
  color: rgb(255, 255, 255);
  background-image: "img/Облака.jpg";
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {    /* Анимация бегушей строки */
  from {
    translate: 150vw 0;
    scale: 200% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

img {
  width: 100%;
  color: rgba(0, 0, 0, 0.801);
  border-style: solid;
}

.container {
  width: 780px;
  margin: 2px auto;
}

.rain {
	position: fixed;
	width: 2px; /* Ширина капли */
	height: 5px; /* Высота капли */
	top: -3px;
	background-color: #fff; /* Цвет капли */
	animation: rain 2.0s linear infinite;
	z-index: 99;
	border-radius: 1px;
}

@keyframes rain {
	to {
		transform: translate3d(200px, 1000px, 0); /* Первое значение (200px) это направление дождя, где: 0 - вниз, положительное число - вправо, отрицательное - влево */
	}
}