@font-face {
    font-family: "kirupaPixel";
	src: url('/fonts/born2bsportyv2-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}


@font-face {
    font-family: "kirupaCode";
	src: url('/fonts/dmr.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

body {
	font-family: var(--serifFonts);
	padding: 0px;
	margin: 0px;
	text-align: left;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
	background: linear-gradient(180deg, var(--primaryLighter) 0px, var(--pageBackground) 300px);
	background-repeat: no-repeat;
}
.theme_dark body {
	background: linear-gradient(180deg, #000 0px, var(--pageBackground) 300px);
}
.theme_dark #kirupaOrangeLogo {
	filter: drop-shadow(1px 1px 10px #666);
}
#kirupaOrangeLogo {
	width: 64px;
}
.leftCat {
    position: absolute;
    transform: translate(-44px, -44px);
    transition: .2s cubic-bezier(0,.76,.38,1.33) transform;
    z-index: -10;
    image-rendering: pixelated;
}
.pixelated_image {
	image-rendering: pixelated;
}
#myKIRUPALink img {
	border-radius: 50%;
    border: solid 2px var(--mediaBorder);
    margin-left: -3px;
}
.kirupaDialog {
	position: fixed;
    z-index: 1200;
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
    background-color: #2f2f2fe0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: bounding-box;
}
.kirupaDialog:not([open]) {
    display: none;
}
.joinForums {
	border-top: 2px solid var(--structureBorder);
    text-align: center;
    border-bottom: 2px solid var(--structureBorder);
	padding-top: 10px;
    padding-bottom: 10px;
}
.joinForums h4 {
	margin-top: 5px;
}
.joinForums p {
	font-size: 16px;
}
.joinForums a {
	padding: 30px;
	display: inline-block;
	border-radius: 5px;
	background-color: var(--lighter);
}
.joinForums a:hover {
	background-color: var(--light);
}
#themeChooser:hover .leftCat, #searchChooser:hover .leftCat {
	transform: translate(-66px, -71px);
}
#themeChooser, #searchChooser {
    background-color: var(--lighter);
    padding: 20px;
    margin-top: 30px;
    position: relative;
    box-shadow: 0 0 8px -2px var(--primary);
    width: 500px;
    height: fit-content;
    font-family: kirupapixel;
    border: 5px solid var(--mediaBorder);
}
#themeChooser button {
    padding: 9px;
    border: 3px solid #000;
    border-radius: 5px;
    margin: 14px;
    cursor: pointer;
}
#themeChooser button:hover {
	transform: scale(1.3);
}
#themeChooser #theme_blue {
	border-color: #0066af;
    background-color: #ceebff;
}
#themeChooser #theme_yellow {
    border-color: #867e0f;
    background-color: #ffee22;
}
#themeChooser #theme_pink {
	border-color: #ff0767;
    background-color: #ffd9e6;
}
#themeChooser #theme_green {
	border-color: #2E7D32;
    background-color: #81C784;
}
#themeChooser #theme_purple {
    border-color: #6b16a6;
    background-color: #b891d4;
}
#themeChooser #theme_pico8 {
    border-color: #333;
    background-color: #FFCCAA;
}
#themeChooser #theme_black {
    border-color: #666;
    background-color: #CCC;
}
#themeChooser #theme_brown {
    border-color: #67320f;
    background-color: #88634e;
}

#themeChooser .activeTheme {
	box-shadow: 0 0 10px 1px var(--primary);
}
#darkmode {
	
}

#lightmode {
	
}
#themeChooser .themeHeading {
    margin: 0;
    font-size: 1.5em;
    font-family: "kirupaPixel";
}
#themeChooser .bg {
	margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid var(--structureBorder);
}
#themeChooser #radioContainer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 10px;
	color: var(--bodyText);
}

#themeChooser .modes {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 52px;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 14px;
	border: 2px solid var(--structureBorder);
	border-radius: 5px;
	background-color: var(--pageBackground);
	cursor: pointer;
	font-size: 1.2em;
	font-weight: 100;
}

#themeChooser .modes input[type="radio"] {
	flex: 0 0 21px;
	width: 21px;
	height: 21px;
	margin: 0;
	accent-color: var(--primary);
	cursor: pointer;
}

#themeChooser .modes:hover {
	background-color: var(--highlighter);
}

#themeChooser .modes:has(input:checked) {
	border-color: var(--primary);
	background-color: var(--primaryLightest);
}

#themeChooser .modes:focus-within {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.themeLabel {
	margin-top: 10px;
}

.videoframe {
	padding-bottom: 240px;
    background-image: url("/images/videocaption.png");
    background-repeat: no-repeat;
    background-size: 168px;
    background-position: calc(50% + 65px) calc(100% - 20px);
	margin-left: 5px !important;
    margin-right: 5px !important;
}

lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
}

/* gradient */
lite-youtube::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
    background-position: top;
    background-repeat: repeat-x;
    height: 60px;
    padding-bottom: 50px;
    width: 100%;
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
    width: 68px;
    height: 48px;
    position: absolute;
    cursor: pointer;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    z-index: 1;
    background-color: transparent;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: none;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border: var(--mediaBorder) solid 5px;
	background-color: var(--mediaBorder);
}
#mobileFooter {
	display: none;
}
#mobileHeader, #navigationSlider {
	display: none;
}
div#mainContent ol li {
	margin-bottom: 20px;
    font-size: 1.2em;
	line-height: 1.75em;
    color: var(--bodyText);
    font-family: var(--serifFonts);
	padding-left: 10px;
}
div#mainContent ol li li {
	font-size: inherit;
	list-style-type: square;
}

#tutorialInformation {
	overflow:hidden;
	margin-bottom: 30px;
	/* margin-right: 30px !important; */
}

.authorImage {
	float: left;
    margin-right: 10px;
    margin-top: 4px;
    width: 51px;
	display: none;
}

.authorText {
	 margin-top: 10px;
}

