/* a1w1w24_violetGarden.css */

:root {
    --accent-dark: #4d8000;
    --accent-light: #ebffcc;
    --dark: #5200cc;
    --med: #8533ff;
    --light: #f0e6ff;
    --shadow: #6600ff;
    font: 20px Helvetica, Arial, sans-serif;
}

body {
    background: var(--dark);
    background: linear-gradient(135deg, var(--dark) 0%, var(--med) 35%, var(--light) 100%);
    min-width: 325px;
    padding: .5em 2em;
}

/* header/footer stuff */

header,
footer,
main {
    background-color: var(--light);
    border: .05em solid var(--dark);
    box-shadow: 0px 0px .2em .2em var(--shadow);
    margin: 1em .05em;
    width: 95%;
}

header,
footer {
    background-color: var(--dark);
    border: .05em solid var(--light);
    color: white;
}

footer>address {
    padding: .25em;
}
footer>address a:link, footer>address a:visited {
	color: var(--light);
}
nav {
    background-color: var(--light);
    margin: .25em;
    padding: .1em;
}

nav>a {
    display: block;
    padding: .3em;
    margin: .2em;
}

nav>a:hover {
    color: var(--light);
    background-color: var(--dark);
}

img {
    display: block;
    margin: auto;
    max-width: 80%;
}

p {
    line-height: 1.5;
}

h1,
h2,
p {
    margin: .2rem .5rem;
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
    color: var(--accent-dark);
}

article {
    padding: .4em;
}

/* misc a2 stuff */
main > nav {
    background-color: var(--accent-dark);
    border: .1em solid var(--accent-dark);
    padding: .25em;
}
main > nav > a {
    color: var(--accent-light);
}
main > nav > a:hover {
    background-color: var(--accent-light);
    color: var(--accent-dark);

}
article > nav {
    border-bottom: .1em solid var(--med);
}
/* lists and tables */
li::marker {
    color: var(--accent-dark);
}
li li::marker {
    content: "\25B8";
}
dt {
    background-color: var(--accent-light);
    border-bottom: .15em solid var(--accent-dark);
    margin-top: .2em;
    margin-bottom: .2em;
    padding: .1em .3em;
}
dd {
    border-left: .15em solid var(--accent-dark);
    margin: .2em 0px .2em .75em;
    padding-left: .2em;
}

table {
    border: .2em solid var(--dark);
    border-collapse: collapse;
    margin: .5em auto;
}
th, td {
    border: .1em solid var(--med);
    padding: .25em;
}
caption {
    color: var(--dark);
    font-size: 1.1em;
    font-weight: bold;
}
@media only screen and (min-width: 768px) {
    nav>a {
        display: inline-block;
    }

    img {
        float: left;
        margin: .35em;
        max-width: 25%;
    }
}