/* pages */

.page {
    overflow-y: auto;
    height: 100vh;
}

.page:not(.only-page) {
    height: calc(100vh - 3em);
}


/* appbar */

.appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3em;
    background: grey;
    color: white;
}

.appbar * {
    color: inherit;
}

.appbar h3 {
    display: none;
    vertical-align: bottom;
}

.appbar .logout {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5em;

}

@media screen and (min-width: 100vh) {
    #menu-icon {
        display: none;
    }

    .appbar h3 {
        display: inline;
    }

    .page:not(.only-page) {
        margin-left: 10em;
    }
}