.estilos-login {
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
     background: linear-gradient(14deg, rgba(2, 0, 36, 0.8) 0%, rgba(24, 24, 65, 0.7) 66%,
             rgb(20, 76, 99) 100%), radial-gradient(circle, rgba(2, 0, 36, 0.5) 0%,
             rgba(32, 15, 53, 0.2) 65%, rgba(14, 29, 28, 0.9) 100%);
 }

 .formulario-login {
   z-index: 2;
 }	

 .logo-login {
     width: 100px;
     height: 100px;
 }

 .color-texto {
     color: #001233a8;
 }

 ::selection {
     background-color: #0077cc;
     color: white;
 }

 .container {
     margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }

 .form {
     width: 100%;
     max-width: 700px;
     height: auto;
     padding: 2rem;
     display: flex;
     align-items: center;
     flex-direction: column;
     border-radius: 0.5rem;
 }

 .title {
     color: white;
     margin: 1rem 0;
     font-size: 2rem;
 }

 .input {
     margin: 0.5rem 0;
     padding: 1rem 0.5rem;
     width: 100%;
     background-color: inherit;
     color: wheat;
     border: none;
     outline: none;
     border-bottom: 1px solid wheat;
     transition: all 400ms;
 }

 .input:hover {
     background-color: rgba(0, 18, 51, 0.66);
     border: none;
     border-radius: 0.5rem;
 }

 .btn {
     height: 3rem;
     width: 100%;
     margin-top: 3rem;
     background-color: wheat;
     border-radius: 0.5rem;
     border: none;
     font-size: 1.2rem;
     transition: all 400ms;
     cursor: pointer;
     box-shadow:
         0 0 10px antiquewhite,
         0 0 10px antiquewhite;
 }

 .btn:hover {
     background-color: antiquewhite;
     box-shadow: none;
 }

 /*---------ANIMACION DE ESTRELLAS-----------*/

 .bg-stars {
     position: absolute;
     top: 0;
     left: 0;
     width: 80%;
     height: 80%;
     z-index: 1;
     background-size: cover;
     animation: animateBg 50s linear infinite;
     overflow: hidden;
 }

 @keyframes animateBg {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.2);
     }
 }

 .star {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 4px;
     height: 4px;
     background: #fff;
     border-radius: 50%;
     box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.1);
     animation: animate 3s linear infinite;
 }

 .star::before {
     content: '';
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 300px;
     height: 1px;
     background: linear-gradient(90deg, #fff, transparent);
 }

 @keyframes animate {
     0% {
         transform: rotate(315deg) translateX(0);
         opacity: 1;
     }

     70% {
         opacity: 1;
     }

     100% {
         transform: rotate(315deg) translateX(-1000px);
         opacity: 0;
     }
 }

 .star:nth-child(1) {
     top: 0;
     right: 0;
     left: initial;
     animation-delay: 0s;
     animation-duration: 1s;
 }

 .star:nth-child(2) {
     top: 0;
     right: 100px;
     left: initial;
     animation-delay: 0.2s;
     animation-duration: 3s;
 }

 .star:nth-child(3) {
     top: 0;
     right: 220px;
     left: initial;
     animation-delay: 2.75s;
     animation-duration: 2.75s;
 }

 .star:nth-child(4) {
     top: 0;
     right: -220px;
     left: initial;
     animation-delay: 1.6s;
     animation-duration: 1.6s;
 }

 /**********END / ANIMACION DE ESTRELLAS******************/

 /*RESPONSIVE*/
 @media (min-width: 328px) {
     .form {
         width: 100%;
         max-width: 700px;

     }

     .input {
         width: 20rem;
     }

     .btn {
         width: 20rem;
     }
 }