/* ------------------------- JNC GRID CSS START-----------------------*/
.JnCPageGrid{
    display:grid;
    width: 90vw;
    height:auto;
    grid-template-areas:
        "title title title title title title"
        "textDescript textDescript textDescript textDescript textDescript textDescript"
        "showPhoto showPhoto showPhoto titleGif titleGif titleGif"
        "showPhoto showPhoto showPhoto link link link"
        "showPhoto showPhoto showPhoto vidTrailer vidTrailer vidTrailer"
        "gameDescript gameDescript gameDescript gameDescript gameDescript gameDescript"
        "screenshots screenshots screenshots screenshots screenshots screenshots"
        "visDevHeader visDevHeader visDevHeader visDevHeader visDevHeader visDevHeader"
        "visDevDescript visDevDescript visDevDescript visDevDescript visDevDescript visDevDescript"
        "flowchartMess flowchartMess flowchartMess charaCast charaCast charaCast"
        "flowchartMess flowchartMess flowchartMess charaCastDescrip charaCastDescrip charaCastDescrip"
        "flowchartMess flowchartMess flowchartMess charaCastSil charaCastSil charaCastSil"
        "charaCastDev charaCastDev charaCastDev charaCastDev charaCastDev charaCastDev"
        "visDevDescript2 visDevDescript2 visDevDescript2 visDevDescript2 visDevDescript2 visDevDescript2"
        "tileMaps tileMaps tileMaps tileMaps tileMaps tileMaps"
        "backgroundSlides backgroundSlides backgroundSlides backgroundSlides filler filler"
        "backgroundSlides backgroundSlides backgroundSlides backgroundSlides backgroundTextDes backgroundTextDes"
        "backgroundSlides backgroundSlides backgroundSlides backgroundSlides backgroundTextDes backgroundTextDes"
        "backgroundSlides backgroundSlides backgroundSlides backgroundSlides filler2 filler2"
        "techSideHeader techSideHeader techSideHeader techSideHeader techSideHeader techSideHeader"
        "creditsScene creditsScene creditsScene techSideDescrip techSideDescrip techSideDescrip";
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 3px;
       /*  background-color: dodgerblue; */
        padding: 5px;
}
.JnCPageGrid div {
    display:flex;
    /* background-color: white; */
    padding: 10px;
    justify-content: center;
}
.JnCPageGrid img{
    width: 100%;
    height: auto;
    margin: 0px 5px;
}
.JnCPageGrid div.title {
    grid-area: title;
    text-align: center;
    padding: 0px;
}
.JnCPageGrid div.showPhoto {
    grid-area: showPhoto;
}
.JnCPageGrid div.showPhoto img{
    object-fit: contain;
}
.JnCPageGrid div.textDescript {
    grid-area: textDescript;
    flex-direction: column;
    padding: 0px
}
.JnCPageGrid div.gameDescript {
    grid-area: gameDescript;
    padding: 0px
}
.JnCPageGrid div.screenshots {
    grid-area: screenshots;
}
.JnCPageGrid div.visDevHeader {
    grid-area: visDevHeader;
    padding: 0px
}
.JnCPageGrid div.visDevDescript {
    grid-area: visDevDescript;
    padding: 0px
}
.JnCPageGrid div.titleGif {
    grid-area: titleGif;
}
.JnCPageGrid div.titleGif img{
    object-fit: contain;
}
.JnCPageGrid div.vidTrailer {
    grid-area: vidTrailer;
}
.JnCPageGrid div.flowchartMess {
    grid-area: flowchartMess;
    margin: auto;
    width: 75%;
}
.JnCPageGrid div.charaCast {
    grid-area: charaCast;
}
.JnCPageGrid div.charaCast img{
    grid-area: charaCast;
    object-fit: contain; 
}
.JnCPageGrid div.charaCastDescrip {
    grid-area: charaCastDescrip;
}
.JnCPageGrid div.charaCastDescrip p{
    align-content: center;
}
.JnCPageGrid div.charaCastSil {
    grid-area: charaCastSil;
}
.JnCPageGrid div.charaCastSil img{
    grid-area: charaCastSil;
    object-fit: contain; 
}
.JnCPageGrid div.charaCastDev {
    grid-area: charaCastDev;
    object-fit: contain; 
}
.JnCPageGrid div.link {
    grid-area: link;
    display: block;
    margin: auto;
}
.JnCPageGrid div.visDevDescript2 {
    grid-area: visDevDescript2;
    text-align: center;  
}
.JnCPageGrid div.tileMaps {
    grid-area: tileMaps;
}
.JnCPageGrid div.tileMaps img{
    object-fit:contain; 
    min-width: 30vw;
}
.JnCPageGrid div.backgroundSlides {
    grid-area: backgroundSlides;
}
.JnCPageGrid div.backgroundSlides div{
    padding: 0px;
    flex-direction: column;
    align-content: center;
}
.JnCPageGrid div.backgroundTextDes {
    grid-area: backgroundTextDes;
    flex-direction: column;
    margin: auto;
    width: 100%;
}
.mySlidesText{
    text-align: center;
    align-content: center;
    height: 250px;
}
.mySlidesTitles{
    text-align: center;
    align-content: center;
    width: 100%;
}
.JnCPageGrid div.techSideHeader {
    grid-area: techSideHeader;
}
.JnCPageGrid div.creditsScene {
    grid-area: creditsScene;
    display: block;
    margin: auto;
}
.JnCPageGrid div.techSideDescrip {
    grid-area: techSideDescrip;
    text-align: center;
    align-content: center;
    margin: auto;
}
.JnCPageGrid div.filler {
    grid-area: filler;
}
.JnCPageGrid div.filler2 {
    grid-area: filler2;
}

/* .projectImg{
    width: 50%;
    height: auto;
} */
/* ------------------------- JNC GRID CSS END-----------------------*/