:root{
    --main-bg-color: #747474;
    --nav-bg-color-rgba: rgb(154, 133, 230);
    --main-text-color: rgb(54, 54, 53);
    --background-odd: rgb(178, 203, 232);
    --background-even: rgb(171, 191, 236);
}

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

p{
    max-width: 70em;
    margin: 0;
}

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

html{
    background-image: url("../images/wavyBackground.jpg");
    background-color: rgb(171, 191, 222);
    color: var(--main-text-color);
}

body{
    display:grid;
    grid-template-areas: "header" "nav" "main" "footer";
    width: 90%;
    margin: 1% auto;
    background-color: rgba(171, 171, 174, 0.717);
}

header h1,
header h2 {
    color: rgb(2, 15, 93);
    text-transform: uppercase;
}

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

nav a:hover{
    text-decoration-color:rgb(226, 223, 223);
    color:rgb(226, 223, 223);
}

nav a {
    display: inline-block;
}

nav a,
footer a:visited{
    text-decoration-color:rgb(0, 0, 0);
    color:rgb(0, 0, 0)
}

footer a:hover{
    text-decoration-color: rgb(226, 223, 223);
    color:rgb(226, 223, 223);

}



nav,
footer {
    background-color: rgba(163, 193, 250, 0.836);
    border-bottom: medium solid  rgba(205, 218, 254, 0.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: rgb(208, 225, 250);
    color: black;

}

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

figure{ 
    width: 23em;
    padding: 2%;
    text-align: center;
    border: thin solid rgb(0, 7, 7);
    border-radius: 1.5%;
}

figcaption{
    color: #4a4a4b;
    font-style: italic;
}

img{
    border-radius: 1.5%;
    max-width: 23em;
}

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

.small{
    width: 50%;
}

.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" "box-5 box-6" "box-7 box-7" "box-8 box-8";
    grid-template-columns: 35em auto;
    grid-gap: 1%;
    min-height: 100vh;
}

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

}

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

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

.activePage {background-color: rgb(208, 230, 252)}

/* 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: #a9c6ec
}

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

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

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

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