/*
Toggle
*/

.mode-toggle {
	display: flex;
	align-items: center;
	gap: 2px;	/* gap between slider and labels */
	font-family: 'Akhil HE', 'Noto Sans', 'Arial Unicode MS', Arial, sans-serif;
	margin-bottom: 0; /* it was 8px */
	user-select: none;
}

.mode-toggle .label {
	font-size: 1.1rem;
	color: #444;
}

.switch {
	position: relative;
	width: 38px;
	height: 22px; /* it was 21px; */
	display: inline-block;
}

.switch input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: #ccc;
	transition: 0.3s;
	border-radius: 21px;
	box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}

.slider:before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 1.5px;
	top: 1.5px;
	background: white;
	border-radius: 50%;
	transition: 0.3s;
	box-shadow: 0 1.5px 2px rgba(0,0,0,0.25);
}

input:checked + .slider {
	background: #4CAF50;
}

input:checked + .slider:before {
	transform: translateX(17px);
}


/* markers for divs which will become visible after clicking on corresponding links */

#more0 {display: none;}
#more0:target {display: block; border: 1px solid #ccc; padding: 10px;}
#more1 {display: none;}
#more1:target {display: block; border: 1px solid #ccc; padding: 10px;}
#more2 {display: none;}
#more2:target {display: block; border: 1px solid #ccc; padding: 10px;}
#more3 {display: none;}
#more3:target {display: block; border: 1px solid #ccc; padding: 10px;}
#more4 {display: none;}
#more4:target {display: block; border: 1px solid #ccc; padding: 10px;}
#more5 {display: none;}
#more5:target {display: block; border: 1px solid #ccc; padding: 10px;}
#more6 {display: none;}
#more6:target {display: block; border: 1px solid #ccc; padding: 10px;}


/* Brand names: the class to be used to mark 'Akhil HE', 'SuNagari', etc.
   We may use title while marking brand names using "brand-name"
   The title will explain that the word is a 'brand name' and not a 'word'
   e.g.: <span class="brand-name" title="अखिल हिंदी इंग्लिश फ़ॉन्ट">Akhil HE</span>
*/

.brand-name {
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.02em;
}

/* Abbreviations (formal Hindi style, with dots) */

.alt-spelling {
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.02em;
}

/* Optional: hover info to remind the rule */

.alt-spelling[title],
.brand-name[title] {
  border-bottom: 1px dotted #aaa;
  cursor: help;
}

/* Remove default underline */

abbr[title] {
  text-decoration: none; /* remove default */
  border-bottom: 1px dotted #aaa;
  cursor: help;
}

/*	Miscellaneous */

.cool-heading {
	background: linear-gradient(120deg, #dd7777, #ff7f32 40%, #e2721d);
	color: white;
/*	padding: 0.5rem; */
}

.faded-sky-blue {
	background: linear-gradient(120deg, #8a9cab, #acbdc9 40%, #7a8c9a);
	color: white;
/*	padding: 0.5rem; */
}

.light-steel-mist {
	background: linear-gradient(120deg, #6b7d8f, #8ea0af 40%, #5a6b7a);
	color: white;
/*	padding: 0.5rem; */
}

.warm-to-cool {
	background: linear-gradient(120deg, #f1e7e4, #e3d8d3 40%, #c9b8b0);
	color: black;
}

/* no-margin-no-padding */

.no-margin-no-padding {
	margin: 0;
	padding: 0;
}

/* Stylish HR */

hr {
	border: none;
	height: 2px;
	background: linear-gradient(to right, #aa6b6b, #5f27cd, #56ab2f);
	margin: 20px 0;
}

hr.sleek {
	border: none;
	height: 2px;
	background: linear-gradient(to right, #f1e7e4, #d5cac5, #b5a59d);
	margin: 4px 0;
}