body {
    min-height: 100vh;
}

form {
    width: 400px;
}

fieldset {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2em;
    border: none;
}

fieldset .clear {
    display: none;
}

.login-info {
    display: flex;
    height: 8em;
    justify-content: stretch;
    align-items: center;
    overflow: hidden;
    gap: 2em;
    padding: 1em 3em 1em 1em;
    border-radius: 5em;
    box-shadow: 0 0 6px 6px rgba(var(--colour-1-rgb), 0.2);
    margin-bottom: 2em;
}

.login-info > .avatar {
    height: 100%;
    aspect-ratio: 1;
    width: fit-content;
}

.login-info > .avatar > .avatar-image-container {
    width: auto;
    height: 100%;
    aspect-ratio: 1;
}

.login-info .welcome {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.form {
    filter: drop-shadow(0 0 16px #66b8d9);
}

.form ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    gap: 1em;
    padding: 0;
    margin: 0;
}

.form ul li a {
    display: block;
    text-decoration: none;
    color: inherit;
    background: white;
    padding: 0.5em;
    border-radius: 0.5em 0.5em 0 0;
}

.form .form-tab {
    background: white;
    padding: 1em 4em 0 4em;
}

.form .form-tab form {
    width: 100%;
    max-width: unset;
}

.form .form-tab:not(:target):not(:last-of-type), .form .form-tab:target ~ .form-tab {
    display: none;
}