/*Selectores html*/
* {
          font-family: 'Roboto', sans-serif;
}
body {
          background: #000428;  /* fallback for old browsers */
          background: -webkit-linear-gradient(to right, #004e92, #000428);  
          background: linear-gradient(to right, #004e92, #000428); 
}
form {
          width: 60%;
          margin: 0 auto;
}
h1 {
          margin: 19px auto auto auto;
}
/*Selectores CLASS ID*/
.registro {
          display: grid;
          grid-template-columns: 30% 1fr 30%;
          grid-template-rows: 15% 85%;
          height: 650px;
}

.titulo {
          text-align: center;
          font-size: 1.4rem;
          color: white;
          grid-column: 2 / 3;
}
.contenido {
          display: grid;
          background-color: white;
          grid-column: 2 / 3;
          grid-row: 2 / 3;
          border-radius: 2rem;
          align-content: center;
}
.input {
          margin-bottom: 2rem;
}
.input label {
          font-size: 1rem;
          letter-spacing: 2.5px;
}
.submit {
          text-align: center;
}
.submit input {
          width: 140px;
          height: 45px;
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 2.5px;
          font-weight: 500;
          color: #000;
          background-color: #fff;
          border: 1px solid #004e92;
          border-radius: 45px;
          box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease 0s;
          cursor: pointer;
          outline: none;
}
.submit input:hover {
          background-color: #004e92;
          box-shadow: 0px 15px 20px rgba(12, 36, 97, 0.4);
          color: #fff;
          transform: translateY(-5px);
}
a {
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 2.5px;
          font-weight: 500;
          color: #000;
          display: none;
          padding: 1rem;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #004e92;
          border-radius: 45px;
          box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease 0s;
}
a:hover {
          background-color: #004e92;
          box-shadow: 0px 15px 20px rgba(12, 36, 97, 0.4);
          color: #fff;
          transform: translateY(-5px);
}
.input input {
          margin-top: .5rem;
          border: 1px solid #95a5a6;
          outline: none;
          letter-spacing: 2.5px;
          border-radius: .3rem;
          width: 87%;
          padding: .5rem 1rem .5rem 1rem;
          transition-property: border-bottom;
          transition-duration: .1s;
          transition-timing-function: ease-in-out;
}
.input input:focus {
          border-bottom: 3px solid #004e92;
}
.parrafo-completado {
          border: 1px solid #004e92;
          color: #004e92;
          background-color: #74b9ff;
          padding: 8px 10px 8px 10px;
          margin: 1rem 0 1rem 0;
          letter-spacing: 2.5px;
}
.input-con-icono {
          position: relative;
}
.fa-eye {
          display: none;
}
.input-con-icono .fa-eye-slash {
          position: absolute;
          cursor: pointer;
          top: 20px;
          right: 20px;
          color: #273c75;
}
.input-con-icono .fa-eye {
          position: absolute;
          cursor: pointer;
          top: 20px;
          right: 21px;
          color: #273c75;
}
@media screen and (max-width:1060px) {
          .registro {
                    grid-template-columns: 25% 1fr 25%;
          }
          .input-con-icono .fa-eye-slash {
                    right: 15px;
          }
          .input-con-icono .fa-eye {
                    right: 16px;
          }
}
@media screen and (max-width: 713px) {
          .registro {
                    grid-template-columns: 20% 1fr 20%;
          }
          .input-con-icono .fa-eye-slash {
                    right: 9px;
          }
          .input-con-icono .fa-eye {
                    right: 10px;
          }
}
@media screen and (max-width: 594px) {
          .registro {
                    grid-template-columns: 10% 1fr 10%;
          }
          .input-con-icono .fa-eye-slash {
                    right: 4px;
          }
          .input-con-icono .fa-eye {
                    right: 5px;
          }
}
@media screen and (min-height: 1000px) {
    .registro {
        height: 95vh;
    }
}