.authorText h1 {
	font-size: 6em;
    font-weight: 100;
    line-height: 1;
    font-family: kirupaPixel;
    text-rendering: geometricPrecision;
    text-shadow: 2px 2px var(--logoTextShadow);
    color: var(--primary);
    -moz-osx-font-smoothing: none;
    -webkit-font-smoothing: none;
    margin-left: -5px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
.authorText h1.compact {
	font-size: 4.5em;
}

.theme_yellow_dark .authorText h1 {
	color: var(--headerText);
}
.horizontal_line {
	margin-top: 20px;
    margin-bottom: 30px;
    border-bottom: 2px var(--structureBorder) solid;
}
.inlineCode {
	color: var(--bodyText);
    font-family: var(--monoFonts);
    font-size: 85%;
    background-color: rgba(244, 244, 244, 0.2);
    border-radius: 3px;
    padding: 2px 5px;
    margin: 0px 1px;
	border: 1px solid rgb(216 216 216 / 50%);
}
.theme_dark .inlineCode {
	border: 1px solid rgba(244, 244, 244, 0.2);
}
h1, h2, h3, h4, h5 {
	color: var(--headerText);
	font-weight: bold;
	line-height: 1;
	font-family: 'kirupapixel';
    color: var(--headerText);
    font-weight: 100;
    -webkit-font-smoothing: none;
	text-wrap: balance;
}
h1 {
	font-size: 3.5em;
    color: var(--headerText);
    margin-top: -5px;
    line-height: 60px;
	text-shadow: 1px 1px var(--highlighterThree);
}
.sectionH1 {
	background-image: none !important;
}
h2 {
  font-size: 3.5em;
  margin-bottom: -14px;
  text-shadow: 1px 1px var(--highlighter);
}

#mainContent h2 {
	border-top: 1px solid var(--structureBorder);
    margin-top: 35px;
    padding-top: 25px;
    line-height: 1;
    margin-bottom: 0px;
}

#mainContent ul.navigationContent li h2 {
  border-top: 0px solid var(--structureBorder);
  margin-top: 0;
  padding-top: 0;
}
#mainContent ul li {
	line-height: 1.75;
    margin-bottom: 1em;
    color: var(--bodyText);
    font-size: 1.2em;
}
#mainContent ul li li {
	font-size: inherit;
}
#mainContent li p {
	font-size: inherit;
	line-height: inherit;
}
/* Prose that carries on from a list item lines up with the item's text rather
   than the left edge of the column, so a step and its explanation read as one
   unit. Ordered lists indent 40px of list padding plus the 10px on ol li;
   unordered lists have no li padding, so they only get the 40px. */
#mainContent p.stepAligned {
	padding-left: 50px;
}
#mainContent p.bulletAligned {
	padding-left: 40px;
}

h3 {
    font-size: 2.5em;
    margin-bottom: -5px;
    padding-bottom: 10px;
    text-shadow: 1px 1px var(--highlighterThree);
    border-bottom: 1px solid var(--structureBorder);
}
h4 {
	font-size: 2em;
	margin-bottom: -14px;
	text-shadow: 1px 1px var(--highlighterTwo);
}

h5 {
	font-size: 18px;
	margin-bottom: -14px;
	text-shadow: 1px 1px var(--highlighterTwo);
}

.videoCallout {
  padding: 20px;
  display: block;
  background-color: var(--highlighter);
  padding-left: 50px;
  background-image: url(https://www.kirupa.com/icon/1f4fa.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 15px calc(50% - 2px);
  color: var(--darkText);
}
.videoCallout:hover {
	background-color: var(--highlighterThree);
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 50%;
}

  @media all and (max-width: 800px) {
	.column {
	  flex: 100%;
	}
  }

.fixedArticles .column {
	flex: 100%;
}

.tutorialInfo {
	color: #9eaab5;
	margin-bottom: 0;
	margin-top: 15px;
	margin-left: 0px;
	font-family: 'kirupapixel';
    font-size: 1.5em;
    -webkit-font-smoothing: none;
    font-weight: 100;
    text-rendering: geometricPrecision;
}
.tutorialInfo a {
	color: var(--darkText);
	text-decoration: none;
}
.tutorialInfo a:hover {
	text-decoration: underline;
}
.yellowEmphasis {
	color: #8c6f00;
	background-color: #FFFF99;
	padding: 2px;
	border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}
a.yellowEmphasis:hover {
	border-style: none none dotted none;
	border-width: 1px;
}
p {
    font-family: var(--serifFonts);
    font-size: 1.2em;
    line-height: 1.75em;
    color: var(--bodyText);
}

.centerImage {
	text-align: center;
}
.centerIframe {
	display: block;
	margin: 0 auto;
}

.centerImageNoBorder {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 30px;
}
.centerImageNoBorder img {
	border-radius: 10px;
	padding: 10px;
}
iframe.centerImage, video.centerImage, .centerImage iframe, .centerImage video {
    border: 5px solid var(--mediaBorder);
    margin: 0 auto;
    display: inline-block;
}
.centerImageNoBorder iframe {
	display: inline-block;
}
p.kCaption {
    color: #000000;
    font-family: Verdana;
    font-size: 8pt;
    text-align: center;
}
.imageCaption {
    color: #555555;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    display: block;
}
p:has(> .imageCaption:only-child) {
    text-align: center;
}
div#mainContent p.grayEmphasis {
	display: none;	
}

a:link {
	text-decoration: none;
}

.greenEmphasis {
	background-color: #ECFFB3;
	color: #336600;
	padding: 2px;
	border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}
a.greenEmphasis {
	background-color: #FFF;
	border-style: none none dotted none;
	border-width: 1px;

}
a.greenEmphasis:hover {
	background-color: #ECFFB3;
}
.grayEmphasis {
    background-color: var(--primaryLightest);
    color: var(--bodyText);
    padding: 2px;
    border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}
.grayEmphasis:hover {
	background-color: var(--primaryLighter);
}

a.blueEmphasis {
  text-decoration: none;
  border-radius: 2px;
  /* border-style: none none dotted none; */
  /* border-width: 1px; */
  transition: background-color .2s cubic-bezier(0, 1.1, 0, 1.09);
  padding: 2px;
  background-color: var(--linkBackground);
  border-radius: 5px;
  padding-left: 4px;
  padding-right: 4px;
  color: var(--linkForeground);
  filter: var(--linkFilter);
}

