/*:root {
    --main-background-color: rgba(242, 214, 184);
    --nav-bg-color-rgba: rgba(250, 196, 126);
    --main-text-color: #24211e;

    fix later; these aren't working
}*/

* {
    margin: 0;
    padding: 1%;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/*main,
article,
section,
aside,
h1,
h2,
h3,
h4,
h5,
h6,*/

html {
    background-color: rgba(242, 214, 184, 0.8);
    background-image: url(../images/woodchips.PNG);
    color: #24211e;
}

body {
    width: 90%;
    margin: 1% auto;
    background-color:rgba(242, 214, 184, 0.8);
    color: #24211e;
}

a:link {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

header h1 {
    text-transform: uppercase;
}

header h2 {
    color: #170c01;
}

footer {
    /* background-color: var{--nav-bg-color-rgba};
    border-bottom: medium solid var{--main-bg-color}; */
    padding: 1%;
    text-align: center;
}

nav a:link {
    color: #24211e;
    text-decoration: none;
}

nav a:hover {
    background-color: rgba(255, 231, 205, 0.8);
}

nav a {
    text-transform: uppercase;
    display: inline-block;
    padding: 1%;
    width: 30%;
}

nav {
    /*border:rgba(242, 214, 184, 0.8); add in later? */
    background-color: rgba(191, 156, 118, 0.8);
    text-align: center;
}

p {
    text-indent: 1em;
}

figure {
    float: right; 
    text-align: center;
    width: 40%;    
    border-style: solid;
    border-color: rgba(191, 156, 118);
    border-width: .5em;
    border-spacing: 3em;
    background-color: rgba(242, 214, 184, 0.8);
}

img {
    max-width: 100%;
    align-content: center;
}

figcaption {
    color: #45403b;
}

cite {
    font-size: xx-small;
}

.rounded {
    border-radius: 2%;
}

.go-left {
    float: left;
    margin-right: 1em;
}

.go-right {
    float: right;
    margin-left: 1em;
}

/*  how do i get the background to extend behind the pictures at the bottom of the page? */

table {
    border: medium solid rgba(191, 156, 118);
    border-collapse: collapse;
    max-width: 80%;
    margin: auto;
    align-content: center;
}

table+p {
    padding-top: 1em;
}

td,
th {
    border: thin solid rgba(191, 156, 118);
    padding: .5em;
}

tr:nth-child(odd) {
    background-color: rgba(242, 214, 184, 0.8);
}

tr:nth-child(even) {
    background-color: rgba(255, 231, 205, 0.8);
}

caption {
    font-weight: bold;
    padding-top: 1em;
}

form {
    background-color: rgba(242, 214, 184, 0.8);
    border: medium solid rgba(191, 156, 118);
    clear: both;
    max-width: 30em;
    margin: auto;
    padding: 1%;
}

form p  {
    text-indent: 0;
}

fieldset {
    padding: 1%;
}

legend {
    margin-top: 1%;
}