id/styles/layout.css

body {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    min-height: 100vh;
}

header {
    display: flex;


    align-items: center;

    padding: 1rem 1rem;
}

header .start {
    margin-right: auto;
    display: flex;

    gap: 1rem;

}

header .middle {
    margin: 0 16px;
    display: flex;
}

header .end {
    margin-left: auto;
    display: flex;
    gap: 1rem;
}

header .avatar {
    height: 1.5em;
}

main {
    height: 100%;
    flex: 1;
    padding: 1rem 1rem;

    max-width: 1500px;
    margin: auto;
    width: 100%;
}

footer {
    display: flex;
    align-items: start;
    justify-content: center;

    padding: 1rem 1rem;

    gap: 1rem;
}

fieldset {

    border: #c0c0c0c0 1px solid;
    border-radius: calc(1em + 10px);

    padding: 10px 10px 5px 10px;
}

legend {
    font-size: 1.25rem;
    font-weight: 600;
}

form:has(fieldset) {

    /* fit two fieldsets side by side */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;


}

form:has(fieldset) > button[type="submit"] {
    /* align the button to the right */
    grid-column: span 2;
}

form .container {
    /* contains a label and an input */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 5px;
}

form .container:has(input[type="checkbox"]) {
    flex-direction: row;
}

form .container label {
    font-size: 0.9rem;
    opacity: 0.5;
}

form .container:has(input[type="checkbox"]) label {
    margin-left: 0.5em;
    opacity: 1;
    font-size: 1rem;
}

footer h2 {
    margin: 0;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;

    padding: 1rem 1rem;

    gap: 1rem;
}

.hero .logo {
    height: 128px;
}

.accountnav {
    display: flex;
    gap: 1rem;
}

#wrapper {
    display: flex;
}

#loginform {
    max-width: 500px;
    margin: auto;
}