a.extraEmphasis:hover {
	background-color: #CBE7F3;
}
a.blueEmphasis:hover {
  background-color: var(--linkHoverBackground);
  color: var(--linkHoverForeground);
  filter: var(--linkFilterHover);
}
.blueEmphasis {
	background-color: #EEF7FB;
	color: #0890ff;
	padding: 2px;
	border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}
.redEmphasis {
	background-color: #FFCACA;
	color: #990000;
	padding: 2px;
	border-radius: 5px;
    padding-left: 4px;
    padding-right: 4px;
}

#rightContents h4 {
	font-size: 16px;
    font-weight: bold;
    border-top: var(--structureBorder) solid 1px;
    padding-top: 30px;
}

#rightNewsletter p {
	font-size: 16px;
}

#tutorialInformation div.tags p {
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
	margin-right: 5px;
	line-height: 1;
	display: inline-block;
}

#tutorialInformation div.tags a {
	background-color: #c5e8ff;
    font-size: 12px;
    font-weight: normal;
    padding: 5px;
    color: #2196f3;
    line-height: 0;
}

#tutorialInformation div.tags a:hover {
	background-color: #006bb3;
    color: #FFF;
}

.bookContent {
	display: grid;
    grid-template-columns: 175px 1fr;
    align-items: start;
	padding-top: 30px;
    border-top: 1px solid #EEE;
}

.bookContent h4 {
	margin-top: 0px;
}

#arrayBookContent {
	grid-template-columns: 135px 1fr;
}

p.centerImage img {
	border: 2px solid var(--mediaBorder);
}
div #mainContent ol {
	list-style-type: lower-roman;
    color: var(--bodyText);
    line-height: 1.75em;
}
table.data p {
	margin: -5px;
}
#tutorialBox {
	display: none;
	background-color: #F8F8F8;
	margin-top: 10px;
}

#bookBannerContent {
  margin-top: 0px;
  padding-bottom: 1px;
  margin-bottom: 20px;
  padding-right: 10px;
  margin-left: -5px;
}
#bookBannerContent img {
	margin-left: 32px;
	margin-top: -10px;
	margin-bottom: 30px;
}

#bookBannerContent li {
	margin-bottom: 15px;
	margin-left: 0px;
	list-style: none;
	padding-left: 75px;
	padding-top: 5px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: 3px 5px;
	line-height: 20px;
	padding-bottom: 15px;
	background-size: 60px;
}
#bookBannerContent li:hover {
	background-size: 63px;
	background-position: 0px 3px;	
}
#bookBannerContent ul  {
	padding: 0;
	margin-left: 5px;
	margin-top: 5px;
}

#bookBannerContent ul ul.buyNowRight li {
	padding: 0;
	margin: 0;
}

#bookBannerContent ul ul.buyNowRight {
	padding: 0;
	margin: 0;
}


#bookBannerContent .bookLink:hover {
    text-decoration: none;
}


#bookBannerContent .bookLink {
	color: var(--darkText);
    font-size: 14px;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-bottom: 5px;
    background-position: 0 3px;
	margin-top: 0px;
	line-height: 1.5em;
	display: inline-block;
}


#bookBannerContent .bookLink:hover {
	text-decoration: underline;
}

#bookBannerContent li.animationRight {
	background-image: url("https://www.kirupa.com/book/images/anim2.svg");
  background-size: 70px;
  background-position: -4px 0;
}

#bookBannerContent li.arraysBookRight {
	background-image: url(https://www.kirupa.com/book/images/arraysRight.png);
    background-size: 60px;
    background-position: 4px 0;
}

#bookBannerContent li.js101Right {
	background-image: url("https://www.kirupa.com/book/images/js101_2.svg");
  background-size: 70px;
  background-position: -4px 0;
}

#bookBannerContent li.learningReactRight {
	background-image: url("https://www.kirupa.com/book/images/react_book.svg");
  background-size: 70px;
  background-position: -4px 0;
}


#bookBannerContent li.canvasRight {
	background-image: url("https://www.kirupa.com/images/canvas_book_small.png");
	background-size: 60px;
}

#bookBannerContent .lessemphasis {
	color: var(--darkText);
}

#downwardCurvedArrow {
	position: absolute;
    transform: translate(160px, -75px);
}

#kirupaBio {
	display: grid;
    grid-template-columns: 30px 121px calc(100% - 150px) 30px;
    padding-left: 10px;
    padding-right: 30px;
    align-items: center;
    font-style: italic;
	margin-bottom: 40px;
}

#kirupaBio .kirupaPixel {
	border-radius: 50%;
    border: 4px solid var(--mediaBorder);
    width: 90px;
    height: 90px;
}

/* Ask Forums Right Content */
.askForumSigContainer {
	position: relative;
}
.askForumSig {
	position: absolute;
	right: -272px;
	transform: translateY(-340px);
	display: flex;
}
.forumSigLinks {
	width: 200px;
	margin-top: 30px;
	background-image: url(https://www.kirupa.com/pixel_icons/smiley-happy.gif);
	image-rendering: pixelated;
	background-repeat: no-repeat;
	background-position: 117px 71px;
	background-size: 24px;
}
.forumSigLinks p {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 20px;
}
.forumSigHeader {
	font-size: 16px;
	font-family: kirupapixel;
	-webkit-font-smoothing: none;
}
.forumSigBody {
	font-size: 2em;
	font-family: kirupapixel;
	-webkit-font-smoothing: none;
	line-height: 28px;
}
/* ---------------------------- */
#sigNewsletter {
	margin: 60px;
	display: grid;
    justify-content: center;
}

#sigNewsletter .newsletterContainer {
	width: 550px;
    text-align: center;
}

#sigNewsletter #birdNewsletter {
	position: absolute;
    transform: translate(560px, -7px) scale(1.05);
}

#sigNewsletter h4 {
	margin: 0;
    font-size: 3em;
    font-weight: bold;
}
#sigNewsletter p {
	margin: 0;
    font-size: 1em;
    font-weight: 400;
}
.strikethrough {
	text-decoration: line-through;
}



#sigNewsletter .greenButton {
    margin-top: 15px;
    margin-bottom: 15px;
    background-image: url(https://www.kirupa.com/pixel_icons/mail.gif);
    background-size: 32px;
    background-position: 16px center;
    padding-left: 53px;
    padding-right: 21px;
    image-rendering: pixelated;
}

