@keyframes slideAnimation {

  from {
    transform: translatey(-300%); /* Start off-screen to the left */
  }
  to {
    transform: translatey(150); /* End at the element's original position */
  }
}
body{
  background-color: purple;
}
.sliding-element {
  display: block; /* or block, depending on your layout */
  width: 140px; /* Width of the element */
  height: 50px; /* Height of the element */
  background-color: #5236f4; /* Background color of the element */
  color: white; /* Text color */
  text-align: center; /* Align text in the center */
  line-height: 50px; /* Align text vertically */
  position: relative; /* Required for the translateX function to work correctly */
  animation-name: slideAnimation; /* Reference the name of your keyframes */
  animation-duration: 2s; /* Set the duration of one animation cycle */
  animation-timing-function: ease-out; /* Start fast and decelerate smoothly */
  animation-iteration-count: 1; /* Run the animation only once */
  transition: transform 1.5s ease;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.sliding-element:hover{
    transform: translatey(40px);
    background-color: rgb(179, 0, 255);  
}
h1{
    text-align: center;
    color: white;
    border: 2px solid black;
    padding: 10px;
    border-style:dashed;
}

a {
      color:white; /* Cambia el color del enlace */
      text-decoration: none; /* Opcional: quita el subrayado */
    }
a:hover {
      color: red; /* Color cuando pasas el mouse por encima */
    }
a:visited {
      color: purple; /* Color cuando el enlace ya fue visitado */
    }
    
.padre{ 
  border: solid black 5px; 
  border-radius: 20px; 
  display: flex; 
  justify-content: center; /* centra horizontal */ 
  align-items: center; /* centra vertical */ 
  height: 200px;
}
/* From Uiverse.io by csemszepp */