@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;
}
.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);
}
/* Custom colors: the kirupaBot widget only knows the preset theme names, so
   give it the generated contrast color for text on --primary. */
html.theme_custom,
html.theme_custom_dark {
	--kbw-control-foreground: var(--textOnPrimary);
}
html.theme_custom #kirupabot-widget .kbw-launcher-icon path[fill="#fff"] {
	fill: var(--textOnPrimary);
}
html.theme_custom #kirupabot-widget .kbw-launcher-close {
	color: var(--textOnPrimary);
}
/* ---------- Theme customizer dialog (built by kirupa.js) ---------- */
.themeDialog {
	position: fixed;
	inset: 0;
	z-index: 1200;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 16px;
	box-sizing: border-box;
	border: 0;
	background: transparent;
	color: var(--bodyText);
	overflow: hidden;
}
.themeDialog:not([open]) {
	display: none;
}
.themeDialog[open] {
	display: flex;
	animation: kirupaDialogIn .2s ease-out;
}
.themeDialog::backdrop {
	background: rgba(16, 18, 22, .6);
}
@keyframes kirupaDialogIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}
@keyframes kirupaSheetIn {
	from {
		opacity: 0;
		transform: translateY(48px);
	}
}
#themeWrapper #themePanel {
	--themeCardBg: var(--lighter);
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(560px, 100%);
	max-height: 100%;
	margin: auto;
	padding: 0;
	overflow: visible;
	background-color: var(--themeCardBg);
	border: 5px solid var(--mediaBorder);
	border-radius: 0;
	box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
	color: var(--bodyText);
	font-family: var(--serifFonts);
	font-size: 16px;
	text-align: left;
}
#themePanel .leftCat {
	position: absolute;
	top: 20px;
	left: 20px;
	transform: translate(-44px, -44px);
	transition: .2s cubic-bezier(0, .76, .38, 1.33) transform;
	z-index: -10;
	image-rendering: pixelated;
}
#themePanel:hover .leftCat {
	transform: translate(-66px, -71px);
}
#themePanel .themeIconSmooth {
	display: none;
}
#themePanel .themeHeader {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 18px 14px 24px;
	border-bottom: 2px solid var(--structureBorder);
}
#themePanel h1 {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding-top: 4px;
	font-size: 2.6em;
	line-height: 1;
}
#themePanel .themeClose {
	appearance: none;
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	margin: -6px 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--bodyText);
	cursor: pointer;
}
#themePanel .themeClose:hover {
	background-color: var(--light);
}
#themePanel .themeClose svg {
	width: 18px;
	height: 18px;
}
#themePanel .themeBody {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 24px 8px;
}
#themePanel .themeSection {
	padding: 16px 0 14px;
}
#themePanel .themeSection + .themeSection {
	border-top: 2px solid var(--structureBorder);
}
#themePanel .themeHeading {
	margin: 0 0 12px;
	font-family: kirupaPixel;
	font-size: 1.5em;
	line-height: 1;
	color: var(--headerText);
}
#themePanel .themeSwatches {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	justify-items: center;
	gap: 12px 6px;
}
#themePanel .themeSwatch {
	position: relative;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 3px solid var(--swatchA, #000);
	border-radius: 5px;
	background: var(--swatchB, #fff);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
#themePanel .themeSwatch:hover {
	transform: scale(1.12);
}
#themePanel .themeSwatch[aria-pressed="true"],
#themePanel .themeSwatchCustom.isActive {
	box-shadow: 0 0 0 3px var(--themeCardBg), 0 0 0 6px var(--primary);
}
#themePanel .themeSwatch:focus {
	outline: none;
}
#themePanel .themeSwatch:focus-visible,
#themePanel .themeSwatchCustom:focus-within {
	outline: 2px dashed var(--primary);
	outline-offset: 9px;
}
#themePanel .themeSwatchCustom {
	--rainbow: conic-gradient(from 90deg, #ff5a5a, #ffd23f, #5ee05e, #3fd6ff, #5a7bff, #c65aff, #ff5a5a);
	border-color: transparent;
	background: var(--rainbow) border-box;
}
#themePanel .themeSwatchCustom.hasColor {
	background: linear-gradient(var(--customFill), var(--customFill)) padding-box, var(--rainbow) border-box;
}
#themePanel .themeSwatchCustom input {
	position: absolute;
	inset: -3px;
	width: calc(100% + 6px);
	height: calc(100% + 6px);
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}
#themePanel .themeCustomRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 18px;
}
#themePanel .themeCustomRow label {
	font-family: kirupaPixel;
	font-size: 1.35em;
	line-height: 1;
	padding-top: 3px;
	color: var(--headerText);
}
#themePanel .themeHexInput {
	width: 8.5em;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 10px;
	font-family: var(--monoFonts);
	font-size: 16px;
	line-height: 1.2;
	color: var(--bodyText);
	background-color: var(--inputBackground);
	border: 3px solid var(--inputBorder);
	border-radius: 5px;
}
#themePanel .themeHexInput:focus {
	outline: none;
	border-color: var(--primary);
}
#themePanel .themeHexInput[aria-invalid="true"] {
	border-color: #d93025;
}
#themePanel .themePalette {
	display: flex;
	gap: 5px;
	margin-left: auto;
}
#themePanel .themePalette i {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
#themePanel .themePalette i:nth-child(1) {
	background-color: var(--primary);
}
#themePanel .themePalette i:nth-child(2) {
	background-color: var(--primaryDarker);
}
#themePanel .themePalette i:nth-child(3) {
	background-color: var(--primaryLighter);
}
#themePanel .themePalette i:nth-child(4) {
	background-color: var(--primaryLightest);
}
#themePanel .themePalette i:nth-child(5) {
	background-color: var(--highlighter);
}
#themePanel .themeHint {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--darkTextSecondary);
}
#themePanel .themeSegment input,
#themePanel .themeStyleOption input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
#themePanel .themeSegments {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	padding: 4px;
	background-color: var(--light);
	border: 3px solid var(--structureBorder);
	border-radius: 6px;
}
#themePanel .themeSegment {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 6px 8px;
	border-radius: 4px;
	font-family: kirupaPixel;
	font-size: 1.3em;
	line-height: 1;
	color: var(--bodyText);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
#themePanel .themeSegment span {
	padding-top: 3px;
}
#themePanel .themeSegment:hover {
	background-color: var(--themeCardBg);
}
#themePanel .themeSegment.isChecked {
	background-color: var(--primary);
	color: var(--textOnPrimary);
}
#themePanel .themeSegment svg {
	flex: none;
	width: 18px;
	height: 18px;
}
#themePanel .themeStyles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
#themePanel .themeStyleOption {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 10px 12px;
	border: 3px solid var(--structureBorder);
	border-radius: 6px;
	background-color: var(--pageBackground);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