.articleActions {
	margin-left: 71px;
}
.articleActions div {
	display: inline-block;
	position: relative;
}

.articleActions a {
	font-size: 14px;
	font-weight: bold;
	padding: 10px;
	color: #222;
	background-repeat: no-repeat;
	padding-left: 22px;
	margin-left: 10px;
	background-position: left center;
	background-size: 19px;
	position: relative;
	z-index: 10;
}
.articleActions .articleRead:hover {
	background-color: var(--highlighterTwo);
}
.articleActions .articleRead a {
	background-image: url(https://www.kirupa.com/images/menu.svg);
}
.articleActions .articleRead svg {
	position: absolute;
	left: 7px;
	top: 15px;
	z-index: 1;
}
.articleActions .articleDiscuss:hover {
	background-color: var(--highlighterThree);
}
.articleActions .articleDiscuss a {
	background-image: url(https://www.kirupa.com/images/message.svg);
}
.articleActions .articleDiscuss svg {
	position: absolute;
	left: 7px;
	top: 15px;
	z-index: 1;
}
.articleList li {
    list-style-type: none;
	
	  margin-bottom: 20px;
	  padding-bottom: 0px;
	  margin-right: 50px;
	  border-radius: 5px;
}
#mainContent .articleList li {
  padding-bottom: 20px;
}
#mainContent .articleList li {
    line-height: 1.75;
    font-size: 18px;
    margin-bottom: 40px;
    color: #585858;
    /* border-bottom: #EEE 1px solid; */
    padding-bottom: 10px;
	/* transition: all .2s cubic-bezier(0,.66,0,.98); */
}
#mainContent ul li:last-of-type {
  border-bottom: none;
}
.articleList {
    padding: 0;
    margin-top: 40px;
	position: relative;
    z-index: 100;
}
.articleList li > a {
    padding: 10px;
    padding-left: 75px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 45px;
    background-position: 12px 12px;
}

#mainContent .articleList li > a:hover {
    background-color: var(--lighter);
    box-shadow: var(--primaryLighter) 0px 0px 50px;
}
.articleList li p {
    color: var(--bodyText);
    margin-left: 5px;
    margin-bottom: 2px;
    margin-top: 3px;
}
.articleList li:hover p {
	
}


#mainContent p sup {
	vertical-align: top;
    position: relative;
    top: -0.5em;
}

body div#mainContent p.inlineCode.standalone {
	background-color: #f8f8f8 !important;
    padding: 1em;
    overflow: auto;
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.75;
    font-size: 16px;
}

	  #mainContent .theTopics .articleList li {
		  margin-bottom: 20px;
		  padding-bottom: 0px;
		  margin-right: 30px;
	  }

      .theTopics .articleList li > a {
		padding-left: 75px;
		background-position: 15px center;
		background-size: 43px;
		width: calc(100% - 69px);
	    border-radius: 5px;
	    border: 1px dotted var(--structureBorder);
		color: var(--darkText);
		font-weight: lighter;
	    padding-top: 24px;
        padding-bottom: 24px;
	    font-family: 'kirupapixel';
    	font-size: 24px;
	  }
      .theTopics .articleList {
		  margin: 0;
	  }
	  .theTopics h3 {
		  padding-top: 20px;
		  margin-bottom: 20px;
		  border-top: 2px solid var(--structureBorder);
	  }
      .theArticles ul.articleList li > a {
		  background-position: 15px center;
	  }
	#mainContent .theArticles ul.articleList li > a {
		background-size: 30px;
		padding-left: 60px;
		color: var(--darkText);
		font-weight: lighter;
		font-family: "kirupaCode";
		font-size: 16.5px;
		-webkit-font-smoothing: none;
	}

/* The tutorial icon is painted by a pseudo-element instead of the link's own
   background so it can be scaled independently on hover. The link keeps its
   inline background-image (the pseudo-element inherits it) but stops painting
   it via background-size: 0, which is repeated below for every context that
   sets its own icon size. Icon size and offset now live in --iconSize/--iconX. */
#mainContent .articleList li > a {
	--iconSize: 45px;
	--iconX: 12px;
	--iconTop: 12px;
	--iconBottom: auto;
	--iconMargin: 0px;

	position: relative;
	background-size: 0;
}
#mainContent .theTopics .articleList li > a {
	--iconSize: 43px;
	--iconX: 15px;
	--iconTop: 0px;
	--iconBottom: 0px;
	--iconMargin: auto;

	background-size: 0;
}
#mainContent .theArticles ul.articleList li > a {
	--iconSize: 30px;

	background-size: 0;
}
#mainContent .articleList li > a::before {
	content: "";
	position: absolute;
	left: var(--iconX);
	top: var(--iconTop);
	bottom: var(--iconBottom);
	margin-top: var(--iconMargin);
	margin-bottom: var(--iconMargin);
	width: var(--iconSize);
	height: var(--iconSize);
	background-image: inherit;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}
#mainContent .articleList li > a:hover::before,
#mainContent .articleList li > a:focus-visible::before {
	animation: tutorialIconPop 0.5s cubic-bezier(0.25, 0.8, 0.4, 1) 1;
}
@keyframes tutorialIconPop {
	0% {
		transform: scale(1);
	}
	18% {
		transform: scale(1.3);
	}
	36% {
		transform: scale(0.9);
	}
	55% {
		transform: scale(1.12);
	}
	72% {
		transform: scale(0.97);
	}
	86% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}
}
@media (prefers-reduced-motion: reduce) {
	#mainContent .articleList li > a:hover::before,
	#mainContent .articleList li > a:focus-visible::before {
		animation: none;
	}
}

.callout {
	border-style: solid;
    border-width: 0px 0px 0px 5px;
    border-color: var(--highlighter);
    margin: 0;
    padding-left: 10px;
}

.borderImage {
	border: 1px solid #cccccc;
}

.legacyArchiveNote {
	border-style: solid;
	border-width: 0px 0px 0px 5px;
	border-color: var(--highlighter);
	background-color: var(--lighter);
	margin: 20px 0 25px 0;
	padding: 10px 15px;
	border-radius: 0 5px 5px 0;
}

