/* 
    MEDIA QUERIES

    Rule of thumb: order elements based on element, class, and id, followed by how 
    it appears on page.
*/

/* Polish: rare fix for right arrow behind img */
@media only screen and (max-width: 1804px){


}

/* Polish: rare fix for right arrow behind img */
@media only screen and (max-width: 1536px){
}

/* Polish: rare fix for right arrow behind img */
@media only screen and (max-width: 1440px){
  
}

/* Tablet Large (Mircosoft Surface Duo) */
@media only screen and (max-width: 1114px){

}

/* Itch.io Viewport (Half 1080p) */
@media only screen and (max-width: 960px){

    /* CLASS */
    .player-stats-bar,
    .player-action-bar{
        width: 89vw;
        height: 7%;
    }

    /* temporary make these disappear until full screen */
    .menu-bkg.bottom{
        display: none;
    }

    .game-menu{
        bottom: 0;
        height: auto;
    }

    .menu-options button{
        padding: 0.25rem;
    }

    .player-detector-bar{
        bottom: 70px;
        width: 89vw;
    }

    /* ID */
    #start-menu-bkg {
        width: 50%;
    }

    #start-menu-bkg h1 {
        margin: 1rem;
    }
}

/* Galaxy Z Fold 5 Tablet */
@media only screen and (max-width: 884px){

}


/* Tablet iPad  */
@media only screen and (max-width: 768px){

}

/* Tablet Microsoft Surface Pro */
@media only screen and (max-width: 720px){

}

/* Tablet Small (not used except for design transition) */
@media only screen and (max-width: 640px){

    main{
        height: auto;
    }

    /* CLASS */

    .menu-bkg{
        position: relative;
    }
}

/* Mobile Large 480 */
@media only screen and (max-width: 480px){

}

/* Mobile Large 390*/
@media only screen and (max-width: 390px){

}

/* Mobile Small */
@media only screen and (max-width: 320px){

}

/* Apple Watch or less*/
@media only screen and (max-width: 200px){

   
}

/* Apple Watch */
@media only screen and (max-width: 162px){

}

/* Thumbnail */
@media only screen and (max-width: 75px){

   
    
}