@media screen and (max-width: 1400px)
{
	
/* PINK MODE
 * The content box becomes wider and with less padding on the sides
 * the article header box also becomes wider
 * The navigation bar now takes up two rows (logo and then options)
 * The navigation bar no longer follows as you scroll down the page
 * Tooltipster boxes are now in the middle of the screen rather than off to the side
 * Some tweaks to the padding of videos
 * (they get waaay too much letter boxing when screen is narrow
 * I still haven't fixed this to where I am fully happy...)
 */
	
article #content
{
/* background-color: pink; */ 
padding: 4em 12.5%;
width: 75%;
}

article header
{
width: 70vw;
}

.video-js
{
margin: 0 auto;
}

.video-js + figcaption
{
margin-top: 0.5em;
}

/* Staircase Spirit Navigation now uses two lines */

#staircase-spirit-nav header a#logo
{
margin: 0 auto;
text-align: center;
display: block;
}

#staircase-spirit-nav ul
{
justify-content: space-around;
max-width: 100vw;
text-align: center;
}

#staircase-spirit-nav ul li
{
flex: 0 1 30%;
}
/* the header no longer follows down the page */
#staircase-spirit-nav, #staircase-spirit-nav ul
{
position: initial;
}

/* if the header no longer follows down the page, we no longer need the ensure the anchor links put us below the header */
:target:before {
  height:unset;
  margin:0;
}

.tooltipster-base[style]
{
left: calc( 50vw - calc( 250px / 2) ) !important;
}

:root
{
--tooltipster-border-size: 2px !important;
}