#themePanel .themeStyleOption:hover {
	border-color: var(--primaryLighter);
}
#themePanel .themeStyleOption.isChecked {
	border-color: var(--primary);
	box-shadow: inset 0 0 0 1px var(--primary);
}
#themePanel .themeSegment:focus-within,
#themePanel .themeStyleOption:focus-within {
	outline: 2px dashed var(--primary);
	outline-offset: 2px;
}
@supports selector(:has(a)) {
	#themePanel .themeSegment:focus-within,
	#themePanel .themeStyleOption:focus-within {
		outline: none;
	}
	#themePanel .themeSegment:has(input:focus-visible),
	#themePanel .themeStyleOption:has(input:focus-visible) {
		outline: 2px dashed var(--primary);
		outline-offset: 2px;
	}
}
#themePanel .themeStylePreview {
	position: relative;
	display: block;
	height: 64px;
	margin-bottom: 6px;
	overflow: hidden;
	background-color: var(--primaryLightest);
}
#themePanel .themeStylePreview b {
	position: absolute;
	z-index: 1;
	top: 9px;
	left: 12px;
	font-weight: normal;
	line-height: 1;
	color: var(--headerText);
}
#themePanel .themeStylePreview::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 12px;
	width: 34px;
	height: 14px;
	background-color: var(--primary);
}
#themePanel .themeStylePreview i {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 22px;
	background-color: var(--primaryLighter);
}
#themePanel .themeStylePixel .themeStylePreview b {
	font-family: kirupaPixel;
	font-size: 30px;
}
#themePanel .themeStylePixel .themeStylePreview::before {
	box-shadow: 3px 3px 0 var(--primaryDarker);
}
#themePanel .themeStylePixel .themeStylePreview i {
	clip-path: polygon(0 100%, 0 50%, 12% 50%, 12% 25%, 26% 25%, 26% 0, 44% 0, 44% 40%, 58% 40%, 58% 15%, 74% 15%, 74% 55%, 88% 55%, 88% 30%, 100% 30%, 100% 100%);
}
#themePanel .themeStyleNature .themeStylePreview {
	border-radius: 12px;
}
#themePanel .themeStyleNature .themeStylePreview b {
	font-family: "Fraunces Soft", Georgia, serif;
	font-weight: 600;
	font-size: 28px;
}
#themePanel .themeStyleNature .themeStylePreview::before {
	border-radius: 999px;
}
#themePanel .themeStyleNature .themeStylePreview i {
	height: 30px;
	background:
		radial-gradient(60% 100% at 25% 100%, var(--primaryLighter) 98%, transparent 100%),
		radial-gradient(55% 80% at 80% 100%, var(--primary) 98%, transparent 100%);
	opacity: .85;
}
#themePanel .themeStyleName {
	font-family: kirupaPixel;
	font-size: 1.35em;
	line-height: 1;
	color: var(--headerText);
}
#themePanel .themeStyleNote {
	font-size: 13px;
	line-height: 1.35;
	color: var(--darkTextSecondary);
}
#themePanel .themeFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 24px 18px;
	border-top: 2px solid var(--structureBorder);
}
#themePanel .themeReset {
	appearance: none;
	margin: 0;
	padding: 8px 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--linkForeground);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
#themePanel .themeReset:hover {
	color: var(--primaryDarker);
}
#themePanel .themeDone {
	min-width: 120px;
	margin: 0;
	text-align: center;
	justify-content: center;
	cursor: pointer;
}
@media (max-width: 600px) {
	.themeDialog {
		padding: 24px 0 0;
	}
	.themeDialog[open] {
		animation-name: kirupaSheetIn;
		animation-duration: .25s;
	}
	#themeWrapper #themePanel {
		width: 100%;
		margin: auto 0 0;
		border-width: 5px 0 0;
		box-shadow: 0 -6px 0 rgba(0, 0, 0, .2);
	}
	#themePanel .leftCat {
		display: none;
	}
	#themePanel .themeHeader {
		padding: 16px 12px 12px 18px;
	}
	#themePanel h1 {
		font-size: 2.1em;
	}
	#themePanel .themeBody {
		padding: 0 18px 4px;
	}
	#themePanel .themeSwatches {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 14px 8px;
	}
	#themePanel .themeSwatch {
		width: 44px;
		height: 44px;
	}
	#themePanel .themeSwatch:hover {
		transform: none;
	}
	#themePanel .themePalette {
		margin-left: 0;
	}
	#themePanel .themeSegment {
		flex-direction: column;
		gap: 4px;
		min-height: 58px;
	}
	#themePanel .themeStyleOption {
		padding: 8px 8px 10px;
	}
	#themePanel .themeStylePreview {
		height: 52px;
	}
	#themePanel .themeFooter {
		padding: 12px 18px max(16px, env(safe-area-inset-bottom));
	}
}
@media (prefers-reduced-motion: reduce) {
	.themeDialog[open] {
		animation: none;
	}
	#themePanel .leftCat,
	#themePanel .themeSwatch {
		transition: none;
	}
}

.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;
	--header-grid-gap: 10px;
	/* Link tracks grow to this, but never shrink below each link's own width. */
	--header-link-column: 200px;
	/* Floor for the empty spacer column. The left nav is position:fixed at the
	   viewport edge and 350px wide, so this keeps the first header link clear of
	   it instead of letting the link slide underneath. */
	--header-gutter: 355px;
    margin: 0 auto;
    margin-bottom: 100px;
    display: grid;
    grid-gap: var(--header-grid-gap);
    grid-template-columns: minmax(var(--header-gutter), 1.25fr) repeat(4, minmax(max-content, var(--header-link-column))) 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(var(--header-gutter), 1.25fr) repeat(4, minmax(max-content, var(--header-link-column))) 0px auto;
		}
		body #newFooter {
			margin-left: 350px;
		}
	}
	
	/* As the window narrows the flexible spacer column collapses first, sliding
	   the links left until they sit just clear of the fixed left nav. After that
	   the link tracks shrink from 200px down to each link's own width, closing the
	   dead space between them. These two steps then recover the remaining room from
	   the control and grid gaps, which is enough to keep all four links and the
	   "who's online" badge visible all the way down to 1420px, where the left nav
	   itself hides and the pressure disappears. Nothing is hidden before then. */
	@media all and (max-width: 1520px) {
		#mainHeader {
			--header-control-gap: 24px;
		}
	}
	
	@media all and (max-width: 1460px) {
		#mainHeader {
			--header-control-gap: 14px;
			--header-grid-gap: 5px;
		}
	}
	
	@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 {
		/* The left nav is gone below this width, so the spacer no longer has to
		   clear it and the links can keep sliding left toward the inline logo. */
		--header-gutter: 0px;
		--header-control-gap: 28px;
		--header-grid-gap: 10px;
        grid-template-columns: auto minmax(var(--header-gutter), 1.25fr) repeat(4, minmax(max-content, var(--header-link-column))) 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;
    }
}

/* By this width the spacer column has fully collapsed and every link track is
   down to its own text width, so there is no slack left to reclaim: the controls
   would start eating their own margin. Only now begin dropping links, rightmost
   first, so the links nearest the logo - and the "who's online" badge - stay
   visible the longest. */
@media all and (max-width: 1230px) {
    #mainHeader {
        grid-template-columns: auto minmax(var(--header-gutter), 1.25fr) repeat(3, minmax(max-content, var(--header-link-column))) 0px auto;
    }
    #mainHeader #codingHeader {
        display: none;
    }
}

@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;
}


/* =====================================================================
   Nature style
   ---------------------------------------------------------------------
   An opt-in alternative to the classic pixel look, picked from the theme
   customizer. Everything below is scoped to html.style_nature, so nothing
   changes for visitors who stay on Pixel (the default).

   Performance notes:
   - The two web fonts are only requested when an element actually uses
     them, i.e. when html.style_nature is set (the bootstrap in
     header.shtml preloads them in that case) or when the customizer's
     Nature preview is on screen.
   - Icons come from one small same-origin SVG sprite (nature/icons.svg)
     used as CSS masks and colored from the theme color (see "Colorful
     icons" near the end). Only Nature visitors download it. The logo is
     the existing /images/orange_logo.svg.
   - The animated pixel clouds and stars are display:none here, which
     also stops their animations.
   To turn the whole style off for everyone, set kirupaNatureEnabled to
   false in ssi/newDesign/header.shtml.
   ===================================================================== */
