:root {
    --white: #fff;
    --blueberry: #050542;
    --turquoise: #66e5bf;
    --lavender: #a675f5;
    --attention: #050542;
    --attention-background: #05054233;
    --call-to-action: #fffc86;
    
    --rounded: .5rem;
    --pilled: 2rem;
    --shadow: .3rem;
    --max-width: 90rem;

    --breakpoint-medium: 30em;
}

/* ARCHIVE THEME */
html.archive {
    --white:#000;
    --blueberry:#ccc;
    --lavender:#ddd;
    --turquoise:#ddd;
    --background: #333;
    --text:#eee;
}

html.archive .white-on-blue,
html.archive .green-on-blue,
html.archive .blue-on-green {
    color: var(--text);
    background-color: var(--background);
    border-color: #fff;
}

html.archive .blue-on-green,
html.archive .purple-on-blue,
html.archive .blue-on-purple,
html.archive body.white-on-blue > nav li a.active {
    color: var(--white);
    background-color: var(--text);
    border-color: var(--white);
}

html.archive header div,
html.archive section,
html.archive header nav *,
html.archive h1 * {
    background-color: transparent !important;
    color:var(--turquoise) !important;
    border-color: var(--turquoise) !important;
}
html.archive .active,
html.archive main li:hover {
    background-color: rgb(255,255,255,.2) !important;
}

html.archive body h2:before, body figcaption:before,
html.archive body h2:after, body figcaption:after {
    color: var(--background)
}

html.archive .weekday {
    background-color: transparent !important;
}

html.archive main a:after, footer a:after {
    background:none !important
}

html.archive .day * {
    --border:var(--text) !important;
}
/* /ARCHIVE THEME */

body {
    overflow-x:hidden;
}

body::before {
    width: 160px;
}
body::after {
    width: 160px;
}
@media (min-width:40em) {
    body::before {
        width: 350px !important;
    }
}

h2 {
    margin-left:1.5rem
}

footer {
    margin-top: 2rem;
}
footer nav {
    padding:1rem;
}
footer nav h2 {
    margin:calc(-1rem - 1px) calc(-1rem - 1px) 1rem 2rem
}

::marker {
    color: currentColor;
}

section {
    padding: 1rem;
}

section.semester h2 {
    font-size: 1.25rem;
    line-height: 1.1;
    margin-left: 1.25rem !important;
}
@media (max-width: 750px) {
    section.semester h2 {
        font-size: 1.25rem;
    }
}
section.semester h2 > span {
    font-size: 0.6em;
    letter-spacing: 0;
    text-transform: uppercase;
}

section h3 {
    font-size: 1.2em;
    margin-top: 3rem;
    font-weight: normal;
}

section ul {
    margin:0;
    list-style:none !important;
}

section ul li {
    list-style:none !important;
}

section a {
    padding:0 .25rem
}
a:focus {
    outline:none;
    background: var(--turquoise);  
}