.legacyArchiveNote p {
	margin: 0;
	font-size: 0.95em;
	color: var(--darkTextSecondary);
}

.downloadCallout {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	max-width: 100%;
	box-sizing: border-box;
}

.downloadCallout p {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.downloadCallout img {
	max-width: 100%;
	height: auto;
	flex: 0 0 auto;
}

.centeredSWF {
	display: flex;
	justify-content: center;
	margin: 30px 0 10px;
}




.kirupaInput {
	background-color: var(--inputBackground);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: 7px center;
	padding: 3px;
	padding-left: 10px;
	height: 30px;
	border-radius: 0px;
	-webkit-appearance: none;
	border: 3px solid  var(--inputBorder);
	font-size: 16px;
}
.kirupaInput:focus {
  background-color: var(--lighter);
  border-color: var(--primary);
  /* box-shadow: 0px 0px 10px 0px #ffd500; */
  outline: 0 none;
}

.greenButton, .kirupaButton {
background-color: var(--primary);
    font-size: 1.5em;
    color: var(--textOnPrimary);
    border: 0;
    border-radius: 5px;
    padding: 13px;
    background-repeat: no-repeat;
    text-align: right;
    background-position: -7px center;
    background-size: 60px;
    line-height: 1em;
    display: inline-block;
    font-family: kirupapixel;
    padding-top: 18px;
}

.greenButton a,  .kirupaButton a {
  color: var(--textOnPrimary);
  font-weight: bold;
  text-decoration: none;
}
.greenButton:hover, .kirupaButton:hover {
	background-color: var(--primaryDarker);
	cursor: pointer;
}

#tutorialInformation .tags {
	display: none;
}

#mainHeader .kirupaButton {
  background-image: url(https://www.kirupa.com/images/comment_bubble.svg);
	margin-right: 10px;
	justify-self: end;
	width: 90px;
	background-size: 48px;
}

.kirupaButtonSmall {
	font-size: 12px;
	padding: 5px;
}

#mainHeader {
	--header-control-gap: 43px;
    margin: 0 auto;
    margin-bottom: 100px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1.25fr 200px 200px 200px 200px 0px 1fr;
    color: #444;
    align-items: center;
    padding: 15px;
    position: relative;
    /* border-bottom: 2px solid var(--structureBorder); */
    white-space: nowrap;
	text-transform: uppercase;
	font-size: 2em;
	margin-top: 10px;
	
	font-family: "kirupaPixel";
	-webkit-font-smoothing: none;
}

#kirupaOrangeLogo {
	position: fixed;
    margin-left: 25px;
	z-index: 100;
}

#mainHeader .headerLink {
    justify-self: center;
    margin-left: 0px;
    margin-right: 0px;
    color: var(--darkText);
	padding-left: 40px;
    image-rendering: pixelated;
	background-repeat: no-repeat;
    background-position: 5px 4px;
    background-size: 24px;
}
#mainHeader .headerLink:hover {
	/* background-color: var(--light); */
	border-bottom: 8px solid var(--darkText);
	margin-bottom: -8px;
}
#mainHeader #bookHeader {
	background-image: url("https://www.kirupa.com/pixel_icons/book.gif");
}
#mainHeader #tutorialsHeader {
	background-image: url("https://www.kirupa.com/pixel_icons/parachutedrop.gif");
	background-size: 26px;
	background-position: 0 2px;
    padding-left: 30px;
}
#mainHeader #videosHeader {
	background-image: url("https://www.kirupa.com/pixel_icons/TV7.gif");
	padding-left: 37px;
    background-position: 6px 2px;
}
#mainHeader #codingHeader {
	background-image: url("https://www.kirupa.com/pixel_icons/smiley-happy.gif");
	padding-left: 37px;
    background-position: 6px 2px;
}

#mainHeader .headerLink span {
	/*padding: 0px;
    padding-left: 2px;
    padding-right: 2px;*/
}
#mainHeader .articles {
	/* background-color: var(--primaryLightest); */
	/* border-bottom: var(--headerUnderline, 5px) solid var(--primary); */
	border-bottom: 4px solid var(--darkText);
	margin-bottom: -4px;
}

#mainHeader .headerIcons {
	justify-self: center;
	width: 20px;
	margin-left: 5px;
    margin-right: 5px;
	margin-top: 5px;
	transition: transform .1s ease-out;
}

#mainHeader .headerIcons:hover {
	transform: scale(1.2);
}

#mainHeader .headerDivider {
	justify-self: center;
}

#mainHeader .headerControls {
	display: flex;
	align-items: center;
	gap: var(--header-control-gap);
	justify-self: end;
	margin-right: 25px;
	min-width: max-content;
}

#mainHeader .miniheadericons {
	appearance: none;
	background: transparent;
	border: 0;
	color: var(--darkText);
	cursor: pointer;
	font: inherit;
	justify-self: center;
	text-align: center;
	padding: 5px;
}

#mainHeader .onlineCountLink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	justify-self: end;
	padding: 8px 12px;
	border: 2px solid var(--primary);
	border-radius: 0;
	color: var(--bodyText);
	background: var(--primaryLightest);
	background: color-mix(in srgb, var(--primaryLightest) 78%, var(--pageBackground));
	box-shadow: 3px 3px 0 color-mix(in srgb, var(--primaryDarker) 38%, transparent);
	font-size: .55em;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
}

#mainHeader .onlineCountLink:hover {
	border-color: var(--primaryDarker);
	color: var(--textOnPrimary);
	background: var(--primary);
	transform: translateY(-1px);
}

#mainHeader .onlineCountLink:focus-visible {
	outline: 2px solid var(--darkText);
	outline-offset: 4px;
}

#mainHeader .onlineCountIcon {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: 2px solid var(--pageBackground);
	border-radius: 0;
	color: var(--primary);
	background: currentColor;
	animation: onlineCountPulse 1.8s ease-in-out infinite;
}

#mainHeader .onlineCountLink:hover .onlineCountIcon {
	color: var(--textOnPrimary);
}

@keyframes onlineCountPulse {
	0% {
		box-shadow: 0 0 0 0 currentColor;
	}
	70% {
		box-shadow: 0 0 0 8px transparent;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	#mainHeader .onlineCountIcon {
		animation: none;
	}
}