@font-face {
	font-family: "Nunito";
	src: url("/fonts/nunito-latin-var.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces Soft";
	src: url("/fonts/fraunces-soft-600-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

html.style_nature {
	--serifFonts: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--natureDisplay: "Fraunces Soft", Georgia, "Times New Roman", serif;
	--natureShadow: 0 1px 2px rgba(20, 30, 40, .06), 0 8px 24px -6px rgba(20, 30, 40, .16);
	--natureShadowLift: 0 2px 4px rgba(20, 30, 40, .08), 0 14px 30px -8px rgba(20, 30, 40, .24);
	--natureSoftFill: color-mix(in srgb, var(--primaryLightest) 70%, var(--pageBackground));
}
html.style_nature.theme_dark {
	--natureShadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -6px rgba(0, 0, 0, .55);
	--natureShadowLift: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 30px -8px rgba(0, 0, 0, .65);
}

/* ---------- Typography ---------- */
html.style_nature h1,
html.style_nature h2,
html.style_nature h3,
html.style_nature h4,
html.style_nature h5 {
	font-family: var(--natureDisplay);
	font-weight: 600;
	letter-spacing: -.01em;
	text-shadow: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Sizes use :where() so contextual rules (.leftNav h3, #newFooter h3, ...)
   still win the way they do in the pixel style. "body" lifts them just above
   the bare h1-h5 rules, even when a page links an older kirupa.css after this one. */
:where(html.style_nature) body h1 {
	font-size: 2.6em;
	line-height: 1.15;
}
:where(html.style_nature) body h2 {
	font-size: 2.3em;
	line-height: 1.15;
	margin-bottom: 0;
}
:where(html.style_nature) body h3 {
	font-size: 1.8em;
	line-height: 1.2;
}
:where(html.style_nature) body h4 {
	font-size: 1.45em;
	line-height: 1.2;
	margin-bottom: -6px;
}
:where(html.style_nature) body h5 {
	font-size: 1.1em;
	line-height: 1.25;
	margin-bottom: -6px;
}
html.style_nature #mainContent h2 {
	line-height: 1.15;
}
html.style_nature .authorText h1 {
	font-family: var(--natureDisplay);
	font-size: 4.4em;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.02em;
	margin-left: 0;
	text-shadow: none;
}
html.style_nature .authorText h1.compact {
	font-size: 3.4em;
}
html.style_nature .leftNav h3 {
	font-size: 20px;
}
html.style_nature #sigNewsletter h4 {
	font-size: 2.2em;
}
html.style_nature #newFooter h3 {
	font-size: 1.3em;
}
html.style_nature .tutorialInfo {
	font-family: var(--serifFonts);
	font-size: 1.05em;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
}
html.style_nature .tutorialInfo a {
	font-weight: 800;
}
html.style_nature .forumSigHeader {
	font-family: var(--serifFonts);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
}
html.style_nature .forumSigBody {
	font-family: var(--natureDisplay);
	font-size: 1.6em;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
}
html.style_nature .forumSigLinks {
	background-image: none;
}

/* ---------- Header ---------- */
html.style_nature #mainHeader {
	font-family: var(--serifFonts);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html.style_nature #kirupaOrangeLogo {
	width: 64px;
	height: 64px;
	image-rendering: auto;
}
/* "body" outranks older cached copies of this file that some pages still load after this one. */
html.style_nature body #kirupaOrangeLogo {
	background: url("/images/orange_logo.svg") center / contain no-repeat;
}
html.style_nature #kirupaOrangeLogo img {
	display: block;
	opacity: 0;
}
/* Per-id selectors so these beat "#mainHeader #bookHeader" and friends.
   Never set display here: .wideOnly hides these links on small screens. */
html.style_nature #mainHeader #tutorialsHeader,
html.style_nature #mainHeader #bookHeader,
html.style_nature #mainHeader #videosHeader,
html.style_nature #mainHeader #codingHeader {
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	background-image: none;
	image-rendering: auto;
	line-height: 26px;
	transition: background-color .2s ease, box-shadow .2s ease;
}
html.style_nature #mainHeader .headerLink::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	vertical-align: -5px;
	background-color: var(--primary);
	-webkit-mask: var(--natureIcon) center / contain no-repeat;
	mask: var(--natureIcon) center / contain no-repeat;
}
html.style_nature #mainHeader #tutorialsHeader {
	--natureIcon: url("/ssi/newDesign/nature/sprout.svg");
}
html.style_nature #mainHeader #bookHeader {
	--natureIcon: url("/ssi/newDesign/nature/book.svg");
}
html.style_nature #mainHeader #videosHeader {
	--natureIcon: url("/ssi/newDesign/nature/play.svg");
}
html.style_nature #mainHeader #codingHeader {
	--natureIcon: url("/ssi/newDesign/nature/chat.svg");
}
html.style_nature #mainHeader .headerLink:hover,
html.style_nature #mainHeader .articles {
	margin-bottom: 0;
	border-bottom: 0;
}
html.style_nature #mainHeader .headerLink:hover {
	background-color: color-mix(in srgb, var(--pageBackground) 60%, transparent);
}
html.style_nature #mainHeader .articles {
	background-color: color-mix(in srgb, var(--pageBackground) 85%, transparent);
	box-shadow: var(--natureShadow);
}
html.style_nature #mainHeader .headerLink:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}
html.style_nature #mainHeader .onlineCountLink {
	padding: 9px 14px;
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 55%, transparent), var(--natureShadow);
	font-size: 14px;
	font-weight: 700;
}
html.style_nature #mainHeader .onlineCountIcon {
	border-radius: 50%;
}
html.style_nature #mainHeader .miniheadericons {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	transition: background-color .2s ease, transform .2s ease;
}
html.style_nature #mainHeader .miniheadericons img,
html.style_nature #mainHeader .miniheadericons svg {
	display: none;
}
html.style_nature #mainHeader .miniheadericons::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--natureIcon) center / contain no-repeat;
	mask: var(--natureIcon) center / contain no-repeat;
}
html.style_nature #mainHeader .miniheadericons:hover {
	background-color: var(--natureSoftFill);
	transform: translateY(-1px);
}
html.style_nature #mainHeader .miniheadericons:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}
html.style_nature #soundToggle {
	--natureIcon: url("/ssi/newDesign/nature/sound-on.svg");
}
html.style_nature #soundToggle[aria-pressed="false"] {
	--natureIcon: url("/ssi/newDesign/nature/sound-off.svg");
}
html.style_nature #personalizeLink {
	--natureIcon: url("/ssi/newDesign/nature/palette.svg");
}
html.style_nature #searchSite {
	--natureIcon: url("/ssi/newDesign/nature/search.svg");
}

/* Rolling hills replace the pixel clouds and stars. */
html.style_nature #backgroundHeader {
	image-rendering: auto;
}
html.style_nature #backgroundHeader .stars,
html.style_nature #backgroundHeader .clouds {
	display: none;
}
html.style_nature:not(.theme_dark) #backgroundHeader {
	background: radial-gradient(circle at calc(100% - 150px) 150px, rgba(255, 240, 190, .85) 0, rgba(255, 240, 190, .45) 30px, rgba(255, 240, 190, 0) 95px) no-repeat;
}
html.style_nature #backgroundHeader::before,
html.style_nature #backgroundHeader::after {
	content: "";
	position: absolute;
	right: -5%;
	bottom: 0;
	left: -5%;
	pointer-events: none;
	-webkit-mask: url("/ssi/newDesign/nature/hills.svg") 0 0 / 100% 100% no-repeat;
	mask: url("/ssi/newDesign/nature/hills.svg") 0 0 / 100% 100% no-repeat;
}
html.style_nature #backgroundHeader::before {
	height: 160px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--primaryLighter) 85%, var(--primary)), var(--pageBackground) 95%);
	opacity: .6;
	transform: scaleX(-1);
}
html.style_nature #backgroundHeader::after {
	height: 110px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--primaryLighter) 55%, var(--pageBackground)), var(--pageBackground) 85%);
}
html.style_nature.theme_dark #backgroundHeader::before {
	background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 45%, var(--pageBackground)), var(--pageBackground) 95%);
}
html.style_nature.theme_dark #backgroundHeader::after {
	background: linear-gradient(180deg, color-mix(in srgb, var(--primaryLightest) 75%, var(--pageBackground)), var(--pageBackground) 85%);
}

