
:root{
    --bg-color: rgba(57, 61, 63, 0.726);
    --header-color: #fea26d;
    --h1-h2-color: #F9F4F5;
    --font-type: Helvetica, Arial, sans-serif;
} /*all variables go here*/

a{
    color: black;
}

header a, main a{ /*excludes footer*/
    color: var(--header-color);
}

a:hover{
    background-color: rgb(175, 97, 25);
    color:black;
}

body{
    margin: 0 auto;
    padding: 4em 10em;
    background-image: url("../image/walter_bg.jpg"); /*why does this not work?*/
    background-color: rgba(86, 117, 138, 0.25);
    color: #F9F4F5;
    font-family: var(--font-type);
}

caption{
    margin-left: auto;
    font-size: large;
    text-decoration: underline;
}

cite{
    font-size: xx-small;
}

figure{
    background-color: var(--bg-color);
    float: left;
    text-align: center;
    width: 20%;
}

figcaption{
    color: var(--header-color);
    font-size: medium;
}

form{
    background-color: var(--bg-color);
    float: left;
}

form p{
    text-indent: 0em;
    margin: 0 auto;
}

footer{
    clear: both;
    margin: auto auto;
    background-color: var(--header-color);
}

h1{
    text-transform: uppercase;
    background-color: var(--h1-h2-color);
    color: black
}

h2{
    background-color: var(--h1-h2-color);
    color: black
}

header{
    background-color: var(--header-color);
}

img{
    max-width:100% ;
}

.index_fig{
    float: right;    
    border-radius: 2em;
    border: .1em solid black;
    padding: 1em 3em;
}
/*change to just immediate li after ol in future so that the secondary rows arent wonky*/
li:nth-child(odd){
    background-color: rgba(39, 34, 35, 0.842);
}

li:nth-child(even){
    background-color: black;
}

.logo{
    float: left;
    width: 30%; 
}

main{
    background-color: var(--bg-color);
    float:left ;
}

nav a:link{
    background-color: rgba(39, 34, 35, 0.842);
    color: var(--header-color);
    text-decoration: none;
}

nav a:hover{
    text-decoration: underline;
}

nav a{
    display: inline-block;
    width: 19%;
}

nav{
    border: thin solid black;
    background-color: var(--header-color);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 300%;
}

p{
    text-indent: 2em;
    padding: 1em 1em;
    color: #F9F4F5;
}

.site_fig{
    border-radius: 2em;
    border: .1em solid black;
    padding: 1em 3em;
}

.site_img{
    border-radius: 2em;
    border: .1em solid black;
    margin: 2em auto;
}

table{
    margin: 0 auto;
    width: 80%;
    border: medium solid black;
    border-collapse:collapse;
}

td{
    border: medium inset var(--bg-color);
}

th{
    border-left: medium solid black;
    text-align: center;
    padding: 1em 1.5em;
}

tr:nth-child(odd){
    background-color: rgb(66, 66, 66);
}

tr:nth-child(even){
    background-color: rgb(17, 17, 17);
}

