/***############### Base reset and generic styles for print ***/
/*Enable background-colors and background-images on (most) browsers. */
* { -webkit-print-color-adjust: exact !important; /* Chrome, Safari */ color-adjust: exact !important; /* Firefox */ }

.noprint { display: none; }
/***########## End of General Reset and Setup ****/



/***############### Website Specific Styles. ***/
/*Hide certain page elements if needed.  */
.slideshow, .slideshow__slide-button, #game {
}

/* Prevent mid-item splitting onto two pages if possible*/
.message, footer, #game, .walkthrough-image-container { break-inside: avoid; page-break-inside: avoid; /*Older version*/ }

.input-container input, .input-container textarea, input:focus, textarea:focus {
    box-shadow: none;  /*Prevents unexpected box-shadows from printing in textareas on some browsers like Firefox. */
}

/*Index*/
.slideshow__image { width: 600px; padding-bottom: 326.25px; }
.slideshow__icon.left { top: 196px; }
.slideshow__icon.right { top: 196px; }

/* Games */
#game, #theCanvas { margin-left: auto; margin-right: auto; }

#game { width: 400px; }

#theCanvas { width: 400px; }



@media only print and (max-width: 689px){
    
    #game { display: none; }
    .game-notes__browser-width-commentary { display: block; padding-top: 25px; padding-bottom: 25px; text-align: center; }
    
}



@media only print and (min-width: 500px){
    
    h2 { font-size: 20px; }
    h3 { font-size: 20px; }
    
    /* General sitewide sections */
    .content { width: 100%; }
    .main-title-container { padding-left: 80px; }  
    .subtitle-container { padding-left: 80px; }
    #logo { top: 20px; left: 10px; width: 60px; }

    /* Header styles */
    .main-title-container__main-title a { font-size: 32px; }
    
    /* Nav styles */
    .nav__nav-list { width: 100%; }
    .nav__item { padding-left: 0%; padding-right: 6%; font-size: 17px; }
    .nav .nav__nav-link { font-size: 17px; }
    
}