/* ---------- Buttons ---------- */
html.style_nature .greenButton,
html.style_nature .kirupaButton {
	padding: 13px 22px;
	border-radius: 999px;
	box-shadow: var(--natureShadow);
	font-family: var(--serifFonts);
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .02em;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html.style_nature .greenButton:hover,
html.style_nature .kirupaButton:hover {
	box-shadow: var(--natureShadowLift);
	transform: translateY(-1px);
}
html.style_nature .kirupaButtonSmall {
	padding: 6px 14px;
	font-size: 13px;
}
html.style_nature #sigNewsletter .greenButton,
html.style_nature .leftQuestion .greenButton {
	padding: 13px 22px 13px 18px;
	background-image: none;
	image-rendering: auto;
}
html.style_nature #sigNewsletter .greenButton::before,
html.style_nature .leftQuestion .greenButton::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	vertical-align: -4px;
	background-color: currentColor;
	-webkit-mask: var(--natureIcon) center / contain no-repeat;
	mask: var(--natureIcon) center / contain no-repeat;
}
html.style_nature #sigNewsletter .greenButton {
	--natureIcon: url("/ssi/newDesign/nature/mail.svg");
}
html.style_nature .leftQuestion .greenButton {
	--natureIcon: url("/ssi/newDesign/nature/chat.svg");
}
html.style_nature .leftQuestion .greenButton::before {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
}

/* ---------- Side navigation ---------- */
html.style_nature .leftNav {
	border-radius: 0 28px 28px 0;
	background: rgba(var(--leftNavLight), .55);
	box-shadow: 1px 0 0 color-mix(in srgb, var(--darkStructureBorder) 55%, transparent), 14px 0 32px -22px rgba(20, 30, 40, .35);
}
html.style_nature .leftNavContents,
html.style_nature .leftQuestion {
	border-top: 1px solid color-mix(in srgb, var(--leftNavLine) 70%, transparent);
}
html.style_nature .leftNav li a {
	margin-right: 14px;
	padding-left: 14px;
	border-left: 0;
	border-radius: 12px;
	font-family: var(--serifFonts);
	font-size: 15px;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
	transition: background-color .15s ease, box-shadow .15s ease;
}
html.style_nature .leftNav li a:hover,
html.style_nature .leftNav li a.currentArticle {
	outline: 0;
	background-color: var(--pageBackground);
	box-shadow: var(--natureShadow);
}
html.style_nature .leftNav li a.currentArticle {
	box-shadow: inset 3px 0 0 var(--primary), var(--natureShadow);
}
html.style_nature .leftNav li a:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}
html.style_nature #rightContents .newForum p,
html.style_nature .leftNavContainer p {
	font-family: var(--natureDisplay);
	font-size: 19px;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
}
html.style_nature #rightContents nav.navigationBoxes ul ul a {
	filter: none;
	font-family: var(--serifFonts);
	font-size: 15px;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
}
/* Swap the stepped pixel rules beside the forum boxes for a smooth line. */
html.style_nature #rightContents .newForum .blockBorder,
html.style_nature .askForumSig > div:first-child > svg {
	visibility: hidden;
}
html.style_nature #rightContents .newForum::before {
	content: "";
	position: absolute;
	top: -20px;
	left: -29px;
	width: 2px;
	height: 523px;
	border-radius: 2px;
	background: linear-gradient(180deg, transparent, var(--structureBorder) 12%, var(--structureBorder) 88%, transparent);
}
html.style_nature .askForumSig > div:first-child {
	background: linear-gradient(180deg, transparent, var(--structureBorder) 12%, var(--structureBorder) 88%, transparent) 6px 0 / 2px 100% no-repeat;
}

/* ---------- Content ---------- */
html.style_nature #mainContent .articleList li > a {
	border-radius: 16px;
}
html.style_nature .theTopics .articleList li > a {
	border: 1px solid var(--structureBorder);
	font-family: var(--serifFonts);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
}
html.style_nature #mainContent .theTopics .articleList li > a {
	border-radius: 18px;
}
html.style_nature #mainContent .theArticles ul.articleList li > a {
	font-family: var(--serifFonts);
	font-size: 16.5px;
	font-weight: 600;
	-webkit-font-smoothing: antialiased;
}
html.style_nature .embed-container {
	border: 0;
	border-radius: 18px;
	box-shadow: var(--natureShadow);
}
html.style_nature iframe.centerImage,
html.style_nature video.centerImage,
html.style_nature .centerImage iframe,
html.style_nature .centerImage video {
	border: 0;
	border-radius: 16px;
}
html.style_nature p.centerImage img {
	border: 1px solid var(--structureBorder);
	border-radius: 14px;
}
html.style_nature pre[class*="language-"] {
	border-radius: 14px;
}
html.style_nature code[class*="language-"],
html.style_nature pre[class*="language-"] {
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
	font-size: 15px;
}
/* Home page hero: drop the pixel TV frame around the video. */
html.style_nature .videoOverlayImage,
html.style_nature .videoOverlayBG {
	display: none;
}
html.style_nature .videoHomeFrame .embed-container {
	border-radius: 28px;
}

/* ---------- Footer ---------- */
html.style_nature .newFooterSecond .popularTags a {
	display: inline-block;
	margin: 4px 2px;
	padding: 6px 14px;
	border-radius: 999px;
	font-family: var(--serifFonts);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
html.style_nature .newFooterThird .aboutFooter a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-left: 0;
	background-image: none !important;
	image-rendering: auto;
	font-family: var(--serifFonts);
	font-size: 16px;
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
}
html.style_nature .newFooterThird .aboutFooter a::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background-color: var(--primary);
	-webkit-mask: var(--natureIcon) center / contain no-repeat;
	mask: var(--natureIcon) center / contain no-repeat;
}
html.style_nature body .newFooterThird .aboutFooter a[href*="whatiskirupa"]::before {
	background: url("/images/orange_logo.svg") center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
}
html.style_nature .aboutFooter a[href*="/about/site"] {
	--natureIcon: url("/ssi/newDesign/nature/heart.svg");
}
html.style_nature .aboutFooter a[href*="whos-online"] {
	--natureIcon: url("/ssi/newDesign/nature/globe.svg");
}
html.style_nature .aboutFooter a[href*="forum.kirupa"] {
	--natureIcon: url("/ssi/newDesign/nature/smile.svg");
}
html.style_nature .kirupaKopyright {
	font-family: var(--serifFonts);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	-webkit-font-smoothing: antialiased;
}
html.style_nature .newFooterFirst > div > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	filter: none !important;
	image-rendering: auto !important;
	text-decoration: none;
}
html.style_nature .newFooterFirst > div > a > svg {
	display: none;
}
html.style_nature .newFooterFirst > div > a::before {
	content: "";
	width: 52px;
	height: 52px;
}
html.style_nature body .newFooterFirst > div > a::before {
	background: url("/images/orange_logo.svg") center / contain no-repeat;
}
html.style_nature .newFooterFirst > div > a::after {
	content: "kirupa";
	color: var(--primary);
	font-family: var(--natureDisplay);
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	-webkit-font-smoothing: antialiased;
}
html.style_nature .newFooterFirst .footerSocials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	filter: none;
}
html.style_nature .newFooterFirst .footerSocials li {
	margin: 0;
}
html.style_nature .newFooterFirst .footerSocials li:hover {
	transform: none;
}
html.style_nature .newFooterFirst .footerSocials li a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--natureSoftFill);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
	transition: background-color .2s ease, transform .2s ease;
}
html.style_nature .newFooterFirst .footerSocials li a svg {
	display: none;
}
html.style_nature .newFooterFirst .footerSocials li a::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--darkText);
	-webkit-mask: var(--natureIcon) center / contain no-repeat;
	mask: var(--natureIcon) center / contain no-repeat;
}
html.style_nature .newFooterFirst .footerSocials li a:hover {
	background-color: var(--primary);
	transform: translateY(-2px);
}
html.style_nature .newFooterFirst .footerSocials li a:hover::before {
	background-color: var(--textOnPrimary);
}
html.style_nature .footerSocials a[href*="youtube"] {
	--natureIcon: url("/ssi/newDesign/nature/youtube.svg");
}
html.style_nature .footerSocials a[href*="twitter"] {
	--natureIcon: url("/ssi/newDesign/nature/x.svg");
}
html.style_nature .footerSocials a[href*="tiktok"] {
	--natureIcon: url("/ssi/newDesign/nature/tiktok.svg");
}
html.style_nature .footerSocials a[href*="facebook"] {
	--natureIcon: url("/ssi/newDesign/nature/facebook.svg");
}
html.style_nature .footerSocials a[href*="instagram"] {
	--natureIcon: url("/ssi/newDesign/nature/instagram.svg");
}
html.style_nature .footerSocials a[href*="linkedin"] {
	--natureIcon: url("/ssi/newDesign/nature/linkedin.svg");
}
html.style_nature .footerSocials a[href*="github"] {
	--natureIcon: url("/ssi/newDesign/nature/github.svg");
}
html.style_nature .footerSocials a[href*="spotify"] {
	--natureIcon: url("/ssi/newDesign/nature/spotify.svg");
}

