@charset "utf-8";

/* 09 Sep 2025*/

.center {
	text-align: center;
	margin-inline: auto;
}

.btn {
	font-size: 1.2em;
	padding: 0.3em 0.7em;
	background: light-dark(#ccdbff, #2b2b2b);
	color: light-dark(black, #ffffda);
}
	
.check {
	padding: 0.3em 0.7em;
	border: 1px solid red;
	color: #1d2565;
	background: #effaeb;
	text-align:center;
	font-size: 115%;
}

.spaced {padding: 1em;}

a {color: light-dark(blue, yellow);}

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

/* light mode colors etc */
:root {
	--primary-color: light-dark(#14172b, #f6f4ec);
	--secondary-color: light-dark(#f6f4ec, #14172b);
	--text-color: light-dark(#2e2590, #e1e6db);
	--bg-color: light-dark(#dbe9c2, #7a1522);
	}

body {
	color: light-dark(#1F2022, #f7f7f7);
	background: light-dark(#F1EDE5, #3b3b3f);
}

h1 {
	color: light-dark(#1d2565, #fffcc3);
	background: light-dark(#fff7c9, #825757);
}

.text {
	color: var(--primary-color);
	background: var(--secondary-color);
	padding-left: 1em;
}

.check {
	color: light-dark(#1d2565, #fff666);
	background: light-dark(#effaeb, #464646);
}
	
.myBorder, .myShadow {
	width: 20em;
	height: auto;
	border-radius: 0.5em;
	margin: 2em;
	padding: 0.5em;
	display: inline-block;
	text-align: left;
}

.myBorder {
	color: light-dark(#7a1d3e, #dfb2b2);
	background: light-dark(#c5e7e7, #352f77);
}

.myShadow {
		color: var(--text-color);
		background: var(--bg-color);
}

@media (prefers-color-scheme : light) {
	.myShadow {
		box-shadow: 13px 10px 13px 7px rgba(0,0,0,0.7);
	}
}

/* For giving message re resetting to system mode */
#Show, #ResetTheme{display:none;}
#Show:checked~#ResetTheme{display:block;}
#myButtons{display:flex;justify-content:center;}
#ShowReset{font-size:300%;}
#DarkMsg {
	display: none;
	position: relative;
	top: -12em;
	left: 50%;
	transform: translate(-50%, 0);
	width: 12em;
	border: 4px solid red;
	background: yellow;
	padding: 0.2em 0.5em;
	color: black;
}