/*
Wendi Jollymore, Sheridan College
syst10049, syst10199
Updated Dec 2022
*/

/* defaults */

:root {
    --main-color: #c5d5cb;
    --accent: #5A635C;
    --text-color: #264d73;
    --highlight: #e3e0cf;
}

html, body {
    font: 16px Arial,sans-serif;
}

/* page structure */

header, footer {
    background-color: var(--highlight);
    border: .2em solid var(--main-color);
    border-radius: 7px;
}

header, footer, section, main {
    margin: .5em;
    padding: .5em;
}

h1 {
    color: var(--accent);
    font-size: 2.0em;
}

h2 {
    border-bottom: .1em solid var(--text-color);
    color: var(--text-color);
    font-size: 1.75em;
}

header h2 {
    border: 0px;
}

section > h2 {
    border-bottom: .1em solid var(--text-color);
    color: var(--text-color);
    font-size: 1.75em;
}

section > nav {
    background-color: var(--main-color);
    padding: .25em;
}

nav > a {
    margin: .2em;
    padding: .2em;
}

nav > a {
    display: block;
}

iframe {
    margin: .5em;
}

img {
	max-width: 90%;
}

/* tables */

table, caption {
    border: .3em solid var(--highlight);
}

table {
    border-collapse: collapse;
    margin: .5em;
    width: 100%;
}

caption {
    border-bottom: .1em solid var(--accent);
    font-weight: bold;
    padding: .25em;
}

caption, th, tr:first-child > td:first-child {
    background-color: var(--main-color)
}

td, th {
    border: .1em dotted var(--accent);
}

td {
    vertical-align: top;
}

/* lists */
ul > li::marker {
    color: var(--accent);
    content: "\25C9  ";
}

ul li li::marker {
    color: black;
    content: "\25CF  ";
}
ul li li {
    margin: .2em;
}
ul li li:last-child {
    margin-bottom: .4em;
}

/* bonus */

dt {
    background-color: var(--highlight);
    box-shadow: .2em .2em .2em #ccc;
    color: var(--text-color);
    font-weight: bold;
    margin-bottom: .3em;
    margin-top: .5em;
    padding: .3em;
}
dd {
    margin-bottom: .2em;
}
@media screen and (min-width: 768px) {

    nav > a {
        display: inline-block;
    }
    footer {
        clear: both;
    }
}