.contenedor {
  border-color: grey;
  padding: 20px;
  margin: auto;
  align-items: center;
  max-width: 400px;
}

.contenedorb {
  border-color: grey;
  padding: 20px;
  margin: auto;
  align-items: center;
  max-width: 400px;
}

.npunto {
  width: 100%;
  background-color: white;
  margin: 5px;
  text-align: center;
  padding: 20px;
  color: rgb(48, 48, 48);
  cursor: pointer;
}

input[type="text"], input[type="password"] {
  border: none;
  border-bottom: solid grey 1px;
  width: 100%;
  height: 30px;
  outline: none;
  color: white;
  background-color: transparent;
}
input {
  margin-bottom: 20px;
}

.rowh-100 {
  height: 100vh;
}

.col-centrada {
  color: rgb(196, 196, 196);
  display: flex;
  background: linear-gradient(114deg, rgb(39 35 83) 50%, rgb(45 42 95));
}

.mensaje {
  padding-top: 20px;
  align-items: center;
  text-align: center;
  background-image: url("../img/back_loguin.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.astronauta {
  animation: flotar 5s infinite alternate;
  /* Otros estilos para la imagen (por ejemplo, tamaño, posición, etc.) */
}

@keyframes flotar {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

.img-vibrante {
  animation: vibrar 2s infinite;
}

/* Define la animación */
@keyframes vibrar {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px) rotate(10deg);
  }
  50% {
    transform: translateX(5px) rotate(-10deg);
  }
  70% {
    transform: translateX(-5px) rotate(5deg);
  }
  100% {
    transform: translateX(5px) rotate(-5deg);
  }
}