html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  padding: 0%;
  margin: 0%;
  background: linear-gradient(to right, white, #999999);
}

#main {
  margin-top: 1%;
  padding-bottom: 10%;
}

#logo h1 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding-bottom: 20px;
}

.animation {
  animation: slide-up 1s ease-in-out; /* Añadir animación */
}

@keyframes slide-up {
  from {
      transform: translateY(50px); /* Inicio de la animación, puede ajustarse según sea necesario */
      opacity: 0;
  }
  to {
      transform: translateY(0); /* Fin de la animación */
      opacity: 1;
  }
}

#motto {
  padding-bottom: 4%;
  padding-top: 3%;

}

#motto p{
  font-size: 24px;
  padding-bottom: 3%;
}

#motto #p1imgen {
  width: 100%;
  
}

#motto img {
  width: 90%;
  border-radius: 15px;
  box-shadow:
  0 0 10px rgba(0, 153, 255, 0.6),
  0 0 20px rgba(0, 153, 255, 0.5),
  0 0 40px rgba(0, 153, 255, 0.4),
  0 0 80px rgba(0, 153, 255, 0.3);
  margin: 15px 0;
  transition: transform 0.8s, box-shadow 0.8s;
  align-content: center !important;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.shake-now {
  animation: shake 0.6s;
}

#comentarios {
  width: 100%;
  flex-direction: column;
  margin-top: 136px;
  padding-bottom: 4%;
}

.link-img {
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.link-img:hover img {
  transform: scale(0.9);
}

.link-img img {
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .link-img {
    width: 90%;
  }
}