@charset "utf-8";

/* Basic Styling */
.hasJS .noscript {
	display: none;
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.btn {
	font-size: 1.2em;
	padding: 0.3em 0.7em;
}

.check {
	font-size: 1.35em;
	padding: 0.3em 0.7em;
	border: 1px solid red;
	color: #1d2565;
	background: #effaeb;
	text-align:center;
}


.spaced {
	padding: 1em;
}

a {
	color: blue;
}

/* for reset button */
.grayed{
	opacity:0.5;
	background:hsl(0, 0%, 50%) !important;
}

/* To demonstrate light mode */
body {
	--primary-color: #14172b;
	--secondary-color: #f6f4ec;
}

body {
	color: #1F2022;
	background: #F1EDE5;
}

h1 {
	color: #1d2565;
	background: #fff7c9;
}

.text {
	color: var(--primary-color);
	background: var(--secondary-color);
}

.btn {
	background: #ccdbff;
}

/* For giving message re resetting to system mode */
#Show,#ResetTheme{display:none;}
#Show:checked~#ResetTheme{display:block;}
#myButtons{display:flex;}
#ShowReset{font-size:300%;}
#DarkMsg{display: none; position: relative; bottom: 13em; left:7em; width: 10em; border: 4px solid red; background: yellow; padding:0.2em 0.5em; color:black;}

/* To demonstrate user dark mode */
#Dark body {
	--primary-color: #f6f4ec;
	--secondary-color: #14172b;
}

#Dark body {
	color: #f7f7f7;
	background: #3b3b3f;
}

#Dark h1 {
	color: #fffcc3;
	background: #825757;
}

#Dark .check {
	color: #fff;
	background: #464646;
}

#Dark .btn {
	background: #2b2b2b;
	color: #ffffda;
}

#Dark a {
	color: yellow;
}

/* To demonstrate system dark mode */
/* Same as previous group but all within medis query and all #Dark replaced by #Pdark */
@media (prefers-color-scheme: dark) {
	#Pdark body {
		--primary-color: #f6f4ec;
		--secondary-color: #14172b;
	}

	#Pdark body {
		color: #f7f7f7;
		background: #3b3b3f;
	}
	
	#Pdark h1 {
		color: #fffcc3;
		background: #825757;
	}

	#Pdark .check {
		color: #fff;
		background: #464646;
	}

	#Pdark .btn {
		background: #2b2b2b;
		color: #ffffda;
	}

	#Pdark a {
		color: yellow;
	}

}