* {
    margin: 0;
    padding: 1%;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

main.index {
    display: grid;
    grid-area: main;
    grid-template-areas: "box-1 box-1" "box-2 box-2" "box-3 box-6" "box-7 box-7" "box-4 box-4" "box-5 box-5";
    grid-template-columns: auto 60%;
    grid-gap: 1em;
}

main.form {
    display: grid;
    grid-area: main;
    grid-template-areas: "box-1 box-1" "box-2 box-2" "box-3 box-3" "box-4 box-5" "box-4 box-6";
    grid-template-columns: auto 60%;
    grid-gap: 1em;
}

.box1 {
    grid-area: box-1;
}

.box2 {
    grid-area: box-2;
}

.box3 {
    grid-area: box-3;
}

.box4 {
    grid-area: box-4;
}

.box5 {
    grid-area: box-5;
}

.box6 {
    grid-area: box-6;
}

.box7 {
    grid-area: box-7;
}

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 {
    padding: 1%;
    text-align: center;
}

nav a:link {
    color: #24211e;
    text-decoration: none;
}

nav a:hover {
    color:  rgba(93, 51, 7);
}

nav a {
    text-transform: uppercase;
    display: inline-block;
    padding: 1%;
    width: 150%;
}

nav {
    /*border:rgba(242, 214, 184, 0.8); add in later? */
    background-color: rgba(191, 156, 118, 0.8);
    text-align: center;
    display: grid;
    grid-area: nav;
    grid-template-areas: "box-1" "box-2" "box-3" "box-4";
    grid-template-columns: auto auto auto auto;
    justify-content: space-evenly;
    grid-gap: 1%;
}

p {
    text-indent: 1em;
}

figure {
    text-align: center; 
    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;
}

table {
    border: medium solid rgba(191, 156, 118);
    border-collapse: collapse;
    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%;
}

label {
    display: block;
}

.radio label,
.checkbox label {
    display: inline;
}

input[type=submit] {
    background: rgb(65, 138, 65);
    color: white;
    font-size: x-large;
    padding: 3%;
    /* realign button to be centered? */
}

input[type=text] {
    background-color: rgba(255, 231, 205);
    width: 95%;
}

.activePage {
    background-color: rgba(255, 231, 205, 0.8);
}