* {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    text-decoration: none;
    box-sizing: border-box;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


html {
    color-scheme: dark light;
}

.texto {
    display: flex;
    width: 80%;
}

.conteiner {
    display: flex;
    gap: 25px;
    max-width: 100vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 0;
}

.header {
    width: 60%;
    padding: 34px 0;
    text-align: center;
}

.controles {
    width: 80%;
    display: flex;
    flex-direction: column;
    input {
        padding: 9px 8px;
        border-radius: 3px;
        border: 1px solid #4a4949b6;
    }
}


spam{
    font-size: 2.25rem;
    font-weight: 400;
    color: #1971c2;
}

h1 {
    margin: 10px 0;
}

h2 {
    margin: 10px 0;
    text-align: left;
    font-size: 2.15rem;
    font-weight: 200;
}

button {
    width: 200px;
    padding: 12px;
    font-size: 1.25rem;
    cursor: pointer;
}

label {
    font-size: 1.35rem;
    margin: 10px 0;
}

.repor_senha {
    width: 80%;
    text-align: right;
    cursor: pointer;
}

.bgImage {
    display: none;
}

.lembrame {
    display: none;
}

@media (min-width: 720px){
    *{
        box-sizing: border-box;
        overflow: hidden;
    }
    .main {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 100vw;
        padding: 10%;
    }
    
    .conteiner {
        width: 30vw;
    }

    .bgImage {
        display: block;
        img{
            width: 400px;
        }
    }
     .lembrame {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 5px;
     }

     button{
        width: 350px;
        padding: 8px 0;
        border: 1px;
        border-radius: 5px;
     }

    .header {
        text-align: left;
        width: 80%;
    }
}