:root {
    --sidebar-width: 260px;
    --titlebar-height: 64px;
}

body {
    max-width: 100%;
    margin: 0 auto;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--titlebar-height);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    section {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }

    div.burger {
        display: none;
        width: var(--titlebar-height);
        height: var(--titlebar-height);
    }

    div.logo {
        width: var(--titlebar-height);
        height: var(--titlebar-height);
    }

    div.title {
        height: 100%;

        h2 {
            transition: var(--transition-style);

            span {
                display: inline-block;
                overflow: revert;
                width: inherit;
                height: inherit;
            }
        }
    }

    div#processing {
        width: var(--titlebar-height);
        height: var(--titlebar-height);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 12px;
    }

    div.profile-menu {
        width: var(--titlebar-height);
        height: var(--titlebar-height);
    }
}

nav.main-nav {
    position: fixed;
    top: 0;
    height: calc(100vh - var(--titlebar-height));
    margin-top: var(--titlebar-height);
    width: var(--sidebar-width);
}

section.main {
    padding: var(--titlebar-height) 0 var(--titlebar-height) var(--sidebar-width);

    section#alert {
        z-index: 100;
        position: fixed;
        top: 100px;
        width: 50%;
        margin-left: calc(25% - var(--sidebar-width) / 2);
        opacity: 97%;
    }

    aside.ensembleHomeQuickLinks {
        float: right;
        max-width: var(--sidebar-width);
        margin-left: 1rem;
        margin-bottom: 1rem;
    }
}
.rosterDisplay {
    column-count: 3;
    column-gap: 1rem;
}
.attendanceTable {
    min-width: 450px;
}
.row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    & * {
        align-self: flex-start;
    }
}

@media screen and (max-width: 1250px) {
    .rosterDisplay {
        column-count: 2;
        column-gap: 1rem;
    }
}

@media screen and (max-width: 768px) {
    header {
        div.burger {
            display: block;
        }

        div.title h2 {
            span {
                width: 0;
                height: 0;
                overflow: hidden;
            }
        }
    }

    nav.main-nav {
        left: calc(-1 * var(--sidebar-width));
        transition: var(--transition-style);
        z-index: 10;
    }

    section.main {
        padding-left: 0;

        section#alert {
            width: 100%;
            margin: auto;
        }
    }

    nav.main-nav.open {
        left: 0;
    }

    .rosterDisplay {
        column-count: 1;
    }
    .attendanceTable {
        min-width: 200px;
    }
    .row {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

    }
}
.errorpage {
    .nerdy {
        margin-top: 7rem;
        margin-bottom: 7rem;
    }
}

code {
    padding: .13rem;
}