body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#content {
    width: 100%;
    max-width: 512px;

    padding: 16px;
}

#login-fields {
    width: 100%;

    position: relative;
}
#password-fields, #private-key-fields {
    display: none;
}

#password-fields.visible, #private-key-fields.visible {
    display: block;
}

#actions {
    text-align: center;
}

#connect {
    color: #5680e9;

    border: 1px solid #5680e9;
    border-radius: 18px;

    transition: all 0.25s ease;
}
#connect:hover {
    background: #5680e9;
    color: #ffffff;
}

#notes {
    width: 100%;

    position: absolute;
    top: 100%;
    left: 0;

    text-align: center;
}
#progress-note, #error-note {
    font-size: 12px;

    display: none
}

#progress-note.visible, #error-note.visible {
    display: block;
}

#error-note {
    color: #fc4445;
}