body {
  margin: 0;
  padding: 0;
}




.text {
  color: #fff;
  position: absolute;
  /* top: 200px; */
  display: flex;
  justify-content: center;
  margin: auto;
  width: 100%;
  font-size: 6.5rem;
  font-family: Lobster;
  font-style: normal;
  top: 70px;
}

/*adding background to section
and animation named color-change*/
section {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(https://batuhanfidan.com/bg.png);
  background-size: cover;
  background-position: center;
/*  animation: color-change 10s linear infinite; 
  animation-delay: 1s; */
}
/*adding rain img and making opacity 0*/
section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://batuhanfidan.com/rain-300x300.png);
  /* animation: rain 0.9s linear infinite; */
  opacity: 0;
}
/* just changing the position of image
of rain using keyframes*/
@keyframes rain {
  0% {
    background-position: 0 0;
    opacity: 1;
  }

  100% {
    background-position: 8% 80%;
    opacity: 1;
  }
}
/* applying filter at different angle
on diffrent interval using keyframe*/
@keyframes color-change {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@media only screen and (max-width: 500px) {
  .text {
  	top: 130px;
    font-size: 2.8125rem;
    font-family: Lobster;
  }
}