body {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100vh;
}

.login {
    width: min(100%, 600px);
    margin: 4rem auto;
    padding: 2rem 1rem;
    text-align: center;
    border: 2px solid rgb(var(--pri));
    color: rgb(var(--pri));
    background-color: rgba(var(--content-bg), 0.75);
}

.login #instruction {
    margin-bottom: 1em;
    font-size: .9em;
    opacity: .5;
}

.login__fields {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

.login__fields label {
    display: flex;
    flex-flow: column nowrap;
}

.login__fields p {
    font-size: 1.2em;
    text-align: left;
}

.login__fields input {
    padding: .5em;
    width: 100%;
    border: 0;
    outline: 0;
    text-align: left;
    background-color: transparent;
    border-bottom: 2px solid rgb(var(--pri));
    color: inherit;
    font-size: 1em;
}

.login__fields input::placeholder {
    color: inherit;
    opacity: .5;
}

.login #reset {
    font-size: .9em;
    margin-top: 1rem;
}

.login a {
    color: inherit;
    font-weight: bolder;
    transition: opacity .2s;
}

.login a:hover,
.login a:focus {
    opacity: .75;
}

.login button {
    margin-top: 2.4em;
    padding: .5em;
    width: 100%;
    border: 0;
    outline: 0;
    text-align: center;
    background-color: transparent;
    color: inherit;
    font-size: 1em;
    cursor: pointer;
    background-color: rgb(var(--pri));
    color: rgb(var(--sec));
}