html {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}

.grid-container-main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto);
    grid-template-areas: 
    'lg1 lg1 ttl ttl ttl ttl ttl ttl ttl ttl lg2 lg2  '
    'nv1 nv1 nv1 nv2 nv2 nv2 nv3 nv3 nv3 nv4 nv4 nv4'
    'sol sol sol dwn dwn dwn fdb fdb fdb tem tem tem';
    column-gap: 5px;
    row-gap: 5px;
    background-color: black;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto);
    grid-template-areas: 
    'lg1 lg1 ttl ttl ttl ttl ttl ttl ttl ttl lg2 lg2  '
    'nv1 nv1 nv1 nv2 nv2 nv2 nv3 nv3 nv3 nv4 nv4 nv4'
    'lft lft lft mid mid mid mid mid mid .   .   .  ';
    column-gap: 5px;
    row-gap: 5px;
    background-color: black;
}

.grid-container-team {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(0, auto);
    grid-template-areas: 
    'lg1 lg1 ttl ttl ttl ttl ttl ttl ttl ttl lg2 lg2  '
    'nv1 nv1 nv1 nv2 nv2 nv2 nv3 nv3 nv3 nv4 nv4 nv4'
    'sol sol sol dwn dwn dwn fdb fdb fdb tem tem tem'
    'gen gen gen gen gen gen gen gen gen gen gen gen';
    column-gap: 5px;
    row-gap: 5px;
    background-color: black;
}

/* HEADER ELEMENTS */
.logo {
    grid-area: lg1;
} 

.logo2 {
    grid-area: lg2;
} 

header {
    grid-area: ttl;
    color: #abdbec;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 72px;
}

/* NAV BAR ELEMENTS */
nav {
    display: flex;
    align-items: center;
    justify-content: center; 
    font-family: 'Open Sans', sans-serif;
}

.nv1 {
    grid-area: nv1;
    background-color: #145153;
}

.nv2 {
    grid-area: nv2;
    background-color: #38a3a5;
}
.nv3 {
    grid-area: nv3;
    background-color: #3af1f9;
}
.nv4 {
    grid-area: nv4;
    background-color: #abdbec;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: black;
}

.nv1 a:link, .nv1 a:visited, .nv1 a:hover, .nv1 a:active  {
    color: white;
}

.nv2 a:link, .nv2 a:visited, .nv2 a:hover, .nv2 a:active  {
    color: white;
}

/* MAIN ELEMENTS */
article {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
}

.solitaire {
    grid-area: sol;
    background: url("../pictures/s01.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

.downloads {
    grid-area: dwn;
    background: url("../pictures/c01.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

.feedback {
    grid-area: fdb;
    background: url("../pictures/h01.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

.team {
    grid-area: tem;
    background: url("../pictures/d01.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

/* SOLITAIRE PAGE */
.sol-card {
    grid-area: lft;
    background: url("../pictures/s01a.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

.sol-expanded {
    grid-area: mid;
    background-color: #145153;
    color: white;
    padding: 10px;
    display: grid; /* Putting a mini grid inside this */
    grid-template-columns: 1fr 1fr;
}

 /* SOLITAIRE AND DOWNLOADS PAGES */
.top {
    display: block;
    grid-column: 1 / span 2;
    grid-row: 1;
    /* border: 1px solid black; */
}

.left {
    grid-column: 1;
    grid-row: 2;
    /* border: 1px solid black; */
    height: 100%;
}

.right {
    grid-column: 2;
    grid-row: 2;
    /* border: 1px solid black; */
    height: 100%;
}

.top > h2 {
    text-align: center;
}

.top a:link, .top a:visited, .top a:hover, .top a:active {
    color: #abdbec;
}

/* DOWNLOADS PAGE */
.dwn-card {
    grid-area: lft;
    background: url("../pictures/c01a.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

.dwn-expanded {
    display:block;
    grid-area: mid;
    background-color: #38a3a5;
    color: white;
    padding: 10px;
    display: grid; /* Putting a mini grid inside this */
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

/* .dwn-expanded > h2 {
    text-align: center;
} */

/* FEEDBACK PAGE */
.fbk-card {
    grid-area: lft;
    background: url("../pictures/h01a.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

.fbk-expanded {
    grid-area: mid;
    background-color: #3af1f9;
    color: white;
}

/* TEAM PAGE */
.gen {
    grid-area: gen;
    display: block;
    background-color: #abdbec;
    padding: 10px;
}

#ari {
    grid-area: sol;
    background: url("../pictures/s01a.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

#cam {
    grid-area: dwn;
    background: url("../pictures/c01a.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

#jenne {
    grid-area: fdb;
    background: url("../pictures/h01a.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

#owen {
    grid-area: tem;
    background: url("../pictures/d01a.png") center center;
    background-size: auto 80%;
    background-repeat: no-repeat;
}

.gen > h2 {
    text-align: center;
}

#ari a:link, #ari a:visited, #ari a:hover, #ari a:active {
    color: #145153;
}

#cam a:link, #cam a:visited, #cam a:hover, #cam a:active {
    color: #145153;
}

#jenne a:link, #jenne a:visited, #jenne a:hover, #jenne a:active {
    color: #145153;
}

#owen a:link, #owen a:visited, #owen a:hover, #owen a:active {
    color: #145153;
}

/* FOOTER ELEMENTS */
footer {
    grid-area: ftr;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}