main div:has(#login),
main div:has(#registration) {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1em;
}

main #login,
main #registration {
    width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 1.4em 2em;
    background-color: var(--gray-bg);
}

main #login span,
main #registration span {
    color: rgba(200, 0, 0, 1);
    font-size: 1.2em;
    text-align: center;
}

form label {
    display: flex;
    flex-direction: column;
    font-size: 18pt;
}

form button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .3em .7em;
    font-size: 14pt;
    border: none;
    background-color: var(--white);
    transition: .2s ease;
    margin-top: .5em;
}

form button:hover {
    cursor: pointer;
    background-color: var(--white-bg);
}

form input {
    border: 1px solid transparent;
    line-height: 1.4em;
    font-size: 16pt;
    padding: .2em;
    font-family: "Dosis", sans-serif;
    outline: none;
    width: 14em;
}

form input:focus {
    border: 1px solid black;
}

form input:hover {
    background-color: var(--white-bg);
    transition: .2s ease;
}

main {
    margin-top: 2em;
}