.buttonGrid{
    display: grid;
    grid-template-columns: 75% 25%;
}

#incorrectDiv{
    margin: 5vh;
}

.myIframe {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: auto; 
} 
.myIframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75%;
}

#quizHeader{
    text-align:left;
    background:white;
    margin-bottom:1vh;
    padding: 1vh 1vw 1vh 1vw;
}

#quizHeaderGrid{
    display: grid;
    grid-template-columns: 50% 50%;
}

.amOneIndent{
    font-size: 16px;
}

.amTwoIndent{
    font-size: 14px;
}

.anThreeIndent{
    font-size: 12px;
}

.amTRAP{
    color:rgb(226, 24, 24);
    font-size: 20px;
    font-style:italic;

}

.amSmallerTRAP{
    color:rgb(226, 24, 24);
    font-size: 18px;
    font-style:italic;

}

.am3SmallerTRAP{
    color:rgb(226, 24, 24);
    font-size: 16px;
    font-style:italic;
}


.amTIP{
    color:rgb(11, 175, 25);
    font-size: 20px;
    font-style:italic;
}

.amSmallerTIP{
    color:rgb(11, 175, 25);;
    font-size: 18px;
    font-style:italic;
}

.am3SmallerTIP{
    color:rgb(11, 175, 25);
    font-size: 16px;
    font-style:italic;
}

.amBlueNormal{
   background-color:#00274C;
}

.amMaizeNormal{
    background-color:#FFCB05;
    /*background-color:rgb(17, 211, 236);*/
}

nav .nav-pills .amBlueNormal:hover{
    background-color:pink;
}

.amMenu{
    color:white;
}

.homeMenuIcon{
    width:75px;
    height:50px;
}

body{
    font-size:18px;
}


.amCenter{
    margin-left:28%;
    margin-bottom:20px;
    width:50%;
}


li{
    margin-top:.5%;
}




.longRectangle{
    width:380px;
    height:225px;
    margin-left:auto;
    margin-right:auto;
}

.extraLongRectangle{
    width:440px;
    height:225px;
    margin-left:auto;
    margin-right:auto;
}

.extraLongRectangle2{
    width:360px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
    margin-top:15vh;
}

.extraLongRectangleCongenital{
    width:360px;
    height:120px;
    margin-left:auto;
    margin-right:auto;
    margin-top:15vh;
}



.squareModal{
    width:300px;
    height:240px;
    margin-left:auto;
    margin-right:auto;
}

.tallRectangle{
    width:300px;
    height:300px;
    margin-left:auto;
    margin-right:auto;
}

.smallerIndexTitle{
  
}

.mediumIndexTitle{

}


@media(min-width:1800px) and(max-width:2100px) {
    .longRectangle{
        width:460px;
        height:275px;
        margin-left:auto;
        margin-right:auto;
    }

    .extraLongRectangle{
        width:510px;
        height:275px;
        margin-left:auto;
        margin-right:auto;
    }

    .extraLongRectangle2{
        width:540px;
        height:275px;
        margin-left:auto;
        margin-right:auto;
    }

    .squareModal{
        width:360px;
        height:290px;
        margin-left:auto;
        margin-right:auto;
    }

    .tallRectangle{
        width:360px;
        height:360px;
        margin-left:auto;
        margin-right:auto;
    }

    
}


@media(min-width:2100px) {
    .longRectangle{
        width:500px;
        height:300px;
        margin-left:auto;
        margin-right:auto;
    }

    .extraLongRectangle{
        width:580px;
        height:300px;
        margin-left:auto;
        margin-right:auto;
    }

    .squareModal{
        width:400px;
        height:320px;
        margin-left:auto;
        margin-right:auto;
    }

    .tallRectangle{
        width:390px;
        height:390px;
        margin-left:auto;
        margin-right:auto;
    }
}

@media(max-width:1200px) and (min-width:851px){
    .longRectangle{
        width:350px;
        height:185px;
        margin-left:auto;
        margin-right:auto;
    }

    .extraLongRectangle{
        width:390px;
        height:185px;
        margin-left:auto;
        margin-right:auto;
    }

    .squareModal{
        width:270px;
        height:215px;
        margin-left:auto;
        margin-right:auto;
    }

    .tallRectangle{
        width:270px;
        height:270px;
        margin-left:auto;
        margin-right:auto;
    }

    

}

@media(max-width:850px){
    .longRectangle{
        width:320px;
        height:160px;
        margin-left:auto;
        margin-right:auto;
    }

    .extraLongRectangle{
        width:370px;
        height:160px;
        margin-left:auto;
        margin-right:auto;
    }


    .squareModal{
        width:245px;
        height:195px;
        margin-left:auto;
        margin-right:auto;
    }

    .tallRectangle{
        width:245px;
        height:245px;
        margin-left:auto;
        margin-right:auto;
    }

    .smallerIndexTitle{
        font-size:2vw;
    }

    .mediumIndexTitle{
        font-size:3.5vw;
    }
    

}


.amIndexArrows{
    display: grid;
    grid-template-columns: 50% 50%;
    color:white;
    margin-top:13px;
    
   }

   .amIndexArrows{
    display: grid;
    grid-template-columns: 50% 50%;
    color:white;
    margin-top:13px;
    
   }