html {
    overflow: hidden;
}

.cabecalhoForm {
    display: var(--fx);
    background: var(--preta);
    font-family: var(--font4);
    align-items: var(--centro);
    padding: var(--meia) 6.5rem;
    justify-content: var(--espaco);
}

.cabecalhoForm h1 {
    font-size: 14pt;
    color: var(--branco);
}

.cabecalhoForm a {
    transition: all .5s;
    color: var(--branco);
    text-decoration: var(--nada);
}

.cabecalhoForm a:hover {
    text-decoration: underline;
}

hr {
    color: var(--branco);
}

.divFormEntrarCriar {
    height: 100vh;
    display: var(--fx);
    background: var(--preta);
    align-items: var(--centro);
    flex-direction: var(--coluna);
    justify-content: var(--centro);
}

.formularioEntrarCriar {
    width: 45%;
    height: 60%;
    padding: 1rem;
    border: 2px solid;
    border-width: 2px;
    display: var(--fx);
    border-image-slice: 1;
    flex-direction: column;
    align-items: var(--centro);
    justify-content: var(--centro);
    animation: mostraForms 3s ease-in;
}

h1 {
    font-family: var(--font4);
}

.tituloForms {
    padding-bottom: var(--meia);
}

.textoForms {
    font-weight: 300;
    color: var(--branco);
    text-align: var(--centro);
    font-family: var(--font1);
    padding-bottom: var(--meia);
}

input {
    width: 25rem;
    margin: var(--meia);
    border: var(--nada);
    outline: var(--nada);
    color: var(--branco);
    font-family: var(--font4);
    font-weight: var(--negrito);
    transition: border-color .4s;
    background-color: transparent;
    padding: var(--meia) var(--umMeio);
    border-bottom: 1.5px solid #dd2477a1;
}

input:hover,
input:focus {
    border-bottom: 2px solid #DD2476;    
}

@keyframes mostraForms {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.botaoForm {
    margin-block-start: 1.5rem;
}

.paragrafoPergunta {
    font-weight: 300;
    margin-top: 1.5rem;
    font-style: italic;
    color: var(--branco);
    font-family: var(--font1);
}

.paragrafoPergunta a {
    font-weight: 600;
    transition: all .3s;
    color: var(--branco);
    text-decoration: var(--nada);
}

.paragrafoPergunta a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .formularioEntrarCriar {
        width: 95%;
        justify-content: space-between;
    }

    .cabecalhoForm {
        padding: var(--meia);
    }

    input {
        width: 100%;
    }
}