body {
    font-family: var(--navigation-font), sans-serif;
    font-size: var(--navigation-font-size);
    background-color: var(--workspace-background-color);
}

.login-panel {
    max-width: var(--single-column-page-width);
    padding: var(--large-panel-padding);
    border-radius: var(--large-border-radius);
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--large-gap);
}

.login-body {
    color: #444;
    font-family: var(--navigation-font), sans-serif;
}

h1 {
    font-size: 2.5em;
    white-space: nowrap;
    font-family: var(--navigation-font), sans-serif;
    font-weight: 500;
    margin-top: 0;
}

.login-choices-container {
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
    align-items: center;
    margin-top: var(--large-gap);
}

.login-choice {
    transition: outline-width 0.1s ease, outline-offset 0.1s ease;
    width: 50%;
    font-family: var(--navigation-font), sans-serif;
    font-size: var(--navigation-font-size);
    border-radius: var(--small-border-radius);
    color: var(--secondary-button-color);
    background-color: var(--secondary-button-bg-color);
    border: 1px solid var(--secondary-button-color);
    outline: var(--secondary-button-color) solid 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.login-choice:hover {
    outline-width: 3px;
    outline-offset: -1px;
    cursor: pointer;
}