body{
  font-family: Arial, sans-serif;
}
h2{
  font-family: 'Roboto', sans-serif;
}

.Saludos, .Saludos a{
    background-color: none;
    text-align: center;
    color: white;
    text-decoration: none;
}
.Saludos a:hover{
    text-decoration: none;
}

body {
  background: hsla(0, 0%, 0%, .9); 
}

h1 {
  color: hsla(0, 0%, 0%, .9);
  font: normal 170px 'Roboto', sans-serif;
  height: 120px;
  left: 0;
  letter-spacing: 5px;
  margin: -80px 0 0 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  margin-top: 0px;
  top: 50%;
  width: 100%;
  animation: move linear 2000ms infinite;  
  z-index: -1;
}

@media (max-width: 470px) {
  h1 {
    font: normal 100px 'Roboto', sans-serif;
    height: auto;
    margin-top: 20px;
  }
  
}

.Saludos {
  align-self: center;
  width: 300px;
  position: absolute;
  top: 30vh;
  left: 50%;
  transform: translateX(-50%); /* Corrige la posición horizontal */
}



body,html{
  width:100%;
  height: 100%;
}

.bubbles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  top: 0;
  left: 0;
}

.bubble {
  position: absolute;
  bottom: -100px;
  background: #4680c2;
  border-radius: 50%;
  opacity: 0.5;
  animation: rise 12s infinite ease-in;
}

.bubble:nth-child(1) {
  width: 40px;
  height: 40px;
  left: 10%;
  animation-duration: 13s; 
  animation-delay: 0s; 
}

.bubble:nth-child(2) {
  width: 20px;
  height: 20px;
  left: 20%;
  animation-duration: 8s; 
  animation-delay: 0.5s; 
}

.bubble:nth-child(3) {
  width: 50px;
  height: 50px;
  left: 35%;
  animation-duration: 11s; 
  animation-delay: 1s; 
}

.bubble:nth-child(4) {
  width: 80px;
  height: 80px;
  left: 50%;
  animation-duration: 17s; 
  animation-delay: 1.5s; 
}

.bubble:nth-child(5) {
  width: 35px;
  height: 35px;
  left: 55%;
  animation-duration: 10s; 
  animation-delay: 2s; 
}

.bubble:nth-child(6) {
  width: 45px;
  height: 45px;
  left: 65%;
  animation-duration: 10s; 
  animation-delay: 2.5s; 
}

.bubble:nth-child(7) {
  width: 90px;
  height: 90px;
  left: 70%;
  animation-duration: 19s; 
  animation-delay: 3s; 
}

.bubble:nth-child(8) {
  width: 25px;
  height: 25px;
  left: 80%;
  animation-duration: 9s; 
  animation-delay: 3.5s; 
}

.bubble:nth-child(9) {
  width: 50px;
  height: 50px;
  left: 70%;
  animation-duration: 14s; 
  animation-delay: 4s; 
}

.bubble:nth-child(10) {
  width: 90px;
  height: 90px;
  left: 25%;
  animation-duration: 19s; 
  animation-delay: 4.5s; 
}

@keyframes rise{
  0%{
    bottom:-100px;
    transform:translateX(0);
  }
  50%{
    transform:translate(100px);
  }
  100%{
    bottom:1080px;
    transform:translateX(-200px);
  }

}
.respiro{
  padding: 250px 0px;
}