@media only screen and (max-width: 1250px) {
    .modal-content {
        width: 100%;
    }
    .modal-portrait{
        width:90%
    }
    .mySlidesText{
        height: 200px;
    }
    .JnCPageGrid div.backgroundTextDes div{
        margin: 10px;
    }
    .JnCPageGrid div.backgroundTextDes a {
        align-content: center;
    }
    .JnCPageGrid div.screenshots img{
        width: 30%;
    }
    .JnCPageGrid div.charaCastDev img{
        width: 30%;
    }
    .mySlidesTitles{
        width: 75%;
    }
    .iframeContainer{
        width: 640px;
        height: 420px;
    }
    .iframeContainer2{
        width: 400px;
        height: 250px;
        margin:auto;
    }
    .verticalImgs{
        width: 700px;
    }
    .verticalImgs2{
        width: 700px;
    }
    .horizontalImgs{
        width: 700px;
    }
    .leftSideColumn{
        display: none;
    }
    .centerAlt3{
        height: 150vh;
    }
}
/* Overrides desktop style when viewport is less than 900px (for tablet portrait) */
@media only screen and (max-width: 850px) {
    a{
        font-size: 32px;
        margin-right: 20px; 
    }
    li a{
        font-size: 24px;
        margin: 0px 20px;
    }
    .dropdown {
        font-size: 22px;
        margin-right: 20px;
    }
    .center {
        flex-direction: column; 
    }
    .centerAlt3{
        height: 125vh;
    }
    .iframeContainer{
        width: 420px;
        height: 640px;
    }
    .iframeContainer2{
        width: 320px;
        height: 150px;
        margin:auto;
    }
    .iframeContainer iframe{
        height: 420px;
        width: 640px;
        transform-origin: center;
        transform: rotate(-0.25turn)translateX(-110px)translateY(-110px);
    }
    .logo{
        height: 80px; 
        object-fit:contain; 
        margin:0px 15px 0px 10px; 
        padding-top: 15px
    }
    .homePageGrid{
        display:grid;
        width: 90vw;
        height:auto;
        grid-template-areas:
            "topLeft"
            "topRight"
            "midLeft"
            "midMiddle"
            "midRight"
            "bottomLeft"
            "bottomMiddle"
            "bottomRight";
        grid-template-columns: 1fr;
        gap: 3px;
    /*  background-color: dodgerblue; */
        padding: 5px;
    }
    .centerAlt2 {
        display: flex;
        flex-direction: column;
        justify-content: top;
        align-items: center;
        margin: 0px 25px;
        text-align: center; 
        align-content: flex-start;
    }
    .JnCPageGrid{
        display:grid;
        width: 95vw;
        height:auto;
        grid-template-areas:
            "title title"
            "textDescript textDescript"
            "showPhoto showPhoto"
            "titleGif titleGif"
            "link link"
            "vidTrailer vidTrailer"
            "gameDescript gameDescript"
            "screenshots screenshots"
            "visDevHeader visDevHeader"
            "visDevDescript visDevDescript"
            "flowchartMess flowchartMess"
            "charaCast charaCast"
            "charaCastDescrip charaCastDescrip"
            "charaCastSil charaCastSil"
            "charaCastDev charaCastDev"
            "visDevDescript2 visDevDescript2"
            "tileMaps titleMaps"
            "backgroundSlides backgroundSlides"
            "backgroundSlides backgroundSlides"
            "backgroundTextDes backgroundTextDes"
            "backgroundTextDes backgroundTextDes"
            "techSideHeader techSideHeader"
            "creditsScene creditsScene"
            "techSideDescrip techSideDescrip";
            grid-template-columns:1fr 1fr;
            gap: 2px;
        /*  background-color: dodgerblue; */
            padding: 3px;
    }
    .JnCPageGrid div.screenshots {
        flex-direction: column;
    }
    .JnCPageGrid div.screenshots img{
        width: 100%;
    }
    .labMiceGrid{
        display:grid;
        width: 90vw;
        height:auto;
        grid-template-areas:
            "title "
            "captionLine"
            "shortDescript"
            "final"
            "printed"
            "descript"
            "sketches"
            "colors"
            "descript2"
            "organized"
            "lines"
            "colored";
            grid-template-columns: 1fr;
            gap: 3px;
            padding: 5px;
    }
    .aboutPhoto{
        width: 350px;
    }
    .flavorColumn{
        background: linear-gradient(to left, #88027f, #0691c3 90%);
        display: flex; 
        flex-direction: row; 
        justify-content: flex-end; 
        align-items: center;
        overflow: hidden; 
        height: 250px;
        width: 750px;
    }
    .playP{
        margin: 10px 5px;
    }
}
/* Overrides desktop style when viewport is less than 600px (for smart phones) */
@media only screen and (max-width: 600px) {
    a{
        font-size: 20px;
        margin-right: 20px; 
    }
    li a{
        font-size: 18px;
        margin: 0px 20px;
    }
    .dropdown .dropbtn {
        font-size: 20px;
    }
    .dropdown-content a {
        font-size: 18px;
    }
    .redirectButton{
        font-size:24px;
    }
    .redirectButtonSmall{
        font-size: 18px;
    }
    h1{
        font-size:30px;
    }
    h2{
        font-size:26px;
    }
    p{
        font-size: 18px;
    }
    .aInP{
        font-size: inherit;
    }
    .redirectButton{
        font-size:20px
    }
    .logo{
        height: 60px; 
    }
    .aboutCenter{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 300px;
        margin: 0px;
    }
    .aboutPhoto{
        width: 200px;
    }
    .flavorColumn{
        height: 200px;
        width: 400px;
    }
    .aboutFlavorDoodle{
        height: 150px; 
        width: 150px; 
        position: relative; 
        top: 40px;
    }
    .homePageIcon{
        width:150px; 
        height: 150px; 
    }
    .sketchesImgs{
        width:300px;
    }
    .sketchesImgs2{
        width: 350px;
    }
    .verticalImgs{
        width:300px;
    }
    .verticalImgs2{
        width:300px;
    }
    .horizontalImgs{
        width: 350px;
    }
    .slidesContainer{
        height: 300px;
        width:375px;
        margin: 5px 0px;
    }
    .slidesImg{
        height:275px;
        width:275px;
    }
    .flexRow{
        display: flex;
        justify-content: space-around;
    }
    .flexRow img{
        width: 50%;
    }
}