nav {
    box-shadow: none;
}

/* CONFIGURACOES DO LAYOUT DO LOGIN */

body,
html {
    background-color: #050505;
    margin: 0;
}

body {
    /* margin: 0;
    height: 100vh; */
    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
}

form {
    background-color: aqua;
    border-radius: 1vw;
    width: calc(17% + 10rem);
    /* width: 25%; */
    display: grid;
    padding: 2vw 2vw;
    
    box-shadow: 0 4px 20px rgba(255, 0, 255, 0.637);

    position: absolute;
    /* tira o form do fluxo normal */
    top: 50%;
    /* 50% da altura da tela */
    left: 50%;
    /* 50% da largura da tela */
    transform: translate(-50%, -50%);
    /* centraliza exatamente */
}

form * {
    font-family: "Roboto";
    font-size: calc(0.5vw + 0.5rem);
}

form h1 {
    /* background-color: red; */
    margin: 0 0 0.5vw 0;
    text-align: center;
    color: rgb(255, 0, 255);
    font-size: calc(1vw + 0.5rem);
}

form hr {
    width: 100%;
    height: 1px;
    background: black;
    border: none;
    margin-bottom: 1.5vw;
}

#alerta {
    background-color: rgb(255, 101, 255);
    /* margin-bottom: 1.5vw; */
    width: 100%;
    text-align: center;
    font-size: 1vw;
    border-radius: 0.4vw;
}

#alerta p {
    margin: 0;
    /* padding: 0; */
    padding: 3%;
}

form label {
    margin: 1vw 0 0.7vw 0;
    /* background-color: red; */
}

form input {
    margin: 0;
    width: calc(100% - 6% - 0.15vw);
    /* height: 2vw; */
    /* font-size: 1vw; */
    padding: 3%;
    border: 0.15vw solid #ffffff;
    border-radius: 0.4vw;
    /* height: 2vw; */
    background-color: #ffffff;
}

.input-box {
    position: relative;
    /* background-color: red; */
    margin-bottom: 1vw;
}

.input-box img {
    /* background-color: red; */
    position: absolute;
    top: 0;
    height: 100%;
    right: 3%;
    /* margin: auto 3% auto 0; */
    width: 5.5%;
    cursor: pointer;
}

input:focus {
    border: 0.15vw solid;
    border-color: rgb(255, 0, 255);
    outline: none;
    /* remove a borda padrão do browser */
}

button {
    /* margin-bottom: 1vw; */
    background-color: rgb(255, 0, 255);
    width: 100%;
    /* height: 2vw; */
    font-family: "Roboto";
    font-size: calc(0.7vw + 0.5rem);
    /* font-weight: 600; */
    padding: 4%;
    border: none;
    border-radius: 0.4vw;
    cursor: pointer;
}

span {
    width: 100%;
    /* background-color: red; */
    text-align: center;
    margin: 0 0 1vw 0;

}

a {
    color: rgb(255, 0, 255);
    text-decoration: none;
}

@media (max-width: 1024px) {

    body,
    html {
        /* background-color: red; */

    }

    #alerta {
        /* background-color: rgb(255, 101, 255); */
        margin-bottom: 0;
        /* width: calc(100%); */
        /* text-align: center; */
        /* font-size: 1vw; */
        /* padding: 1.5% 0; */
        border-radius: 1.5vw;
    }

    #alerta p {
        /* padding: 0; */
        padding: 3%;
    }

    form * {
        font-size: calc(1vw + 0.7rem);
    }

    form {
        background-color: aqua;
        border-radius: 2vw;
        width: calc(20% + 15rem);
        /* width: 25%; */
        /* padding: 0; */

        box-shadow: 0 4px 40px rgba(255, 0, 255, 0.637);
        font-size: calc(1vw + 0.5rem);
    }

    form h1 {
        /* background-color: red; */
        margin: 0 0 3vw 0;
        /* text-align: center;
        color: rgb(255, 0, 255); */
        font-size: calc(1.7vw + 0.7rem);
    }

    form label {
        margin: 2vw 0;
        /* background-color: red; */
    }

    form input {
        /* margin-bottom: 2vw; */
        width: calc(100% - 6% - .8vw);
        /* height: 2vw; */
        /* font-size: 1vw; */
        padding: 3%;
        border: 0.4vw solid #ffffff;
        border-radius: 1.5vw;
        /* height: 2vw; */
        /* background-color: #ffffff; */
    }

    .input-box {
        position: relative;
        /* background-color: red; */
        margin-bottom: 2vw;
    }

    .input-box img {
        /* background-color: red; */
        position: absolute;
        top: 0;
        /* height: 100%; */
        right: 3%;
        /* margin: auto 3% auto 0; */
        /* width: 5.5%; */
        /* cursor: pointer; */
    }

    input:focus {
        border: 0.4vw solid;
        border-color: rgb(255, 0, 255);
        outline: none;
        /* remove a borda padrão do browser */
    }

    button {
        /* margin-bottom: 1vw; */
        /* background-color: rgb(255, 0, 255); */
        /* width: 100%; */
        /* height: 2vw; */
        /* font-family: "Roboto"; */
        /* font-size: 1.2vw; */
        /* font-weight: 600; */
        padding: 4%;
        /* border: none; */
        border-radius: 1.5vw;
        /* cursor: pointer; */
    }

    span {
        /* width: 100%;
        background-color: red;
        text-align: center; */
        margin: 0 0 2vw 0;

    }

    a {
        color: rgb(255, 0, 255);
        text-decoration: none;
    }
}

@media (max-width: 500px) {
    body * {
        font-size: calc(2.5vw + 0.5rem);
    }

    #alerta {
        border-radius: 3vw;
    }

    form * {
        font-size: calc(2.5vw + 0.5rem);
    }

    form h1 {
        font-size: calc(3.5vw + 0.5rem);
        /* background-color: red; */
        /* margin: 0; */
    }

    form {
        background-color: aqua;
        /* border-radius: 3vw; */
        width: calc(85%);
        /* width: 25%; */
        padding: 4vw;
        border-radius: 5vw;
        box-shadow: 0 4px 40px rgba(255, 0, 255, 0.637);
        /* font-size: calc(1vw + 0.5rem); */
    }

    form label {
        margin: 4vw 0 2.5vw 0;
    }

    form input {
        /* margin-bottom: 4vw; */
        width: calc(100% - 6% - 1.4vw);
        /* height: 2vw; */
        /* font-size: 1vw; */
        /* padding: 3%; */
        border: 0.7vw solid #ffffff;
        border-radius: 3vw;
        /* height: 2vw; */
        /* background-color: #ffffff; */
    }

    .input-box {
        position: relative;
        /* background-color: red; */
        margin-bottom: 4vw;
    }

    .input-box img {
        /* background-color: red; */
        position: absolute;
        top: 0;
        /* height: 100%; */
        right: 3%;
        /* margin: auto 3% auto 0; */
        /* width: 5.5%; */
        /* cursor: pointer; */
    }

    input:focus {
        border: 0.7vw solid;
        border-color: rgb(255, 0, 255);
        outline: none;
    }

    button {
        border-radius: 3vw;
    }

    span {
        margin-bottom: 4vw;
    }
}