#mainHeader .miniheadericons img {
	width: 32px;
	image-rendering: pixelated;
}

#mainHeader .miniheadericons svg {
	display: block;
	height: 28px;
	transition: transform .1s ease-out;
	width: 28px;
}

#soundToggle .soundIconOff {
	display: none;
}

#soundToggle[aria-pressed="false"] .soundIconOn {
	display: none;
}

#soundToggle[aria-pressed="false"] .soundIconOff {
	display: block;
}

#soundToggle[aria-pressed="false"] {
	opacity: .65;
}

#soundToggle:disabled {
	cursor: not-allowed;
	opacity: .35;
}

#soundToggle:focus-visible {
	outline: 2px solid var(--darkText);
	outline-offset: 2px;
}

#mainHeader .miniheadericons img:hover {
	transform: scale(1.2, 1.2);	
}

#mainHeader .miniheadericons:hover svg {
	transform: scale(1.2, 1.2);
}

#backgroundHeader {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0;
    z-index: -1;
	image-rendering: pixelated;
	overflow: hidden;
}

#backgroundHeader .clouds {
	position: absolute;
}

.theme_dark #backgroundHeader {
	opacity: 0.5;
}
#mainBody {
	width: min-content;
    margin: 0 auto;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 250px 770px 250px;
}


#mainContent {
	/* padding: 25px; */
	border-radius: 0px;
	padding-top: 0px;
	/* border-left: 2px solid var(--structureBorder); */
	/* border-right: 2px solid var(--structureBorder); */
	/* padding-left: 75px; */
	/* padding-right: 75px; */
}

#mainContent > * {
    margin-left: 75px;
    margin-right: 75px;
}
#mainContent > .centerImage {
    margin-left: 0px;
    margin-right: 0px;
	margin-top: 25px;
    margin-bottom: 25px;
}
#mainContent > .centerImageNoBorder {
    margin-left: 0px;
    margin-right: 0px;
	margin-top: 25px;
    margin-bottom: 25px;
}

#leftContents {
    margin-right: 11px;
    margin-top: 0px;
    margin-left: 13px;
}
#rightContents {
	margin-left: 18px;
}

#mainFooter {
	margin: 0 auto;
	width: 1250px;
	background-color: var(--headerBackground);
	border-radius: 5px;
	padding: 20px;
	display: grid;
	grid-template-columns: 400px 1fr;
	align-items: center;
	margin-bottom: 18px;
}

#mainFooter p {
  margin: 0;
  color: var(--bodyText);
  font-size: 16px;
  line-height: 26px;
}

#mainFooter a {
  color: var(--bodyText);
  font-weight: 700;
}

#mainFooter img {
  width: 20px;
  padding: 15px
}

#mainFooter div {
  text-align: right;
}

div.sectionMainHeader {
	margin-top: 10px;
}

nav.navigationBoxes {
  border-radius: 5px;
  padding: 5px;
}
#leftContents nav.navigationBoxes {
	background-color: var(--lighter);
	/* margin-top: -6px; */
}

#leftContents nav.navigationBoxes.generic ul a {
	font-weight: normal;
	padding-left: 50px;
	padding-left: 50px;
    background-position: 10px center;
	margin: 5px;
	font-size: 16px;
}
#leftContents nav.navigationBoxes.generic ul li:last-of-type {
	border-top: 1px solid var(--structureBorder);
}


nav.navigationBoxes ul {
  margin: 0;
  list-style: none;
  padding: 0;
  font-size: 16px;
}

#leftContents nav.navigationBoxes li img {
	width: 24px;
	margin-right: 15px;
}

#leftContents #personalizeList {
	border-top: 2px var(--structureBorder) solid;
    margin-top: 10px;
    margin-bottom: 0;
}
#leftContents #personalizeLink {
	margin-top: 10px;
}

.articleNavigation {
	margin-top: 50px;
}
.articleNavigation ul {
    display: flex;
    justify-content: space-between;
	padding: 0;
	list-style: none;
}

.articleNavigation ul a {
	display: flex;
    align-items: center;
	border-radius: 5px;
	align-content: center;
}

/*
.articleNavigation ul a:hover {
	background-color: var(--light);
}
*/

.articleNavigation ul a svg {
	display: inherit;
	transform: scale(.5);
	padding: 5px;
}
.articleNavigation ul .navText {
	padding: 5px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

#previousArticle {
	margin-left: 0px;
}
#previousArticle .navText {
	padding-right: 10px;
}

#nextArticle {
	margin-right: 0px;
}
#nextArticle .navText {
	padding-left: 10px;
}
.leftNavContainer {
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
	margin-bottom: 380px;
}
.leftNavContainer svg {
	margin-left: 40px;
}
.leftNavContainer .relatedSVG {
    position: relative;
    transform: translate(-36px, 5px);
    z-index: 10;
}
.leftNavContainer .birdSVG {
	position: absolute;
    transform: translate(230px, -144px) rotate(-12deg);
    width: 50px;
    image-rendering: pixelated;
}

.leftNav {
    align-self: baseline;
    top: 0;
    height: 300px;
    overflow-y: auto;
	overflow-x: hidden;
	scroll-padding: 30%;
	transform: translateX(3.5px);
    border-radius: 0px;
	margin-bottom: 20px;
	width: 100%;
    scrollbar-width: none;
    transition: scrollbar-color .2s ease-out;
	position: fixed;
    top: 0px;
    left: 0;
    width: 350px;
    height: 100vh;
	background: linear-gradient(90deg, rgba(var(--leftNavLight), .5) 0%, rgba(var(--leftNavLight), .5) 99%, var(--darkStructureBorder) 100%);
	backdrop-filter: blur(5px);
    transform: translate(-1px, 0);
}

.leftNavContents {
    overflow-y: auto;
    margin-top: 215px;
    height: calc(100vh - 215px);
    direction: rtl;
    border-top: 1.5px var(--leftNavLine) dashed;
}

.leftNav::-webkit-scrollbar {
  transition: scrollbar-color .2s ease-out;
  width: 5px;
}

.leftNav::-webkit-scrollbar-track {
  background: transparent;
}

