/* a1w1w25_dustyStoplight.css */

:root {
    --accent-dark: #7a5267;
    --accent-light: #ebe0e6;
    --dark: #476b6b;
    --med: #669999;
    --light: #f5f4f0;
    --shadow: #998c66;
    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;
	padding: .25em;
    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;
	margin-top: .5em;
	margin-bottom: .25em;
    max-width: 80%;
}

p {
    line-height: 1.5;
}

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

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.5em;
	color: var(--dark);
}

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

article, section {
    padding: .4em;
}


@media only screen and (min-width: 768px) {
    nav>a {
        display: inline-block;
    }

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

    figure img {
        clear: both;
        float: none;
    }
}