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

.activePage{
    border: thick solid black;
}

header a, main a{ /*excludes footer*/
    color: var(--header-color);
}

a:hover{
    background-color: rgb(175, 97, 25);
    color:black;
    text-decoration: underline;
}

body{
    margin: 0 auto;
    padding: 4em 5em;
    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;
}

footer p{
    text-align: center;
}
/*vvvvvvvvvvvvvvv=THIS IS ALL FOR THE GRID LAYOUT=vvvvvvvvvvvvvvvvvvv*/

.grid_layout{
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: 
    "nav"
    "header"
    "main"
    "footer"
}

.index{   /*pain!!!!!!!*/
    display: grid;
    grid-template-columns: 33% 33% 34%;
    grid-template-areas: 
    "dogs-paragraph dogs-paragraph dogs-figure"
    "top5-dogs-list top5-dogs-list top5-dogs-list"
    "adopt-dogs euthanize-table euthanize-table"
}

/* INDIVIDUAL BLOCKS INDEX*/

footer{
    grid-area: footer;
    width: 100%;
    background-color: var(--header-color);
    bottom: 0;
}

main{
    grid-area: main;
}

nav{
    grid-area: nav;
    position: sticky;
    top: 0;
}

header{
    grid-area: header;
}

.grid_layout .dogs-figure{
    grid-area: dogs-figure;
}

.grid_layout .dogs-paragraph{
    grid-area: dogs-paragraph;
}

.grid_layout .top5-dogs-list{
    grid-area: top5-dogs-list;
}

.grid_layout .adopt-dogs{
    grid-area: adopt-dogs;
}

.grid_layout .euthanize-table{
    grid-area: euthanize-table;
}

/*Grid layout for detail page*/

.grid_layout .detail_title{
    grid-area: detail_title;
}

.grid_layout .detail_cons{
    grid-area: detail_cons;
}

.grid_layout .detail_overbreeding{
    grid-area: detail_overbreeding;
}

.grid_layout .detail_cite{
    grid-area: detail_cite;
}

.detail{   
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 
    "detail_title detail_title"
    "detail_cons detail_overbreeding"
    "detail_cite ."
}

/*Grid Layout for form page*/

.grid_layout .form_title{
    grid-area: form_title;
}

.grid_layout .output{
    grid-area: output;
}

.grid_layout .dog_form{
    grid-area: dog_form;
}

.form{   
    display: grid;
    grid-template-columns: auto 50% auto;
    grid-template-areas: 
    ". form_title ."
    ". output ."
    ". dog_form ."
}

/*Grid Layout for array page*/

.grid_layout .cool_dogs{
    grid-area: cool_dogs;
}

.grid_layout .popular_dogs{
    grid-area: popular_dogs;
}

.grid_layout .polite_cite{
    grid-area: polite_cite;
}

.array{
    display: grid;
    grid-template-columns: auto 50% auto;
    grid-template-areas: 
    "cool_dogs cool_dogs ."
    "popular_dogs popular_dogs ."
    "polite_cite polite_cite ."
}
/*    END OF GRID LAYOUT     */

/*vvvvvvvvvvvv START OF FORM STYLING vvvvvvvvvvvv*/

form{
    background-color: var(--bg-color);
    float: left;
}

form label{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

form [type="text"], form option, [type="submit"] {
    border: .25em solid black;
    background-color: var(--bg-color);
    color: var(--header-color);
}

form [type="checkbox"], form [type="radio"]{
    width: 2em;
    height: 2em;
}

form textarea{
    border: .25em solid black;
    background-color: var(--bg-color);
    color: var(--header-color);
}

form .textbox{
    display: block;
    margin: 1%;
}

form p{
    text-indent: 0em;
    margin: 0 auto;
}

/*vvvvvvvvvvvv END OF FORM STYLING vvvvvvvvvvvvv*/

h1{
    text-transform: uppercase;
    background-color: var(--h1-h2-color);
    color: black
}

/*VVVVVVVVVVVVVV CRAZEE PAGE STYLING VVVVVVVVVVVV*/

.crazy h3{
    text-shadow: 0 0 1em rgb(163, 146, 51), 0 0 2em rgb(190, 149, 14);
}

.crazy .pacer-test{
    background: linear-gradient(purple,pink);
    width: 75vw;
}

.crazy h1{
    width: 5em;
    height: 5em;
    transition: width 1s, height 1s;
}

.crazy h1:hover{
    width: 15em;
    height: 15em;
}

.crazy .animated{
    width: 10em;
    height: 10em;
    animation-name: colorchnge;
    animation-duration: 5s;
    animation-delay: 3s;
}

h2{
    background-color: var(--h1-h2-color);
    color: black
}

header{
    background-color: var(--header-color);
}

header figure{
    margin: auto;
    width: 100%;
}

img{
    max-width:100% ;
}

.index_fig{  
    border-radius: 2em;
    border: .1em solid black;
    padding: 1%;
    width: 80%;
}

.detail_fig{
    border-radius: 2em;
    border: .1em solid black;
    padding: 1%;
    width: 50%;
}

/*change to just immediate li after ol in future so that the secondary rows arent wonky*/
li{
    background-color: rgba(39, 34, 35, 0.842);
}

main{
    background-color: var(--bg-color);
}

nav a:link{
    background-color: rgba(39, 34, 35, 0.842);
    text-decoration: none;
}

nav a{
    color: var(--header-color);
    display: inline-block;
    width: 19%;
    font-size: 3vw;
}

nav{
    border: thin solid black;
    background-color: var(--header-color);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

p{
    text-indent: 2em;
    padding: 1em 1em;
    color: #F9F4F5;
}

.site_img{
    border-radius: 2em;
    border: .1em solid black;
    margin: auto;
}

table{
    max-width: 100%;
    margin: 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);
}