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

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

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

html{
    background-image: url(cs008/lab4/css/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;
}

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

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

nav,
footer {
    background-color: var(--nav-bg-color-rgba);
    border-bottom: medium solid var(--main-bg-color);
    padding: 1%, 0;
    text-align: center;
}

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

table p {
    padding-top: 1em;
}

td,
th {
    border: thin solid black:#747474;
    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;
}

figure{

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


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

figure{
    border: thin solid rgb(193, 198, 198);
    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%;
}


.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;
}

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

form p {
    text-indent: 0;
}

fieldset {
    padding: 1%;
    border: none;
}

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

legend {
    margin-top: 1%;
}

label {
    display: block;
}

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

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

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

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

input {
    width: 100%;
}

textarea {
    width: 100%;
}

select {
    width: 100%;
}

input[type=submit] {
    background: rgb(92, 64, 3);
    color: whitesmoke;
    font-size: x-large;
    padding: 1%;
}