/* ---------- Search and kirupabot ---------- */
html.style_nature .DocSearch-Container {
	font-family: var(--serifFonts);
}
html.style_nature .DocSearch-Container,
html.style_nature .DocSearch-Hit-source,
html.style_nature .DocSearch-Hit-path,
html.style_nature .DocSearch-Input {
	-webkit-font-smoothing: antialiased;
}
html.style_nature .DocSearch-Hit-source {
	font-weight: 800;
}
html.style_nature .DocSearch-Modal {
	border-radius: 20px;
}
html.style_nature .DocSearch-Form {
	border-width: 2px;
	border-radius: 999px;
}
html.style_nature .DocSearch-Hit a {
	border-radius: 12px;
}
html.style_nature .DocSearch-Footer {
	border-radius: 0 0 20px 20px;
}
html.style_nature #kirupabot-widget .kbw-launcher {
	--kbw-launcher-shadow-rest: 0 6px 18px -4px rgba(20, 30, 40, .4);
	--kbw-launcher-shadow-lift: 0 12px 26px -6px rgba(20, 30, 40, .4);
	--kbw-launcher-shadow-settle: 0 4px 14px -4px rgba(20, 30, 40, .35);
	border-color: rgba(255, 255, 255, .7);
	border-width: 2px;
	border-radius: 50%;
	transition: box-shadow .2s ease, transform .2s ease;
}
html.style_nature #kirupabot-widget .kbw-launcher:hover {
	transform: scale(1.04);
}
html.style_nature #kirupabot-widget .kbw-panel {
	border: 1px solid var(--kbw-soft-line);
	border-radius: 20px;
	box-shadow: 0 24px 56px -16px rgba(10, 20, 30, .45);
}
html.style_nature #kirupabot-widget {
	--kbw-pixel-font: var(--serifFonts);
	--kbw-label-font: var(--serifFonts);
	--kbw-soft-line: color-mix(in srgb, var(--kbw-ink) 14%, transparent);
	--kbw-soft-shadow: 0 1px 2px rgba(20, 30, 40, .08), 0 4px 12px -4px rgba(20, 30, 40, .18);
	-webkit-font-smoothing: antialiased;
}
html.style_nature #kirupabot-widget .kbw-launcher-icon svg {
	display: none;
}
html.style_nature #kirupabot-widget .kbw-launcher-icon {
	width: 30px;
	height: 30px;
	background-color: var(--textOnPrimary, #fff);
	-webkit-mask: url("/ssi/newDesign/nature/chat.svg") center / contain no-repeat;
	mask: url("/ssi/newDesign/nature/chat.svg") center / contain no-repeat;
}
html.style_nature #kirupabot-widget .kbw-launcher-close {
	color: var(--textOnPrimary, #fff);
	font-size: 30px;
	font-weight: 400;
}
html.style_nature #kirupabot-widget .kbw-launcher-label {
	padding: 7px 13px;
	border: 1px solid var(--kbw-soft-line);
	border-radius: 999px;
	box-shadow: var(--kbw-soft-shadow);
	font-size: 13px;
	font-weight: 700;
}
html.style_nature #kirupabot-widget .kbw-header {
	border-bottom: 1px solid var(--kbw-soft-line);
}
html.style_nature #kirupabot-widget .kbw-title {
	font-family: var(--natureDisplay);
	font-size: 19px;
	font-weight: 600;
	text-transform: none;
}
html.style_nature #kirupabot-widget .kbw-status {
	font-size: 12px;
}
html.style_nature #kirupabot-widget .kbw-full-chat,
html.style_nature #kirupabot-widget .kbw-close {
	border-width: 1.5px;
	border-radius: 999px;
	transition: background-color .15s ease;
}
html.style_nature #kirupabot-widget .kbw-full-chat {
	padding: 0 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: none;
}
html.style_nature #kirupabot-widget .kbw-close {
	font-size: 22px;
}
html.style_nature #kirupabot-widget .kbw-full-chat:hover,
html.style_nature #kirupabot-widget .kbw-close:hover {
	transform: none;
}
html.style_nature #kirupabot-widget .kbw-messages {
	background-image: none;
}
html.style_nature #kirupabot-widget .kbw-message {
	animation: kbw-message-in .25s ease-out;
}
html.style_nature #kirupabot-widget .kbw-avatar {
	border: 1px solid var(--kbw-soft-line);
	border-radius: 50%;
	box-shadow: none;
}
html.style_nature #kirupabot-widget .kbw-avatar img {
	display: none;
}
html.style_nature #kirupabot-widget .kbw-message:not(.kbw-user) .kbw-avatar::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--kbw-primary);
	-webkit-mask: url("/ssi/newDesign/nature/smile.svg") center / contain no-repeat;
	mask: url("/ssi/newDesign/nature/smile.svg") center / contain no-repeat;
}
html.style_nature #kirupabot-widget .kbw-user .kbw-avatar {
	border-color: transparent;
	font-size: 9px;
	font-weight: 800;
}
html.style_nature #kirupabot-widget .kbw-bubble {
	border: 1px solid var(--kbw-soft-line);
	border-radius: 4px 16px 16px 16px;
	box-shadow: var(--kbw-soft-shadow);
	font-size: 15px;
	line-height: 1.5;
}
html.style_nature #kirupabot-widget .kbw-user .kbw-bubble {
	border-color: transparent;
	border-radius: 16px 4px 16px 16px;
	box-shadow: var(--kbw-soft-shadow);
}
html.style_nature #kirupabot-widget .kbw-error .kbw-bubble {
	border-color: rgba(236, 0, 140, .3);
	box-shadow: var(--kbw-soft-shadow);
}
html.style_nature #kirupabot-widget .kbw-bubble code,
html.style_nature #kirupabot-widget .kbw-bubble pre {
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
html.style_nature #kirupabot-widget .kbw-bubble code {
	border: 0;
	border-radius: 6px;
	padding: 1px 5px;
}
html.style_nature #kirupabot-widget .kbw-bubble pre {
	border: 0;
	border-radius: 12px;
	box-shadow: none;
}
html.style_nature #kirupabot-widget .kbw-bubble pre code {
	padding: 0;
}
html.style_nature #kirupabot-widget .kbw-citation {
	border: 0;
	border-radius: 999px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 800;
}
html.style_nature #kirupabot-widget .kbw-source-link,
html.style_nature #kirupabot-widget .kbw-copy-button {
	padding: 5px 11px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	box-shadow: none;
	font-size: 12px;
	font-weight: 700;
	text-transform: none;
	transition: filter .15s ease;
}
html.style_nature #kirupabot-widget .kbw-source-link:hover,
html.style_nature #kirupabot-widget .kbw-copy-button:hover {
	filter: brightness(.95);
	transform: none;
}
html.style_nature #kirupabot-widget .kbw-suggestion {
	padding: 7px 13px;
	border: 0;
	border-radius: 999px;
	box-shadow: var(--kbw-soft-shadow);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