.leftNav::-webkit-scrollbar-thumb {
  transition: scrollbar-color .2s ease-out;
  background-color: var(--structureBorder);
}
.leftNav:hover::-webkit-scrollbar-thumb {
  background-color: var(--primary);
}
.leftNav h3 {
	font-size: 24px;
    margin-left: 24px;
    text-shadow: none;
    border-bottom: none;
	direction: ltr;
}
.leftNav .articleList li {
    margin-right: 0px;
    width: 100%;
}
.leftNav li {
	margin-bottom: 0px;
}
.leftNav li a {
    background-size: 23px;
    padding: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 9px;
    color: var(--darkTextSecondary);
    background-position: 10px 9px;
	width: -moz-available;
    width: -webkit-fill-available;
    background-size: 0;
    line-height: 24px;
	font-family: kirupaCode;
    font-size: 15px;
	border-left: 5px solid hsla(0, 100%, 50%, 0.00);
	direction: ltr;
}
.leftNav li a:hover {
	background-color: var(--pageBackground);
    outline: 2px solid var(--darkStructureBorder);
}
.leftNav .articleList {
	margin-top: 20px;
}

.leftNav li a.currentArticle {
	background-color: var(--pageBackground);
    outline: 2px solid var(--darkStructureBorder);
}

.leftNavLast {
	border-bottom: var(--structureBorder) 2px solid;
	padding-bottom: 10px;
}

.leftQuestion {
	text-align: center;
	border-top: 1.5px var(--leftNavLine) dashed;
	margin-bottom: 30px;
	margin-top: 100px;
}
.leftQuestion .greenButton {
	margin-top: 100px;
	direction: ltr;
	
	margin-top: 100px;
    background-image: url(https://www.kirupa.com/pixel_icons/smiley-rambo.gif);
    background-size: 32px;
    background-position: 16px center;
    padding-left: 53px;
    padding-right: 21px;
    image-rendering: pixelated;
	
	font-size: 24px;
}

nav.navigationBoxes ul ul {
	border-top: var(--structureBorder) 2px solid;
	border-bottom: var(--structureBorder) 2px solid;
	font-size: 16px;
	font-weight: normal;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

nav.navigationBoxes ul a {
	color: var(--darkText);
    text-decoration: none;
    padding: 10px;
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: 1px center;
    display: flex;
    border-radius: 5px;
    margin-bottom: 0px;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
}

nav.navigationBoxes hr {
	border: 0;
    height: 2px;
    background: var(--structureBorder);
}

nav.navigationBoxes ul a:hover {
  background-color: var(--light);
}

nav.navigationBoxes ul li li a:hover {
  text-decoration: underline;
  background-color: unset;
  color: var(--darkText);
}

nav.navigationBoxes ul ul a {
	background-size: 16px;
    background-position: 15px center;
    font-weight: 500;
    padding-left: 45px;
}

#leftContents nav.navigationBoxes ul ul a {
    font-weight: 400;
    padding-left: 36px;
}

#leftContents nav.navigationBoxes li svg {
    height: 18px;
    position: absolute;
    transform: translate(-26px, 2px);
	fill: var(--navigationLinkColor);
}

#rightContents nav.navigationBoxes ul ul a {
	background-position-y: 12px;
    font-size: 1em;
    font-weight: 100;
    color: var(--darkText);
    line-height: 1.5em;
    font-family: 'kirupapixel';
    -webkit-font-smoothing: none;
}

.theme_dark #rightContents nav.navigationBoxes ul ul a {
	filter: drop-shadow(1px 1px 1px #777777FF);
}

#rightContents nav.navigationBoxes .oneBoxOnly ul {
  border-bottom: none;
  padding-bottom: 0px;
  image-rendering: pixelated;
}

#rightContents .newForum p, .leftNavContainer p {
 font-family: "kirupapixel";
 font-size: 20px;
 line-height: 1.2em;
}

#rightContents .newForum .blockBorder {
	position: absolute;
    left: -35px;
    top: -20px;
}

#rightContents nav {
	position: relative;
}

#rightContents nav .fresh_caption {
	z-index: 20;
    position: relative;
    margin-left: 52px;
    top: 4px;
	margin-bottom: 20px;
}

#rightContents nav .fresh_background {
	position: absolute;
    top: -20px;
	left: 0px;
    margin-bottom: 0px;
    z-index: 10;
    width: 240px;
}

#rightContents nav.newForum .fresh_caption {
    margin-left: 41px;
    top: 4px;
    margin-bottom: 10px;
}

#rightContents nav.newForum .fresh_background {
    top: 7px;
    left: 32px;
    width: 176px;
    height: 18px;
}

#navMobile {
	display: none;
}

/* mobile stuff */ 
	@media all and (max-width: 1700px) {
		#mainHeader {
			grid-template-columns: minmax(220px, 1.25fr) repeat(4, minmax(150px, 200px)) 0px auto;
		}
		body #newFooter {
			margin-left: 350px;
		}
	}
	
	/* The left nav is fixed at the viewport's left edge (350px wide) and is still
	   visible down to 1420px, while the header grid keeps compressing. Below about
	   1575px the first header link (Tutorials) slides underneath it. Drop the
	   "who's online" badge first: it frees roughly 90-150px in .headerControls,
	   which the flexible first column reclaims, keeping the links clear of the nav
	   until the nav itself hides at 1420px. */
	@media all and (max-width: 1600px) {
		#mainHeader .onlineCountLink {
			display: none;
		}
	}
	
	@media all and (max-width: 1560px) {
		#rightContents, .askForumSigContainer {
			display: none;
		}
		#mainBody {
			grid-template-columns: 470px 760px;
			width: 100%;
   		 }
		#newFooter {
			grid-template-columns: unset;
			width: 100%;
		}
	}
