/*Color description:
		Purple main accent color: #9059c-f
		Green secondary  accent color: #dbf88-2
		White body text, selected text, link and link underline text, button text, feedback form input: #ff-f or #fffff-f
		Dark backgrounds: #1f213-0
		Gray backgrounds: #41476-8
		*/
  		body { color: #fff; background-color: #1f2130; font-family: "Arial", "Helvetica", sans-serif; width: 100%; margin: 8px 0; }
  		.code { font-family: 'Courier', 'Courier New', monospace; background: #dbf88244; }
		::selection { color: #ffffff; background: #9059cfaa; }
  		h1 { text-transform: uppercase; font-size: 20pt; margin-bottom: 10pt; }
  		h1 a { color: inherit; }
  		h2 { font-size: 16pt; font-weight: normal; margin-top: 0; }
  		sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
		sub { top: 0.4em; }
  		a, .linkLike, #copyright a { text-decoration: none; border-bottom: 1px dashed #fff; color: #fff; cursor: pointer; }
  		a:hover, .linkLike:hover, a:focus, .linkLike:focus, #copyright a:hover, #copyright a:focus { text-decoration: none; border-bottom: 1px solid #fff; }
  		.section, .addSectionButton { background-color: #414768; margin: 0.3em 0; padding: 0.7em 1%; font-size: 12pt; border-radius: 10px; width: 98%; float: left; color: #fff; }
  		.addSectionButton { background-color: #414768; border: 2px; border-style: solid; cursor: pointer; border-color: #fff; color: #fff; box-sizing: border-box; width: 100%; padding: 0; font-size: 16pt; height: 3em; text-align: center; line-height: 3em; }
  		.addSectionButton:hover, .addSectionButton:focus-visible { border-color: #9059cf; color: #9059cf; }
		.hypothesisHeader { width: 100%; font-size: 18pt; font-weight: bold; border: 0; padding: 0; margin: 0; float: left; min-height: 2em; line-height: 2em; background-color: inherit; }
		.hypothesisHeader:hover, .hypothesisHeader:focus { background-color: #789; }
		.sectionHeader, .sectionName input, input[type='number'], #customInputsNotice, .hypothesisHeader { color: #dbf882; }
		.sectionHeader::selection, .sectionName input::selection, input[type='number']::selection, #customInputsNotice::selection, .hypothesisHeader::selection { background: #dbf88288; }
  		.sectionHeader { width: 100%; height: 2em; font-size: 11pt; margin-bottom: 0.5em; }
  		.sectionName, .sectionName input { width: 62%; margin-left: 3%; font-weight: bold; min-height: 2em; line-height: 2em; float: left; text-transform: capitalize; }
  		.sectionName input { width: 90%; height: 100%; margin: 0; border: 0; padding: 0; font-size: inherit; background-color: inherit; }
  		.sectionName input:focus, .sectionName input:hover { background-color: #777; }
  		.sectionHeader button { width: 30%; float: right; margin-right: 5%; font-size: 10.5pt; height: 100%; background-color: #9059cf; color: #fff; cursor: pointer; }
  		.moreDetails { width: 90%; margin: 10pt 5%; float: left; font-size: 10.5pt; line-height: 1.5em; display: none; color: #fff; }
		#intro .moreDetails { background-color: #414768; margin: 0; padding: 10pt 5%; }
  		.sectionLabels { width: 100%; min-height: 2em; font-size: 11pt; line-height: 2em; float: left; text-transform: capitalize; }
  		.givenHypothesis, .givenNotHypothesis { float: left; width: 44%; margin: 0 3%; text-align: center; color: #fff; }
  		.sectionInput { width: 100%; font-size: 11pt; height: 2em; float: left; }
  		input[type='number'] { width: 40%; margin: 0 3%; padding: 0 2%; outline: 0; border: 0; font-size: 14pt; float: left; height: 100%; background-color: #1f2130; }
  		#displayPercent { font-weight: bold; }
  		#intro { width: 90%; margin-left: 5%; float: left; }
  		#introButton { width: 100%; float: left; font-size: 14pt; background-color: #9059cf; cursor: pointer; color: #fff; }
  		#calculatorContainer { float: left; width: 60%; margin-left: 5%; margin-bottom: 1.5em; margin-top: 1em; min-height: 400px; /*transition-duration: 0.5s;*/ }
  		.calculatorContainerWhenSticky { /*min-height: 700px;*/ }
  		#results { float: left; width: calc(26% - 1.2em); margin-left: 1.2em; margin-top: 2em; background-color: #414768; padding: 10px 2% 10px 2%; overflow-wrap: break-word; color: #fff; font-size: 11pt;  overflow-y: auto; max-height: 100vh; border-radius: 10px; /*transition-duration: 0.5s;*/ }
  		.resultsError { background-color: #914768 !important; font-weight: bold; }
  		.resultsError p { font-size: 14pt !important; }
  		.errorPS { font-size: 11pt !important; }
  		h3 { font-size: 15pt; }
  		#sticky-anchor { float: left; margin-top: 23px; }
  		.sticky { position: fixed; top: 0 !important; margin-top: 8px !important; left: 65%; }
  		#shareResultsArea { float: left; width: 90%; margin-left: 5%; margin-top: 0.5em; box-sizing: border-box; text-align: center; font-size: 11pt; line-height: 2em; }
		#shareButtons { width: 100%; display: flex; gap: 1em; }
		#copyURLButton { display: none; }
		#shareButtons div { float: left; width: 100%; margin-left: 0%; margin-top: 0.5em; box-sizing: border-box; text-align: center; font-size: 11pt; height: 2em; line-height: 2em; border-radius: 10px; border: 1px solid #fff; background-color: #1f2130; }
		#shareResultsButton:hover, #copyURLButton:hover, #shareResultsButton:focus, #copyURLButton:focus { border-color: #9059cf; color: #9059cf; cursor: pointer; }
  		#shareResultsAddress { background-color: inherit; margin-top: 0.5em; margin-bottom: 0.5em; height: 2em; border: none; border-radius: 0px; padding: 0; }
  		#shareResultsAddress input { width: 100%; font-size: 12pt; padding: 0 0.5em; box-sizing: border-box; height: 2em; background-color: #414768; color: #fff; }
  		#informationOverlays div { float: none; background-color: #1f2130; border-radius: 10px; outline: 1px solid #dbf882; width: auto; display: none; padding: 1em; width: 40%; box-sizing: border-box; margin-left: 30%; }
  		#informationOverlays { color: #dbf882; position: absolute; left: 0; right: 0; margin-top: -50px; font-size: 13pt; font-weight: bold; }
  		#exampleLinks { font-size: 10.5pt; width: 100%; margin: 1em 0 0.5em 0; }
  		#exampleLinks a { color: inherit; }
  		.copyright { display: block; width: 90%; margin-left: 5%; font-size: 10pt; float: left; margin-top: 20px; margin-bottom: 20px; }
  		.copyright a, .copyright .linkLike { margin-right: 1em; display: inline-block; }
  		#copyright a { margin-right: 0; }
  		.disclaimer { display: block; width: 90%; text-align: left; margin-left: 5%; font-size: 10pt; float: left; margin-bottom: 0px; }
  		.disclaimer span { display: inline-block; }
  		.copyright, .copyright a, .copyright .linkLike, .disclaimer, .disclaimer a, #privacyPolicy, #showPrivacyPolicy, #supportRequest, #showSupportRequest, #copyright, #showCopyright { color: #eee; line-height: 125%; }
  		#privacyPolicy, #copyright, #supportRequest { display: none; }
  		#showPrivacyPolicy, #showSupportRequest, #showCopyright { display: inline; }
  		#feedbackFormOverlay { position: fixed; width: 100%; top: 0; left: 0; height: 100vh; overflow-y: auto; background: rgba(0,0,0,0.7); display: none; flex-wrap: wrap; justify-content: center; }
  		#feedbackForm { position: absolute; min-width: 50%; width: 700px; padding: 40px 20px 20px 20px; min-height: 100px; top: -20px; box-shadow: 0 0 100px #000; background: #414768; border-radius: 0 0px 10px 10px; }
  		#closeFeedback { float: left; width: 30%; margin: 0; padding: 0; }
  		#closeFeedback span { text-align: right; float: right; line-height: 18pt; }
  		#feedbackForm h3 { float: left; width: 70%; margin: 0; padding: 0; line-height: 18pt; }
  		#contactForm { width: 100%; margin-top: 60px; min-height: 200px; }
  		#contactForm input, #contactForm label, #contactForm textarea { width: 100%; font-size: 11pt; font-family: "Arial", "Helvetica", sans-serif; float: left; box-sizing: border-box; padding: 2pt; margin-bottom: 1em; color: #fff; }
  		#contactForm input, #contactForm textarea { background-color: #1f2130; }
  		#contactForm label { margin-bottom: 2px; padding: 0; }
  		#contactForm textarea { min-height: 140px; }
  		label.inputError { font-weight: bold; }
  		input.inputError { background: #914768 !important; color: #ffffff !important; }
  		#contactForm #sendButton { cursor: pointer; text-align: center; height: 2em; line-height: 2em; border-radius: 10px; border: 1px solid #fff; padding: 0; }
  		#contactForm #sendButton:hover, #contactForm #sendButton:focus { border-color: #9059cf; color: #9059cf; }
		#contactSent { display: none; padding-top: 30px; min-height: 100px; }
		#customInputsNotice { display: none; font-style: italic; font-size: 10pt; padding: 0; margin: 0; }
		#charactersSubstitutedNotice { font-style: italic; font-size: 10pt; padding: 0; margin: 0; }
  		#resultSlider { width: 100%; height: 40px; border-radius: 20px; background-color: #1f2130; display:flex; align-items: center; }
  		#sliderThumb { width: 10px; height: 30px; background-color: #9059cf; border-radius: 10px; margin-left: calc(50% - 5px); transition-duration: 0.5s; }
  		#sliderText { font-weight: bold !important; font-size: 11pt !important; transition-duration: 0.5s; margin-top: -40px; line-height: 40px; float: left; margin-left: calc(5% + ((90% - 10px) * .5) + 20px); }
  		#rulerMarks { background-image: linear-gradient(to right, #9059cf 1px, transparent 1px); background-size: calc((100% - 10px) / 10) 4px; background-repeat: repeat-x; background-position: top left; width: calc(100% - 40px); height: 40px; margin: -40px 0 0 24.5px; }
  		main.page404, main.page404 p, main.page404 h1 { width: 94%; margin-left: 3%; text-align: center; }
  		main.page404 img { width: 72px; margin-top: 72px; }
  		#themeToggle { opacity: 0.5; width: 20px; height: 20px; overflow: hidden; cursor: pointer; display: inline-block; position: absolute; right: calc(5% - 10px); top: 20px; border: 10px solid #00000000; transition-duration: 0.5s; transform: scale(1.2); transform-origin: right center; margin-top: 3px; }
  		#themeToggle svg { margin-left: -20px; transition-duration: 0.5s; }
  		.toDark svg { margin-left: 0px !important; }
  		#themeToggle:hover { scale: 1.3; opacity: 1; width: 30px; }
  		#themeToggle:hover svg { margin-left: -10px !important; }
  		#themeToggle.toDark:hover svg { margin-left: 0px !important; }
		
  		/*Narrow windows*/
  		@media only screen and (max-width: 1050px) {
  			#calculatorContainer { width: 66%; margin-left: 2%; }
	  		#results { width: calc(28% - 0.6em); margin-left: 0.6em; padding: 5px 1% 5px 1%; }
	  		h3 { margin: 0.6em 0; }
			#exampleLinks { font-size: 10pt; }	  		
			.sticky { left: 68%; width: calc(28% - 0.6em); }
  			.givenHypothesis, .givenNotHypothesis { width: 48%; margin: 0 1%; }
			#intro { width: 96%; margin: 0 2%; }
			.copyright, .disclaimer { width: 96%; margin-left: 2%; margin-right: 2%; }
	  		#feedbackForm { width: 80%; min-width: 0; }
  			#shareResultsArea { width: 96%; margin-left: 2%; }
  			#themeToggle { right: 2%; border-right: 0px solid #00000000; }
  		  }
  		/*Mobile*/
  		@media only screen and (max-width: 780px) {
  			html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
  			body { width: calc(100% - 16px); margin-left: 8px; }
  			#calculatorContainer { width: 100%; margin: 0 0 0 0; min-height: 0 !important }
  			.sticky { width: 100%; margin: 2em 0 1em 0; padding: 0 1em; position: relative; bottom: auto; top: auto !important; left: auto; }
  			#results { width: 100%; margin: 1em 0 !important; padding: 0 1em !important; float: left; bottom: auto; font-size: 12pt; box-sizing: border-box; max-height: none; overflow-y: visible; }
			h1 { font-size: 16pt; }
			h2 { font-size: 14pt; }
			h3 { margin: 1em 0; }
			.sectionName, .sectionName input { width: 98%; margin-left: 1%; font-size: 12pt; }
			.sectionLabels { line-height: 120%; font-size: 10pt; margin-bottom: 2pt; }
			.sectionInput { height: 1.5em; }
			.sectionHeader button { width: 98%; margin-bottom: 10pt; margin-right: 1%; height: 2em; font-size: 12pt; }
			.addSectionButton { height: 30pt; line-height: 28pt; font-size: 12pt; }
			.hypothesisHeader { font-size: 14pt; }
			#introButton { font-size: 13pt; height: 26pt; }
			.copyright { width: 100%; margin: 1.5em 0 2em 0; }
			.disclaimer, #privacyPolicy, #supportRequest, #copyright { width: 100%; padding-top: 0.5em; margin: 0; }
			.copyright, .disclaimer { font-size: 11pt; }
			#footerLinksContainer { width: 100%; display: block; margin-bottom: 1em; }
			#shareResultsArea { width: 100%; margin-left: 0; }
			#intro { width: 100%; margin: 0; }
			.moreDetails { font-size: 12pt; margin-top: 2pt; margin-bottom: 2pt; }
			#intro .moreDetails { margin-top: 0pt; }
			#exampleLinks { font-size: 11pt; }
	  		#feedbackForm { width: 96%; padding: 20px 2% 5px 2%; top: 0; left: 0; }
	  		#contactForm { margin-top: 50px; }
	  		#contactForm input, #contactForm textarea { font-size: 13pt; }
  			#contactForm textarea { min-height: 130px; }
  			#informationOverlays div { font-size: 11pt; width: 70%; margin-left: 15%; }
  			#themeToggle { right: 8px; margin-top: 1px; top: 16px; transform: scale(1); }
  			#themeToggle:hover { scale: 1; }
  		}
  		/* Styles for touchscreens when not hovered */
		@media (pointer: coarse) {
			#themeToggle, #themeToggle:hover, #themeToggle:focus { opacity: 0.67; scale: 1; width: 20px; }
  			#themeToggle:focus svg, #themeToggle:hover svg { margin-left: -20px !important; }
  			#themeToggle.toDark:focus svg, #themeToggle.toDark:hover svg { margin-left: 0px !important; }
		}