body{

    position: relative;
    background-color: rgb(38, 34, 54);
    
}

form{

    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    width: 35vw;
    box-sizing: border-box;
    padding: 7vh 4vw 3vh;
    background-color: rgb(34, 34, 34);
    gap: 5vh;
    border: rgb(108, 108, 108) 2px solid;
    border-radius: 10px;

}

.campo {
    position: relative;
    width: 100%;
}

input{

    height: 6vh;
    background-color: rgb(34, 34, 34);
    border: 3px solid white;
    border-radius: 10px;
    transition: all ease-in 0.1s;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    caret-color: whitesmoke;
    padding-left: 5%;
    color: whitesmoke;

}

input:focus{

    border: 4px solid rgb(255, 110, 243);
    outline: none;

}

.campo label {
    position: absolute;
    top: 15%;
    left: 15px;
    background: rgb(34, 34, 34);
    font-size: 14px;
    padding-inline: 5px;
    font-size: 1.1em;
    color: rgba(245, 245, 245, 0.5);
    transition: all 0.2s;
    cursor: text;
}

.campo:focus-within label{

    color: rgb(245, 245, 245);
    top: -15px;

}

.campo input:not(:placeholder-shown) + label {
    color: rgb(245, 245, 245);
    top: -15px;
}

.campo input::placeholder{

    opacity: 0;

}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {

    /* Força o fundo a ser igual ao do seu input */
    background-color: rgb(34, 34, 34) !important;
    -webkit-box-shadow: 0 0 0px 1000px rgb(34, 34, 34) inset !important;

    /* Mantém a cor do texto */
    -webkit-text-fill-color: whitesmoke !important;

    /* Remove borda padrão do autofill */
    border: 3px solid white !important;

    /* Mantém a animação e posição do label funcionando */
    transition: background-color 0s ease-in-out 0s;
}

input:-webkit-autofill:focus {
    border: 4px solid rgb(255, 110, 243) !important;
}

.btn1{

    height: 10vh;
    transition: all 0.2s;
    font-size: 2em;
    display: flex;
    align-items: center;

}

.btn1:hover{

    background-color: rgb(214, 75, 202);

}

p{

    color: white;
    font-size: 1.1em;
    display: flex;
    gap: 0.25em;
    margin-left: auto;

}

p span{

    color: rgb(85, 85, 242);
    text-decoration: underline;
    cursor: pointer;

}

@media (max-width: 768px){

    *{

        max-width: 100vw;
        box-sizing: border-box;

    }

    body{

        max-height: 100vh;
        overflow: hidden;

    }

    form{

        border: 0;
        border-radius: 0;
        width: 100vw;
        height: 100vh;
        padding-top: 15vh;

    }

    input{

        height: 8vh;

    }

    .campo label{

        top: 30%;

    }
    
    h1{

        font-size: 3em;
        text-align: center;

    }

}