/* Grid Layout Begin */

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

/* main grid layout */

footer{
    grid-area: footer;
    width: 100%;
}

main{
    grid-area: main;
}

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

header{
    grid-area: header;
}

/* sub grid layouts */

.index{
    display: grid;
    grid-template-columns: 33% 34% 33%;
    grid-template-areas: 
    "intro intro intro"
    "rickroll rickroll ."
    "examples indexImg indexImg"
    ". citation ."
    
}
.index .intro{
    grid-area: intro;
}
.index .rickroll{
    grid-area: rickroll;
}
.index .examples{
    grid-area: examples;
}
.index .indexImg{
    grid-area: indexImg;
}
.index .citation{
    grid-area: citation;
}

.detail{
    display: grid;
    grid-template-columns: 33% 34% 33%;
    grid-template-areas:
    "detail-title detail-title ."
    "nft1 nft2 nft3"
    "nft4 nft5 nft6"
    /*"nft7 nft8 nft9"*/
    "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 .nft1{
    grid-area: nft1;
}
.detail .nft2{
    grid-area: nft2;
}
.detail .nft3{
    grid-area: nft3;
}
.detail .nft4{
    grid-area: nft4;
}
.detail .nft5{
    grid-area: nft5;
}
.detail .nft6{
    grid-area: nft6;
}
.detail .disclaimer{
    grid-area: disclaimer;
}

.form{
    display: grid;
    grid-template-columns: auto 50% auto;
    grid-template-areas: 
    ". form-title ."
    ". nft-form ."
}
.form .form-title{
    grid-area: form-title;
}
.form .nft-form{
    grid-area: nft-form;
}

.array{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
    "array-intro array-intro"
    "array-table ."
    "array-description array-description"
    "monke ."
}
.array .array-intro{
    grid-area: array-intro;
}
.array .array-table{
    grid-area: array-table;
}
.array .array-description{
    grid-area: array-description;
}
.array .monke{
    grid-area: monke;
    color: mediumslateblue;
}

/* End Of Grid Layout */


/* General Web Styling */

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

a{
    color: mediumslateblue;
}

body{
    margin: 0 auto;
    padding: 4em 5em;
    background-color: rgb(28, 24, 32);
    font-family: monospace;
    font-size: 1.25em;
    color: gainsboro;
}

h1{
    font-family: 'Courier New', Courier, monospace;
}

img{
    max-width: 100%;
}

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

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