html.style_nature #kirupabot-widget .kbw-suggestion:hover {
	box-shadow: 0 2px 4px rgba(20, 30, 40, .1), 0 8px 18px -6px rgba(20, 30, 40, .3);
	transform: translateY(-1px);
}
html.style_nature #kirupabot-widget .kbw-typing-label {
	font-size: 13px;
	text-transform: none;
}
html.style_nature #kirupabot-widget .kbw-typing-dot {
	border: 0;
	border-radius: 50%;
	animation-timing-function: ease-in-out;
}
html.style_nature #kirupabot-widget .kbw-composer-area {
	border-top: 1px solid var(--kbw-soft-line);
}
html.style_nature #kirupabot-widget .kbw-composer {
	border: 1.5px solid var(--kbw-soft-line);
	border-radius: 16px;
	box-shadow: none;
	overflow: hidden;
}
html.style_nature #kirupabot-widget .kbw-composer:focus-within {
	border-color: var(--kbw-primary);
}
html.style_nature #kirupabot-widget .kbw-send {
	justify-self: center;
	width: 38px;
	height: 38px;
	margin: 4px;
	border-left: 0;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 800;
}
html.style_nature #kirupabot-widget .kbw-send:hover {
	transform: none;
	filter: brightness(.95);
}
html.style_nature #kirupabot-widget .kbw-composer-meta {
	font-size: 11px;
	text-transform: none;
	opacity: .8;
}

/* ---------- Theme customizer ---------- */
html.style_nature #themePanel .themeIconSmooth {
	display: block;
}
html.style_nature #themePanel .themeIconPixel,
html.style_nature #themePanel .leftCat {
	display: none;
}
html.style_nature #themePanel .themeTitleLeaf {
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-right: .3em;
	vertical-align: -.06em;
	color: var(--primary);
}
html.style_nature #themeWrapper #themePanel {
	--themeCardBg: var(--pageBackground);
	border: 0;
	border-radius: 24px;
	box-shadow: 0 24px 64px -16px rgba(10, 20, 30, .45), 0 2px 6px rgba(10, 20, 30, .12);
}
html.style_nature #themePanel h1 {
	padding-top: 0;
	font-size: 1.75em;
}
html.style_nature #themePanel .themeHeader {
	border-bottom-width: 1px;
}
html.style_nature #themePanel .themeFooter,
html.style_nature #themePanel .themeSection + .themeSection {
	border-top-width: 1px;
}
html.style_nature #themePanel .themeHeading {
	color: var(--darkTextSecondary);
	font-family: var(--serifFonts);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
html.style_nature #themePanel .themeCustomRow label,
html.style_nature #themePanel .themeSegment,
html.style_nature #themePanel .themeStyleName {
	font-family: var(--serifFonts);
	font-size: 15px;
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
}
html.style_nature #themePanel .themeStyleName {
	font-weight: 800;
}
html.style_nature #themePanel .themeCustomRow label,
html.style_nature #themePanel .themeSegment span {
	padding-top: 0;
}
html.style_nature #themePanel .themeSwatch,
html.style_nature #themePanel .themeClose,
html.style_nature #themePanel .themePalette i {
	border-radius: 50%;
}
html.style_nature #themePanel .themeSegments {
	border-width: 1px;
	border-radius: 999px;
}
html.style_nature #themePanel .themeSegment {
	border-radius: 999px;
}
html.style_nature #themePanel .themeStyleOption {
	border-width: 2px;
	border-radius: 18px;
}
html.style_nature #themePanel .themeHexInput {
	border-width: 2px;
	border-radius: 12px;
}

/* ---------- Colorful icons ----------
   Browsers with color-mix() get two-tone icons that follow the theme
   color. Every icon comes from one sprite, nature/icons.svg, used as two
   masks: ::before shows the colored shapes and ::after the outline. The
   colors are CSS gradients laid under each mask and mixed from the tokens
   below, so switching themes recolors them with no extra downloads.
   Per-icon values are generated by .github/tools/nature-icons.js.
   Older browsers keep the single-color icons above.
   Selectors include "body" so they outrank those single-color rules, even
   when an older cached copy of this file loads after this one. */
