:root{
    --login:#007777;
    --fondo: rgb(255, 255, 255);
    --letras:  rgb(255, 255, 255);
    --fallo_login: rgb(228, 189, 13);
}


*{
    padding: 0%;
    margin: 0%;
    box-sizing: content-box;
}
body{
    background-color: var(--fondo);
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;

}
.imglogin{
    height: 40vw;
}

.login{
    
    /* position: absolute; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--login);
    text-align: center;
    color: var(--letras);
    border: 0.3vh solid black;
}

form{
    box-sizing: content-box;
    width: 80%;
    height: 90%
}
#contenido{
    display: flex;
    flex-flow: column nowrap;
    box-sizing: content-box;
    justify-content: space-around;
}
#contenido > div{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--fallo_login);
}






/*vertical maximo 1000px*/
@media (max-width: 1000px) and (orientation: portrait){
    .login{
        min-width: 20vmax;
        max-width: 40vmax;
        width: 60vw;
        height: 40vh;
        /* left: 20vw;
        top: 25vh; */
        border: 0.3vh;
        border-radius: 2vh;
        font-size: 3.5vh;
        border: 0.3vh solid black;
    }

    #contenido{
        width: 100%;
        height: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }
    #contenido > div{
        max-height: 5vh;
        font-size: 2vh;
    }
    input{
        height: 3vh;
        border-radius: 1vh;
        padding: 0.5vh;
        padding-left: 1.5vh;
        padding-right: 1.5vh;
        font-size: 2vh;
    }
    input[type="submit"]{
        height: 4vh;
        font-size: 2vh;
    }
}
/*horizontal maximo 1000px*/
@media (max-width: 1000px) and (orientation: landscape){
    .login{
        min-height: 30vmax;
        max-height: 40vmax;
        width: 40vw;
        height: 60vh;
        /* left: 30vw;
        top: 20vh; */
        border: 0.3vw;
        border-radius: 2vw;
        font-size: 3.5vw;
        border: 0.3vw solid black;
    }
    #contenido{
        width: 100%;
        height: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }
    #contenido > div{
        max-height: 5vw;
        font-size: 2vw;
    }
    input{
        height: 3vw;
        border-radius: 1vw;
        padding: 0.5vW;
        padding-left: 1.5vW;
        padding-right: 1.5vW;
        font-size: 2vw;
    }
    input[type="submit"]{
        height: 4vw;
        font-size: 2vw;
    }
}


/*vertical maximo 1023 no funciona no entra*/
@media screen and (max-width:1023) and (orientation: portrait){
    .login{
        width: 50vw;
        height: 60vh;
        /* left: 25vw;
        top: 20vh; */
        border: 0.3vh;
        border-radius: 2vh;
        font-size: 3.5vh;
        border: 0.3vh solid black;
        background-color: rgb(27, 206, 81);
    }
    #contenido{
        width: 100%;
        height: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }
    #contenido > div{
        max-height: 2.5vh;
        font-size: 2vh;
    }
    input{
        height: 3vh;
        border-radius: 0.1vh;
        padding: 0.5vW;
        padding-left: 1.5vh;
        padding-right: 1.5vh;
        font-size: 1vh;
    }
    input[type="submit"]{
        height: 4vh;
        font-size: 2vh;
    }
} 
/*horizontal pantalla mas pequeña 1001px*/
@media screen and (min-width: 1001px) and (orientation: landscape){
    .login{
        min-height: 30vmax;
        max-width: 40vmin; 
        min-width: 20vmax;
        /* width: 30vw;
        height: 30vh; */
        /* left: 30vw;
        top: 25vh; */
        border: 0.3vw;
        border-radius: 2vw;
        font-size: 3.5vw;
        border: 0.3vw solid black;
    }
    #contenido{
        width: 100%;
        height: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }
    #contenido > div{
        max-height: 2.5vw;
        font-size: 2vw;
    }

    input{
        height: 2.5vw;
        border-radius: 1vw;
        padding: 1vw;
        padding: 0.5vW;
        padding-left: 1.5vW;
        padding-right: 1.5vW;
        font-size: 1.5vw;
    }
    
    input[type="submit"]{
        height: 4vw;
        font-size: 2vw;
    }
}


/*vertical por encima de 1024px*/
@media screen and (min-width: 1024px) and (orientation: portrait){
    .login{
        width: 40vw;
        height: 30vh;
        /* left: 30vw;
        top: 30vh; */
        border: 0.3vh;
        border-radius: 2vh;
        font-size: 2.5vh;
        border: 0.3vh solid black;
    }
    #contenido{
        width: 100%;
        height: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }
    #contenido > div{
        max-height: 3vh;
        font-size: 1.5vh;
    }

    input{
        height: 2.5vh;
        border-radius: 0.5vh;
        padding: 0.5vW;
        padding-left: 1.5vW;
        padding-right: 1.5vW;
        font-size: 1.5vh;
    }
    input[type="submit"]{
        height: 3vh;
        font-size: 2vh;
    }
} 


/*horizontal por encima de 1025px*/
@media screen and (min-width: 1025px) and (orientation: landscape){
    .login{
        width: 33vw;
        height: 40vh;
        /* left: 33vw;
        top: 20vh; */
        border: 0.3vw;
        border-radius: 2.5vw;
        font-size: 2.5vw;
        border: 0.3vw solid black;
    }
    #contenido{
        width: 100%;
        height: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }
    #contenido > div{
        max-height: 2.5vw;
        font-size: 2vw;
    }

    input{
        height: 2.5vw;
        border-radius: 0.5vw;
        padding: 0.5vW;
        padding-left: 1.5vW;
        padding-right: 1.5vW;
        font-size: 1.5vw;
    }
    input[type="submit"]{
        height: 3vw;
        font-size: 2vw;
    }
} 


/*para escritorios por encima de 1367px*/
@media screen and (min-width: 1367px){
    .login{
        width: 33vw;
        height: 45vh;
        /* left: 33vw;
        top: 20vh; */
        border: 0.3vw;
        border-radius: 2vw;
        font-size: 2vw;
        border: 0.3vh solid black;
    }
    #contenido{
        width: 100%;
        height: 100%;
        padding-left: 2%;
        padding-right: 2%;
    }
    #contenido > div{
        max-height: 3vw;
        font-size: 1.3vw;
    }

    input{
        height: 2vw;
        border-radius: 0.5vw;
        padding: 0.5vW;
        padding-left: 1.5vW;
        padding-right: 1.5vW;
        font-size: 1.5vw;
    }
    input[type="submit"]{
        height: 3vw;
        font-size: 2vw;
    }
}