html {
    font-family: "Sofia", "Arial", sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    color: black;
    background-color: white;
    text-rendering: optimizeLegibility;
    margin: 0;
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    width: 100%;
}

main {
    background-color: white;
    color: black;
    width: 100%;
}

footer {
    width: 100%;
    margin: auto 0 0 0;
    background-color: #005bbb;
    color: white;
    padding: 0 0 2rem 0;
}

@media screen and (min-width: 721px) {
    header > div.innerheader {
        max-width: 52rem;
        margin: 0 auto;
        padding: 0 1rem 0 1rem;
    }

    div.innerheader > div.topheader {
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        height: 50px;
        margin: 0 auto;
    }

    div.topheader > div.ublogo {
        display: flex;
        flex-grow: 1;
        box-sizing: border-box;
        margin-right: auto;
        padding-top: 8px;
        height: 100%;
        color: #005bbb;
        background-color: white;
    }

    div.ublogo::before {
        position: absolute;
        background-color: white;
        content: '';
        top: 0;
        left: 0;
        width: 50VW;
        height: 50px;
        z-index: -1;
    }

    div.arrow {
        display: inline-block;
        box-sizing: border-box;
        margin: 0;
        border-right-width: 0;
        border-top-width: 25px;
        border-top-style: solid;
        border-top-color: #002f56;
        border-bottom-width: 25px;
        border-bottom-style: solid;
        border-bottom-color: #002f56;
        border-left-width: 25px;
        border-left-style: solid;
        border-left-color: white;
    }

    div.topheader > div.parentorg {
        display: inline-flex;
        box-sizing: border-box;
        margin: 0;
        padding-left: 1rem;
        color: white;
        background-color: #002f56;
    }

    div.parentorg a {
        align-content: center;
        text-decoration: none;
        color: inherit;
    }

    div.parentorg a:hover {
        text-decoration: underline;
    }

    div.parentorg::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50VW;
        width: 50VW;
        height: 50px;
        background-color: #002f56;
        z-index: -1;
    }

    div.innerheader > div.mainheader {
        display: flex;
        background-color: #005bbb;
        color: white;
        height: 120px;
    }

    div.mainheader::before {
        position: absolute;
        width: 100VW;
        background-color: #005bbb;
        color: white;
        height: 120px;
        left: 0;
        z-index: -1;
        content: '';
    }

    div.mainheader > h1 {
        margin: 0;
        font-weight: inherit;
        align-content: center;
    }

    main > div.content {
        line-height: 1.5;
        margin: 0 auto 1rem auto;
        padding: 0 1rem 0 1rem;
        max-width: 52rem;
    }

    footer > div.content {
        max-width: 52rem;
        padding: 0 1rem;
        font-size: small;
        margin: 1rem auto;
    }

    footer div.footerlogo {
        width: 100%;
        border-top: dashed;
        border-bottom: dashed;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-color: white;
        padding: 2rem 0 2rem 0;
        margin: 1rem 0 1rem 0;
    }
}

@media screen and (max-width: 720px) {
    header > div.innerheader {
        background-color: #005bbb;
        color: white;
        display: flex;
        flex-direction: column;
    }

    div.topheader > div.ublogo {
        background-color: white;
        color: #005bbb;
        padding: 10px 0 10px 1rem;
    }

    div.topheader > div.arrow {
        display: none;
    }

    div.topheader > div.parentorg {
        padding: 0.5rem 1rem;
    }

    div.parentorg a {
        color: inherit;
        text-decoration: none;
        text-transform: uppercase;
        border-bottom-color: rgba(255, 255, 255, 0.6);
        border-bottom-style: dotted;
        border-bottom-width: 1px;
    }

    div.parentorg a:hover {
        border-bottom-color: rgba(255, 255, 255, 1.0);
    }

    div.mainheader h1 {
        font-size: 120%;
        padding: 0.5rem 1rem;
        margin: 0;
    }

    main > div.content {
        padding: 0 1rem;
    }

    footer > div.content {
        font-size: small;
        padding: 0 1rem;
    }

    footer div.footerlogo {
        width: 100%;
        border-top: none;
        border-bottom: dashed;
        border-top-width: 0px;
        border-bottom-width: 1px;
        border-color: white;
        padding: 2rem 0 2rem 0;
        margin: 1rem 0 1rem 0;
    }

    footer div.footerlogo > img.ublogo {
        width: 100%;
        height: auto;
    }
}

a {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    color: #005bbb;
    text-decoration: underline;
}

footer p.copyright {
    margin: 0.5rem 0 0.5rem auto;
    text-align: right;
}

footer a {
    text-decoration: none;
    color: inherit;
}

footer a:hover {
    text-decoration: underline;
}

p.advisory-only {
    font-size: smaller;
    font-style: italic;
}

table.course-schedule, table.lectures {
    border-spacing: 0;
}

table.course-schedule > tbody > tr > th,
table.lectures > thead > tr > th {
    vertical-align: top;
    text-align: left;
    padding: 0.5rem;
}

table.course-schedule > tbody > tr > td,
table.lectures > tbody > tr > td {
    padding: 0.5rem;
}

table.course-schedule > tbody > tr:nth-child(even),
table.lectures > tbody > tr:nth-child(odd) {
    background-color: #e4e4e4;
}

table.course-schedule span.lecturer {
    font-style: italic;
}