body {
    margin: 0;
    padding: 0;
    background-color: rgb(1, 10, 54);
}

[type="submit"]{
    background-color: #448fff;
    color: #ffffff;
    cursor: pointer;
    border: none;
    transition-duration: 0.4s;
    border-radius: 5px;
}
[type="submit"]:hover{
    background-color: #ffffff;
    color: black;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
[type="submit"]:selection{
    background-color: #003c96;
    color: white;
}
.contenedor {
    margin: 0px;
    padding: 0px;
    position: absolute;
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 20px rgb(255, 255, 255);
    width: 50%;
    height: 320px;
    border-radius: 4.5% 4.5% 4.5% 4.5%;

}
.logo {
    background-image: url(../img/logopng.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0px;
    padding: 0px;
    width: 50%;
    height: 100%;
    float: left;
    border-radius: 5% 0% 0% 5%;
}

.login {
    margin: 0px;
    padding: 0px;
    width: 50%;
    height: 100%;
    float: left;
    background-color: rgb(0, 60, 255);
    text-align: center;
    font-size: 120%;
    color: white;
    border-radius: 0% 5% 5% 0%;
}

.login h2 {
    color: white;
    font-size: 150%;
}

h3 {
    text-align: center;
    color: rgb(255, 255, 255);
}

input {
    width: 60%;
    padding: 6px;
    font-family: 'Montserrat', seans-serif;
    font-size: 80%;
    text-align: center;
}

[type="text"], [type="password"]{
    border: 3px solid #0066ff;
}
[type="text"]:focus { 
    outline: none;
}
[type="password"]:focus{
    outline: none;
}
@media screen and (max-width: 1920px) {
    .contenedor {
        margin: 0px;
        padding: 0px;
        position: absolute;
        background-color: white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 10px 20px rgb(255, 255, 255);
        width: 50%;
        height: 320px;
        border-radius: 4.5% 4.5% 4.5% 4.5%;
    
    }
    .logo {
        background-image: url(../img/logopng.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin: 0px;
        padding: 0px;
        width: 50%;
        height: 100%;
        float: left;
        border-radius: 5% 0% 0% 5%;
    }
    
    .login {
        margin: 0px;
        padding: 0px;
        width: 50%;
        height: 100%;
        float: left;
        background-color: rgb(0, 60, 255);
        text-align: center;
        font-size: 120%;
        color: white;
        border-radius: 0% 5% 5% 0%;
    }
    
    .login h2 {
        color: white;
        font-size: 150%;
    }
    
    h3 {
        text-align: center;
        color: rgb(255, 255, 255);
    }
    
    input {
        width: 60%;
        padding: 6px;
        font-family: 'Montserrat', seans-serif;
        font-size: 80%;
        text-align: center;
    }
    
    [type="text"], [type="password"]{
        border: 3px solid #0066ff;
    }
}
@media screen and (max-width: 1280px) {
    .contenedor {
        margin: 0px;
        padding: 0px;
        position: absolute;
        background-color: white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 10px 20px rgb(255, 255, 255);
        width: 50%;
        height: 320px;
        border-radius: 4.5% 4.5% 4.5% 4.5%;
    
    }
    .logo {
        background-image: url(../img/logopng.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin: 0px;
        padding: 0px;
        width: 50%;
        height: 100%;
        float: left;
        border-radius: 5% 0% 0% 5%;
    }
    
    .login {
        margin: 0px;
        padding: 0px;
        width: 50%;
        height: 100%;
        float: left;
        background-color: rgb(0, 60, 255);
        text-align: center;
        font-size: 120%;
        color: white;
        border-radius: 0% 5% 5% 0%;
    }
    
    .login h2 {
        color: white;
        font-size: 150%;
    }
    
    h3 {
        text-align: center;
        color: rgb(255, 255, 255);
    }
    
    input {
        width: 60%;
        padding: 6px;
        font-family: 'Montserrat', seans-serif;
        font-size: 80%;
        text-align: center;
    }
    
    [type="text"], [type="password"]{
        border: 3px solid #0066ff;
    }
}
@media screen and (max-width: 1024px) {
    .contenedor {
        margin: 0px;
        padding: 0px;
        position: absolute;
        background-color: white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 10px 20px rgb(255, 255, 255);
        width: 50%;
        height: 320px;
        border-radius: 4.5% 4.5% 4.5% 4.5%;
    
    }
    .logo {
        background-image: url(../img/logopng.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin: 0px;
        padding: 0px;
        width: 50%;
        height: 100%;
        float: left;
        border-radius: 5% 0% 0% 5%;
    }
    
    .login {
        margin: 0px;
        padding: 0px;
        width: 50%;
        height: 100%;
        float: left;
        background-color: rgb(0, 60, 255);
        text-align: center;
        font-size: 120%;
        color: white;
        border-radius: 0% 5% 5% 0%;
    }
    
    .login h2 {
        color: white;
        font-size: 150%;
    }
    
    h3 {
        text-align: center;
        color: rgb(255, 255, 255);
    }
    
    input {
        width: 60%;
        padding: 6px;
        font-family: 'Montserrat', seans-serif;
        font-size: 80%;
        text-align: center;
    }
    
    [type="text"], [type="password"]{
        border: 3px solid #0066ff;
    }
}
@media screen and (max-width: 768px) {
    .contenedor {
        margin: 0px;
        padding: 0px;
        position: absolute;
        background-color: white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 10px 20px rgb(255, 255, 255);
        width: 50%;
        height: 300px;
        border-radius: 4.5% 4.5% 4.5% 4.5%;
    
    }
    .logo {
        display: none;
    }
    
    .login {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        float: left;
        background-color: rgb(0, 60, 255);
        text-align: center;
        font-size: 120%;
        color: white;
        border-radius: 5%;
    }
    
    .login h2 {
        color: white;
        font-size: 150%;
    }
    
    h3 {
        text-align: center;
        color: rgb(255, 255, 255);
    }
    
    input {
        width: 60%;
        padding: 6px;
        font-family: 'Montserrat', seans-serif;
        font-size: 80%;
        text-align: center;
    }
    
    [type="text"], [type="password"]{
        border: 3px solid #0066ff;
    }
}
@media screen and (max-width: 480px) {
    .contenedor {
        margin: 0px;
        padding: 0px;
        position: absolute;
        background-color: white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 10px 20px rgb(255, 255, 255);
        width: 50%;
        height: 280px;
        border-radius: 4.5% 4.5% 4.5% 4.5%;
    
    }
    .logo {
        display: none;
    }
    
    .login {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        float: left;
        background-color: rgb(0, 60, 255);
        text-align: center;
        font-size: 110%;
        color: white;
        border-radius: 5%;
    }
    
    .login h2 {
        color: white;
        font-size: 125%;
    }
    
    h3 {
        text-align: center;
        color: rgb(255, 255, 255);
        font-size: 15px;
    }
    
    input {
        width: 60%;
        padding: 6px;
        font-family: 'Montserrat', seans-serif;
        font-size: 80%;
        text-align: center;
    }
    
    [type="text"], [type="password"]{
        border: 3px solid #0066ff;
    }
}
@media screen and (max-width: 320px) {
    .contenedor {
        margin: 0px;
        padding: 0px;
        position: absolute;
        background-color: white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 10px 20px rgb(255, 255, 255);
        width: 50%;
        height: 250px;
        border-radius: 4.5% 4.5% 4.5% 4.5%;
    
    }
    .logo {
        display: none;
    }
    
    .login {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        float: left;
        background-color: rgb(0, 60, 255);
        text-align: center;
        font-size: 110%;
        color: white;
        border-radius: 5%;
    }
    
    .login h2 {
        color: white;
        font-size: 125%;
    }
    
    h3 {
        text-align: center;
        color: rgb(255, 255, 255);
        font-size: 15px;
    }
    
    input {
        width: 60%;
        padding: 6px;
        font-family: 'Montserrat', seans-serif;
        font-size: 80%;
        text-align: center;
    }
    
    [type="text"], [type="password"]{
        border: 3px solid #0066ff;
    }
}