@media all and (max-width: 1420px) {
    #rightContents {
        display: none;
    }
	.leftNav {
		display: none;
	}
	#kirupaOrangeLogo {
		position: relative;
		margin-left: 25px;
		z-index: 100;
	}
	#mainHeader {
        grid-template-columns: minmax(100px, 1fr) minmax(100px, 1.25fr) repeat(4, minmax(120px, 200px)) 0px auto;
    }
	body #newFooter {
		margin-left: auto;
	}
    #mainBody {
        grid-template-columns: 270px 760px;
        width: 100%;
    }
    #mainContent {
        border-right: none;
        
    }
    #mainHeader {
        width: unset;
    }
    #mainContent > * {
        margin-left: 75px;
        margin-right: 75px;
    }
    #sigNewsletter .newsletterContainer {
        width: 100%;
    }
}
@media all and (max-width: 1200px) {
    body {
        margin: 0;
    }
    /*
    #mainHeader {
        grid-template-columns: 56px 1fr 35px 35px auto;
        width: unset;
    }
    */
    .askForumSigContainer {
        display: none;
    }
    .leftNav {
        /* display: none; */
    }
    
    .articleNavigation ul {
        flex-direction: column;
    }
    
    #previousArticle {
        margin-left: 0;
    }
    #nextArticle {
        margin-right: 0;
    }
    
    #mainContent img {
        max-width: calc(100% - 40px);
            height: auto;
    }
    #mainContent > * {
        margin-left: 10px;
        margin-right: 10px;
    }

    #leftContents {
        /* display: none; */
    }
    #mainHeader .wideOnly {
        /* display: none; */
    }
    #mainBody {
        grid-template-columns: none;
        width: calc(100% - 35px);
    }
    div#mainContent #pageComments {
        background-position-x: calc(50% - 120px);
    }
    #mainFooter p {
        margin-bottom: 18px;
    }
    #pageCommentsImage {
        display: none;
        padding-left: 0;
    }
    .authorText h1, h1 {
        font-size: 4em;
        line-height: 1;
        margin-left: 0px;
    }
    h2 {
        font-size: 28px;
        line-height: 1.5;    
    }
    h3 {
        font-size: 24px;
        line-height: 1.5;    
    }
    h4 {
        font-size: 20px;
        line-height: 1.5;    
    }
    #navigationSlider.hidden {
        opacity: 0;
    }
    body {
        padding: 0px;
    }

    
    .syntaxhighlighter {
      font-size: 16px !important; 
    }
  
    #rightContents {
        display: none;
    }
    
    #mainContent iframe {
        width: 95% !important;
    }
    
    #mainContent {
        width: 100%;
        margin: 0;
        border: 0;
        padding: 0;
        max-width: 700px;
        margin: 0 auto;
    }
    
    #mainBody {
        display: flex;
    }

    #adArea {
        border-bottom: 1px var(--structureBorder) solid;
    }

    #footer, #bottomFooterLinks {
        display: none;
    }
    #theHorizontalLine {
        width: 100%;
    }
    
    .authorImage {
        display: none;
    }
    
    #tutorialBox {
        display: none;
    }
    
    .tutorialInfo {
        margin-top: 5px;
    }
    
    div#mainContent p {
        padding-right: 0px;
    }

    
    #mainFooter {
        width: calc(100% - 70px);
        margin-left: 15px;
        margin-right: 15px;
        display: flex;
        flex-direction: column;
    }
    #sigNewsletter {
        padding-right: 0px;
        background-image: none;
    }
    #sigNewsletter #mce-EMAIL {
        width: calc(100% - 40px);
      }
    #birdNewsletter, #downwardCurvedArrow, .leftBracket, .rightBracket {
        display: none;
    }
    #kirupaBio {
        display: grid;
        grid-template-columns: unset;
        padding-left: 0px;
        padding-right: 0px;
        justify-items: center;
        font-style: italic;
        margin-bottom: 40px;
        padding-top: 30px;
        border-top: 2px solid var(--structureBorder);
    }
    iframe.centerImage, video.centerImage {
    margin-left: 0px;
    }

    .centerImageNoBorder img {
        margin-left: 0px;
    }

    p.centerImage img {
        margin-left: 0px;
    }
}

@media all and (max-width: 1200px) {
    #leftContents {
        display: none;
    }
    #mainHeader .wideOnly {
        display: none;
    }
    #mainHeader {
		--header-control-gap: 6.5px;
        grid-template-columns: 56px 1fr 35px auto;
        width: unset;
    }
    .leftNav, .leftNavContainer {
        display: none;
    }
}



/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+jsx&plugins=line-highlight+line-numbers */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: "kirupaCode";
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.75;
  font-size: 16.5px;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f8f8f8;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

pre[data-line] {
	position: relative;
	padding: 1em 0 1em 3em;
}

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism’s padding-top */

	background: rgba(158, 158, 158, 0.10);

	pointer-events: none;

	line-height: inherit;
	white-space: pre;
}

	.line-highlight:before,
	.line-highlight[data-end]:after {
		content: attr(data-start);
		position: absolute;
		top: .4em;
		left: .6em;
		min-width: 1em;
		padding: 0 .5em;
		background-color: hsla(24, 20%, 50%,.4);
		color: hsl(24, 20%, 95%);
		font: bold 65%/1.5 sans-serif;
		text-align: center;
		vertical-align: .3em;
		border-radius: 999px;
		text-shadow: none;
		box-shadow: 0 1px white;
	}

	.line-highlight[data-end]:after {
		content: attr(data-end);
		top: auto;
		bottom: .4em;
	}

.line-numbers .line-highlight:before,
.line-numbers .line-highlight:after {
	content: none;
}

pre[class*="language-"].line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: relative;
	white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #CCC;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		pointer-events: none;
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #CCC;
			display: block;
			padding-right: 0.8em;
			text-align: right;
      transform: translateY(-5px);
		}


div.askForums a {
	background-color: var(--highlighter);
    padding: 15px;
    display: block;
    color: var(--darkText);
}
div.askForums a:hover {
	background-color: var(--highlighterTwo);
	text-decoration: underline;
}
div.askForums a span {
	font-weight: bold;
}

.smileysTable {
	border: 2px solid var(--structureBorder);
	border-collapse: collapse;
	width: -webkit-fill-available;
	font-size: 16px;
}
.smileysTable th {
	font-weight: bold;
	font-size: 18px;
	background-color: var(--primaryLighter);
}
.smileysTable td {
	border: 1px solid var(--structureBorder);
	padding: 10px;
	color: var(--bodyText);
}
.smileysTable th {
	border: 1px solid var(--structureBorder);
	padding: 10px;
}