@charset "UTF-8";

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

:root {
--color1: black;
--color2: rgb(255, 210, 166, 0.500);
--color3: rgb(151, 2, 7);
--color4: hsla(32, 13%, 71%, 0.502);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100vh;
    width: 100vw;
    background: var(--color1) url(img/imgLoginSmall.jpg) no-repeat;
    background-size: cover;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 350px;
    width: 260px;
    background-color: var(--color2);
    border-radius: 20px;
    overflow: hidden;
}

div#login {
    display: flex;
    row-gap: 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-family: "Lumanosimo", cursive;
    font-size: 22px;
}

input {
    padding: 10px;
    border-radius: 5px;
    background-color: var(--color1);
    opacity: 70%;
    outline: none;
    color: white;
    border: 1px solid white;
}

::placeholder{color: white;}
.firstInput {width: 225px;}

.secondInput {
    margin-top: 8px;
    width: 160px;
}

span {
    display: none;
    font-size: medium;
}


.secondInput:hover {
    background-color: var(--color2);
    transition-duration: .4s;
}

/*seção de classes para JS*/

.classForErrorSpan {
    display: inline;
    color: var(--color3);
} 

.classForErrorInput {
    border: 1.8px solid var(--color3);
}
/*-----------------------------------*/


@media screen and (min-width: 501px) {
    main {
        background-color: var(--color4);
        width: 50vw;
    }

    body {
        background: black url(img/imgLoginMedium.webp) no-repeat center center/cover ;
    }
    
    div#imgLogin {
        background: url(img/imageLoginInput.jpg) repeat left/contain;
        width: 30%;
        height: 100%;
        filter: opacity(50%);
    }

    div#login  {
        display: flex;
        width: 70%;
    }

    .firstInput {
        width: 30vw;
    }

    .secondInput {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20vw;
        margin-top: 10px;
    }
    
    .secondInput:hover {background-color: var(--color2);}
}