@supports (color: color-mix(in oklab, red, blue)) {
	html.style_nature {
		--natMain: var(--primary);
		--natInk: color-mix(in oklab, var(--natMain) 30%, #0e1620);
		--natMainHi: color-mix(in oklab, var(--natMain) 60%, #fff);
		--natSoft: color-mix(in oklab, var(--natMain) 26%, #fff);
		--natPaper: color-mix(in oklab, var(--natMain) 5%, #fff);
		--natLine: color-mix(in oklab, var(--natMain) 55%, #fff);
		--natLeaf: color-mix(in oklab, #34b766 85%, var(--natMain));
		--natLeafHi: color-mix(in oklab, #9bdc5a 85%, var(--natMain));
		--natSun: color-mix(in oklab, #ffc53d 88%, var(--natMain));
		--natBloom: color-mix(in oklab, #ff6b5b 82%, var(--natMain));
		--natBark: color-mix(in oklab, #7a4a2e 85%, var(--natMain));
		/* Social glyph tint, the GitHub accent, and glyph colors on hover. */
		--natTone: var(--natInk);
		--natGh: var(--natInk);
		--natOnGh: var(--natPaper);
		--natOnMain: var(--textOnPrimary);
	}
	/* Some theme colors make muddy mixes, so start from a nearby color. */
	html.style_nature.theme_black {
		--natMain: #4b5563;
		--natInk: #111418;
	}
	html.style_nature.theme_yellow {
		--natMain: color-mix(in oklab, var(--primary) 70%, #e0a000);
	}
	html.style_nature.theme_yellow_dark {
		--natMain: color-mix(in oklab, var(--primary) 50%, #e0a000);
	}
	html.style_nature.theme_dark {
		--natInk: color-mix(in oklab, var(--natMain) 40%, #0b1016);
		--natTone: #fff;
		--natGh: #c9d1d9;
		--natOnGh: var(--natInk);
	}

	/* Header links: the icon sits in the same 42px of left padding as before. */
	html.style_nature body #mainHeader #tutorialsHeader,
	html.style_nature body #mainHeader #bookHeader,
	html.style_nature body #mainHeader #videosHeader,
	html.style_nature body #mainHeader #codingHeader {
		position: relative;
		padding-left: 42px;
	}
	html.style_nature body #mainHeader .headerLink::before,
	html.style_nature body #mainHeader .headerLink::after {
		content: "";
		position: absolute;
		top: calc(50% - .5em);
		left: 10px;
		width: 1em;
		height: 1em;
		margin: 0;
		font-size: 24px;
		pointer-events: none;
	}
	html.style_nature body #mainHeader .miniheadericons::before,
	html.style_nature body #mainHeader .miniheadericons::after {
		content: "";
		grid-area: 1 / 1;
		width: 1em;
		height: 1em;
		font-size: 24px;
	}
	html.style_nature body .newFooterThird .aboutFooter a {
		position: relative;
	}
	html.style_nature body .newFooterThird .aboutFooter a::before,
	html.style_nature body .newFooterThird .aboutFooter a::after {
		font-size: 22px;
	}
	html.style_nature body .newFooterThird .aboutFooter a::after {
		content: "";
		position: absolute;
		top: calc(50% - .5em);
		left: 0;
		width: 1em;
		height: 1em;
	}
	html.style_nature body .newFooterThird .aboutFooter a[href*="whatiskirupa"]::after {
		content: none;
	}
	html.style_nature body #kirupabot-widget .kbw-message:not(.kbw-user) .kbw-avatar::before,
	html.style_nature body #kirupabot-widget .kbw-message:not(.kbw-user) .kbw-avatar::after {
		content: "";
		grid-area: 1 / 1;
		width: 1em;
		height: 1em;
		font-size: 18px;
	}
	/* Hot off the Forums: one page icon for every post, in place of the
	   per-category GIFs the forum script sets inline. It lines up with the
	   first line of a title. These links carry a top and z-index that only
	   take effect once they are positioned, so those are reset. */
	html.style_nature body #rightContents #forumListing a {
		position: relative;
		top: 0;
		z-index: auto;
		background-image: none !important;
	}
	html.style_nature body #rightContents #forumListing a::before,
	html.style_nature body #rightContents #forumListing a::after {
		content: "";
		position: absolute;
		top: 12px;
		left: 14px;
		width: 1em;
		height: 1em;
		font-size: 18px;
		image-rendering: auto;
		pointer-events: none;
	}
	/* Newsletter callout: an envelope where the pixel mail GIF was. */
	html.style_nature body #newsletter_callout {
		position: relative;
		background-image: none;
	}
	html.style_nature body #newsletter_callout::before,
	html.style_nature body #newsletter_callout::after {
		content: "";
		position: absolute;
		top: 30px;
		left: 30px;
		width: 1em;
		height: 1em;
		font-size: 80px;
		image-rendering: auto;
		pointer-events: none;
	}

	/* The two layers. Sizes are in em because the gradients in --natFill
	   and --natInkBg are. */
	html.style_nature body #mainHeader .headerLink::before,
	html.style_nature body #mainHeader .miniheadericons::before,
	html.style_nature body .newFooterThird .aboutFooter a::before,
	html.style_nature body #kirupabot-widget .kbw-message:not(.kbw-user) .kbw-avatar::before,
	html.style_nature body #rightContents #forumListing a::before,
	html.style_nature body #newsletter_callout::before {
		background: var(--natFill);
		-webkit-mask: var(--natSprite) 0 var(--natY) / var(--natMaskSize) no-repeat;
		mask: var(--natSprite) 0 var(--natY) / var(--natMaskSize) no-repeat;
	}
	html.style_nature body #mainHeader .headerLink::after,
	html.style_nature body #mainHeader .miniheadericons::after,
	html.style_nature body .newFooterThird .aboutFooter a::after,
	html.style_nature body #kirupabot-widget .kbw-message:not(.kbw-user) .kbw-avatar::after,
	html.style_nature body #rightContents #forumListing a::after,
	html.style_nature body #newsletter_callout::after {
		background: var(--natInkBg);
		-webkit-mask: var(--natSprite) 100% var(--natY) / var(--natMaskSize) no-repeat;
		mask: var(--natSprite) 100% var(--natY) / var(--natMaskSize) no-repeat;
	}

	/* Book callouts: a 70px icon takes the pixel GIF's spot and the GIF
	   hides. Firefox 113 to 120 has color-mix() but not :has(), and one
	   unknown selector drops a whole rule, so these never share a rule with
	   other selectors. Without :has() the GIF simply stays. */
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb) {
		filter: drop-shadow(0 3px 3px color-mix(in oklab, var(--natInk) 35%, transparent));
	}
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb) > img.lightbulb {
		visibility: hidden;
	}
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb)::before,
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb)::after {
		content: "";
		position: absolute;
		top: -50px;
		left: calc(100% - 50px);
		width: 1em;
		height: 1em;
		font-size: 70px;
		pointer-events: none;
	}
	/* The JavaScript and Canvas includes put their GIF 9px further right. */
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb[src$="/coffee.gif"])::before,
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb[src$="/coffee.gif"])::after,
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb[src$="/monitor5.gif"])::before,
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb[src$="/monitor5.gif"])::after {
		left: calc(100% - 41px);
	}
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb)::before {
		background: var(--natFill);
		-webkit-mask: var(--natSprite) 0 var(--natY) / var(--natMaskSize) no-repeat;
		mask: var(--natSprite) 0 var(--natY) / var(--natMaskSize) no-repeat;
	}
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb)::after {
		background: var(--natInkBg);
		-webkit-mask: var(--natSprite) 100% var(--natY) / var(--natMaskSize) no-repeat;
		mask: var(--natSprite) 100% var(--natY) / var(--natMaskSize) no-repeat;
	}

	/* Social links: each brand gets its own accent (--natAcc). */
	html.style_nature body .newFooterFirst .footerSocials li a {
		background-color: color-mix(in oklab, var(--natAcc) 16%, var(--pageBackground));
		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--natAcc) 40%, transparent);
	}
	html.style_nature body .newFooterFirst .footerSocials li a::before {
		width: 22px;
		height: 22px;
		background-color: color-mix(in oklab, var(--natAcc) 72%, var(--natTone));
		-webkit-mask: var(--natSprite) var(--natGx) var(--natY) / var(--natMaskSize) no-repeat;
		mask: var(--natSprite) var(--natGx) var(--natY) / var(--natMaskSize) no-repeat;
	}
	html.style_nature body .newFooterFirst .footerSocials li a:hover {
		background-color: var(--natAcc);
	}
	html.style_nature body .newFooterFirst .footerSocials li a:hover::before {
		background-color: var(--natOn);
	}

	/* Theme customizer: a green leaf, and a sun-colored sun, moon, and half-sun. */
	html.style_nature body #themePanel .themeTitleLeaf {
		color: var(--natInk);
		fill: var(--natLeaf);
	}
	html.style_nature body #themePanel .themeSegment .themeIconSmooth {
		fill: var(--natSun);
	}

	/* nature-icons:start. Generated by .github/tools/nature-icons.js, do not edit by hand. */
	html.style_nature body {
		--natSprite: url("/ssi/newDesign/nature/icons.svg?v=cc91f660");
		--natMaskSize: 200% 2000%;
	}
	html.style_nature body #mainHeader #tutorialsHeader {
		--natY: 0%;
		--natFill: linear-gradient(var(--natLeafHi) 0 0) 0 0/.5em .508em no-repeat,linear-gradient(var(--natLeaf) 0 0) .5em 0/.5em .508em no-repeat,linear-gradient(var(--natMainHi) 0 0) 0 .508em/1em .179em no-repeat,linear-gradient(var(--natMain) 0 0);
		--natInkBg: linear-gradient(var(--natPaper) 0 0) .383em .721em/.075em .121em no-repeat,linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #mainHeader #bookHeader {
		--natY: 5.263%;
		--natFill: linear-gradient(var(--natBloom) 0 0) .608em .76em/.083em .175em no-repeat,linear-gradient(-168.179deg,var(--natPaper) .775em,#0000 0) .142em 0/.358em 1em no-repeat,linear-gradient(168.179deg,var(--natPaper) .775em,#0000 0) .5em 0/.358em 1em no-repeat,linear-gradient(var(--natMain) 0 0);
		--natInkBg: linear-gradient(var(--natLine) 0 0) .192em .304em/.258em .367em no-repeat,linear-gradient(var(--natLine) 0 0) .55em .304em/.258em .367em no-repeat,linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #mainHeader #videosHeader {
		--natY: 10.526%;
		--natFill: linear-gradient(var(--natMain) 0 0);
		--natInkBg: radial-gradient(circle at .5em .542em,var(--natSun) .192em,#0000 0),radial-gradient(circle at .258em .4em,var(--natPaper) .108em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #mainHeader #codingHeader {
		--natY: 15.789%;
		--natFill: linear-gradient(var(--natMain) 0 0) 0 .342em/.517em .658em no-repeat,linear-gradient(var(--natMain) 0 0) 0 .492em/.667em .508em no-repeat,radial-gradient(circle at .517em .492em,var(--natMain) .15em,#0000 0),linear-gradient(var(--natSun) 0 0);
		--natInkBg: linear-gradient(var(--natPaper) 0 0) .192em .5em/.383em .133em no-repeat,linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #soundToggle {
		--natY: 21.053%;
		--natFill: linear-gradient(var(--natMainHi) 0 0) 0 0/.283em 1em no-repeat,linear-gradient(var(--natMain) 0 0);
		--natInkBg: linear-gradient(var(--natMain) 0 0) .604em 0/.396em 1em no-repeat,linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #soundToggle[aria-pressed="false"] {
		--natY: 26.316%;
		--natFill: linear-gradient(var(--natMainHi) 0 0) 0 0/.283em 1em no-repeat,linear-gradient(var(--natMain) 0 0);
		--natInkBg: linear-gradient(var(--natBloom) 0 0) .604em 0/.396em 1em no-repeat,linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #personalizeLink {
		--natY: 31.579%;
		--natFill: linear-gradient(var(--natSoft) 0 0);
		--natInkBg: radial-gradient(circle at .303em .472em,var(--natMain) .096em,#0000 0),radial-gradient(circle at .404em .289em,var(--natLeaf) .096em,#0000 0),radial-gradient(circle at .61em .285em,var(--natSun) .096em,#0000 0),radial-gradient(circle at .312em .665em,var(--natBloom) .096em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #searchSite {
		--natY: 36.842%;
		--natFill: radial-gradient(circle at .433em .433em,var(--natSoft) .275em,#0000 0),linear-gradient(var(--natMain) 0 0);
		--natInkBg: radial-gradient(circle at .358em .358em,var(--natPaper) .121em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body .aboutFooter a[href*="/about/site"] {
		--natY: 42.105%;
		--natFill: linear-gradient(var(--natBloom) 0 0);
		--natInkBg: radial-gradient(circle at .333em .342em,var(--natPaper) .092em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body .aboutFooter a[href*="whos-online"] {
		--natY: 47.368%;
		--natFill: linear-gradient(var(--natMain) 0 0);
		--natInkBg: radial-gradient(circle at .5em .5em,var(--natLeafHi) .308em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body .aboutFooter a[href*="forum.kirupa"],
	html.style_nature body #kirupabot-widget .kbw-avatar {
		--natY: 52.632%;
		--natFill: linear-gradient(var(--natSun) 0 0);
		--natInkBg: radial-gradient(circle at .275em .583em,var(--natBloom) .058em,#0000 0),radial-gradient(circle at .725em .583em,var(--natBloom) .058em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb) {
		--natY: 57.895%;
		--natFill: radial-gradient(circle at .371em .267em,var(--natPaper) .063em,#0000 0),linear-gradient(var(--natSun) 0 0) 0 0/1em .7em no-repeat,linear-gradient(var(--natMain) 0 0);
		--natInkBg: radial-gradient(circle at .5em .392em,var(--natLeaf) .212em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb[src$="/coffee.gif"]) {
		--natY: 63.158%;
		--natFill: radial-gradient(.283em .083em at .433em .383em,var(--natBark) 100%,#0000 0),linear-gradient(var(--natMain) 0 0);
		--natInkBg: linear-gradient(var(--natLine) 0 0) .208em 0/.417em .267em no-repeat,radial-gradient(.117em .042em at .433em .388em,var(--natSoft) 100%,#0000 0),radial-gradient(circle at .446em .65em,var(--natLeafHi) .121em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #kbook_callout .lightbulb_callout:has(> img.lightbulb[src$="/monitor5.gif"]) {
		--natY: 68.421%;
		--natFill: linear-gradient(var(--natMain) 0 0) 0 0/1em .233em no-repeat,linear-gradient(var(--natMain) 0 0) 0 .617em/1em .383em no-repeat,linear-gradient(var(--natMain) 0 0) 0 0/.183em 1em no-repeat,linear-gradient(var(--natMain) 0 0) .817em 0/.183em 1em no-repeat,radial-gradient(circle at .683em .342em,var(--natSun) .075em,#0000 0),radial-gradient(circle at .292em .858em,var(--natLeaf) .375em,#0000 0),radial-gradient(circle at .667em .817em,var(--natLeafHi) .383em,#0000 0),linear-gradient(var(--natSoft) 0 0);
		--natInkBg: linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #rightContents #forumListing a {
		--natY: 73.684%;
		--natFill: linear-gradient(var(--natSoft) 0 0) .608em .117em/.208em .208em no-repeat,linear-gradient(var(--natPaper) 0 0);
		--natInkBg: linear-gradient(var(--natMain) 0 0) .292em .433em/.417em .35em no-repeat,linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body #newsletter_callout {
		--natY: 78.947%;
		--natFill: linear-gradient(-143.344deg,var(--natSoft) .271em,#0000 0) .108em .225em/.408em .333em no-repeat,linear-gradient(143.344deg,var(--natSoft) .271em,#0000 0) .483em .225em/.408em .333em no-repeat,linear-gradient(var(--natPaper) 0 0);
		--natInkBg: radial-gradient(circle at .5em .546em,var(--natBloom) .15em,#0000 0),linear-gradient(var(--natInk) 0 0);
	}
	html.style_nature body .footerSocials a[href*="youtube"] {
		--natGx: 0%;
		--natY: 84.211%;
		--natAcc: var(--natBloom);
		--natOn: var(--natPaper);
	}
	html.style_nature body .footerSocials a[href*="twitter"] {
		--natGx: 100%;
		--natY: 84.211%;
		--natAcc: var(--natMain);
		--natOn: var(--natOnMain);
	}
	html.style_nature body .footerSocials a[href*="tiktok"] {
		--natGx: 0%;
		--natY: 89.474%;
		--natAcc: var(--natLeaf);
		--natOn: var(--natInk);
	}
	html.style_nature body .footerSocials a[href*="facebook"] {
		--natGx: 100%;
		--natY: 89.474%;
		--natAcc: var(--natMain);
		--natOn: var(--natOnMain);
	}
	html.style_nature body .footerSocials a[href*="instagram"] {
		--natGx: 0%;
		--natY: 94.737%;
		--natAcc: var(--natSun);
		--natOn: var(--natInk);
	}
	html.style_nature body .footerSocials a[href*="linkedin"] {
		--natGx: 100%;
		--natY: 94.737%;
		--natAcc: var(--natMain);
		--natOn: var(--natOnMain);
	}
	html.style_nature body .footerSocials a[href*="github"] {
		--natGx: 0%;
		--natY: 100%;
		--natAcc: var(--natGh);
		--natOn: var(--natOnGh);
	}
	html.style_nature body .footerSocials a[href*="spotify"] {
		--natGx: 100%;
		--natY: 100%;
		--natAcc: var(--natLeaf);
		--natOn: var(--natInk);
	}
	/* nature-icons:end */
}

@media (max-width: 1200px) {
	:where(html.style_nature) body h1 {
		font-size: 2.4em;
	}
	:where(html.style_nature) body h2 {
		font-size: 26px;
	}
	:where(html.style_nature) body h3 {
		font-size: 22px;
	}
	:where(html.style_nature) body h4 {
		font-size: 19px;
	}
	html.style_nature .authorText h1 {
		font-size: 2.9em;
	}
	html.style_nature .authorText h1.compact {
		font-size: 2.6em;
	}
}
@media (max-width: 600px) {
	html.style_nature #themeWrapper #themePanel {
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -10px 40px rgba(10, 20, 30, .3);
	}
	html.style_nature #themePanel .themeSegments {
		border-radius: 20px;
	}
	html.style_nature #themePanel .themeSegment {
		border-radius: 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	html.style_nature .greenButton:hover,
	html.style_nature .kirupaButton:hover,
	html.style_nature #mainHeader .miniheadericons:hover,
	html.style_nature .newFooterFirst .footerSocials li a:hover {
		transform: none;
	}
}