:root{
    --main-bg-color: #747474;
    --nav-bg-color-rgba: rgba(230, 214, 133);
    --main-text-color: rgb(101, 80, 36);
    --background-odd: rgb(230, 214, 133);
    --background-even: rgb(237, 227, 195);
}

* {
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
}

p{
    max-width: 70em;
}

main,
article,
section,
aside,
h1,
h2,
h3,
h4,
h5,
h6,
nav{
    padding: 1%;
}

html{
    background-image: url("../glacierMeadow.jpg");
    background-color: burlywood;
    color: var(--main-text-color);
}

body{
    display:grid;
    grid-template-areas: "nav" "header" "main" "footer";
}

body{
    width: 90%;
    margin: 1% auto;
    background-color: rgb(255, 228, 196, .65);
}

header h1,
header h2 {
    color: lightgoldenrodyellow;
    text-transform: uppercase;
}

nav{
    grid-area: nav;
    display: grid;
    grid-template-columns: auto auto auto auto;
}

nav a:hover{
    text-decoration-color: brown;
    color: brown;
}

nav a {
    display: inline-block;
}

footer a:hover{
    text-decoration-color: brown;
    color: brown;

}

nav,
footer {
    background-color: rgba(244, 235, 152, 0.8);
    border-bottom: medium solid  rgb(245, 242, 234, .8);
    text-align: center;
}

/* table styling */
table {
    border: medium solid black;
    border-collapse: collapse;
    margin: auto;
}

table p {
    padding-top: 1em;
}

td,
th {
    border: thin solid black;
    padding: .5em;
}

tr:nth-child(odd) {
    background-color: var(--background-odd);
}

tr:nth-child(even) {
    background-color: var(--background-even);
}

caption {
    font-variant: small-caps;
    font-weight: bold;
    padding-top: 1em;
}

tr:hover {
    background-color: lightgoldenrodyellow;
    color: var(--main-bg-color);
    text-decoration: underline;
}

figure{

    float: right; 
    text-align: center; 
    width: 20%;
}


body{
    margin: auto;
    padding: 3%;
    width: 90%;
}

figure{
    border: thin solid rgb(0, 7, 7);
    border-radius: 3%;
    padding: 3%;
    text-align: center;
}

figcaption{
    color: #d1d5d4;
    font-style: italic;
    text-align: center;
}

img{
    border-radius: 3%;
    max-width: 80%;
}


.right{
    float: right;
    margin-left: 3%;
}

.small{
    width: 20%;
}

.header{
    grid-area: header;
    grid-column: 1/3;
    padding: .5%;
    margin: .5%;
}

.public-files{
    grid-area: public-files;
    padding: .5%;
    margin: .5%;
}

.supporting-files{
    grid-area: supporting-files;
    padding: .5%;
    margin: .5%;
}

.grader-notes{
    grid-area: grader-notes;
    padding: .5%;
    margin: .5%;
}

.grid-layout{
    border-bottom: thin dashed navy;
    display: inline-grid;
    grid-template-columns: 25% 25% 50%;
    grid-template-areas: "header header header"
        "public-files supporting-files grader-notes";
    padding: .5%;
    margin: .5%;
    width: 100%;
}

main {
    display: grid;
    grid-area: main;
    grid-template-areas: "box-1 box-1" "box-2 box-4" "box-3 box-3";
    grid-template-columns: auto 35%;
    grid-gap: 1%;
}


main.index {
    grid-template-areas: "box-1 box-1" "box-2 box-2" "box-4 box-3";
}

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

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

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

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

.activePage {background-color: lightgoldenrodyellow}

/* form styling */
form {
    background-color: var(--main-bg-color-rgba);
    clear: both;
    max-width: 30em;
    margin: auto;
    padding: 1%;
}

form p {
    text-indent: 0;
}

fieldset {
    padding: 1%;
}

fieldset.contact,
fieldset.radio {
    margin-top: -1em;
}

legend {
    margin-top: 0;
}

label {
    display: block;
}

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

.radio legend,
.checkbox legend,
.contact legend {
    padding-top: 1.5em
}

.radio, .checkbox, .contact {
    background-color: #ecd8a9
}

.radio input,
.checkbox input {
    width: initial;
}

input,
textarea,
select {
    width: 100%;
}

input[type=submit] {
    background-color: rgb(114, 86, 25);
    color: whitesmoke;
    font-size: x-large;
    padding: 1%;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: rgb(133, 112, 61);
}