/* Grid Layout Begin */

.grid-layout {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
        "nav"
        "header"
        "main"
        "footer";
    justify-items: center;
    justify-content: center;
}

/* main grid layout */

footer{
    grid-area: footer;
    border: thin solid mediumslateblue;
    display: inline-block;
    font-size: smaller;
    text-decoration: none;
    padding: 0.25em 1em;
    background-color: rgb(24, 26, 32);
}

main{
    grid-area: main;
    padding: 2em;
}

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

header{
    grid-area: header;
    padding: 1em;
}

/* sub grid layouts */

.index {
    display: grid;
    grid-template-columns: 33% 34% 33%;
    grid-template-areas:
        "intro intro recent-activity"
        "stats stats recent-activity"
        "examples examples recent-activity";
    column-gap: 1vw;
    /* justify-items: center; */
}
.index .intro{
    grid-area: intro;
}
.index .stats{
    grid-area: stats;
}
.index .stats p{
    color:chartreuse;
}
.index .examples{
    grid-area: examples;
}
.index .recent-activity{
    grid-area: recent-activity;
    border: double thick chartreuse;
}
.index .recent-activity .responses{
    background-color: black;
}
.index .citation{
    grid-area: citation;
}

.detail{
    display: grid;
    grid-template-columns: 33% 34% 33%;
    grid-template-areas:
    "detail-title detail-title ."
    "area1 area1 area1"
    "area2 area2 area2"
    "area3 area3 area3"
    "disclaimer disclaimer ."
}
.detail img{
    /* Need to get this to resize bc its not selecting image, just section */
    max-width: 50%;
    height: auto;
}
.detail .detail-title{
    grid-area: detail-title;
}
.detail .area1{
    grid-area: area1;
}
.detail .area2{
    grid-area: area2;
}
.detail .area3{
    grid-area: area3;
}

.detail .disclaimer{
    grid-area: disclaimer;
}

form{

    border-bottom: dotted greenyellow;
    border-right: dotted greenyellow;
    background: linear-gradient(90deg, rgb(0,3,69) 0%, rgb(23,135,210) 100%);
    /* display: grid;
    grid-template-columns: auto 50% auto;
    grid-template-areas: 
    ". form-title ."
    ". main-form ." */
}
/* .form .form-title{
    grid-area: form-title;
}
.form .main-form{
    grid-area: main-form;
} */

/* End Of Grid Layout */


/* General Web Styling */

.activePage{
    border-bottom: medium solid deeppink ;
}

a{
    color: deeppink;
}

body{
    margin: 0 auto;
    padding: 4em 5em;
    background-color: black;
    font-family: monospace;
    font-size: 1.55em;
    color: gainsboro;
}

h1{
    font-family: 'Courier New', Courier, monospace;
    margin: 0 -9999rem;
    padding: .5rem 9999rem;
    background: linear-gradient(90deg, rgb(255, 0, 203) 49.5%, rgb(255, 251, 0) 50.5%);
    color: black;
    border: thick double black;
}

html, body {
    overflow-x: clip;
}

img{
    max-width: 100%;
}

nav a{
    border: thin solid crimson;
    display: inline-block;
    font-size: 2vw;
    text-decoration: none;
    background-color: rgb(28, 24, 32);
}

#gallery{
    display: grid;
    grid-template-columns: 50%;
    grid-template-areas:"gallery title" "img01" "img02" "img03" "img04" "img05" "img06" "img07" "img08" "img09" "img10" "reflection";
}

#gallery a{
    color: #bf8805;
}

#gallery img{
    max-width: 50vw;
    border: thin solid #bf8805;
}

#gallery nav a{
    border: thin solid #bf8805;
    background-color: rgb(0 0 0);
}

#gallery nav .activePage{
    border-bottom: medium solid gainsboro;
}

table{
    border: medium solid mediumslateblue;
}

td{
    border: thin solid rgba(124, 104, 238, 0.473);
}

th{
    border: medium solid rgba(124, 104, 238, 0.637);
}