/*
	chitra.css				version 1

	Styles for images

	I M A G E s	  A S   B L O C K s 

	Organized for readability and easy maintenance

	Main difference with earlier version is 
	that now an img is treated as a "block"				*/

/* 1. Default image reset */

img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0; /* let container handle alignment unless we override below */
}


/* an image inside #menu will get its padding-left and padding-right from */
#menu img {
	margin: 0;
	padding: 0 0 0 0.75rem;
}

/* Match paragraph alignment in #menu and .content 
#menu img,
.content img {
	padding-left: inherit;
	padding-right: inherit;
}*/

img.inline {
	display: inline;			 
	vertical-align: middle;		/* align image with text middle */
}

/* deprecated and to be removed in mid 2026; avoid using it */

img.inline-with-text {
	display: inline;				/* keep it inline with text */
	position: relative;
	top: 0.11em;					/* adjust up/down */
}

/* I need to experiment with following before using them
img.inline-block {
	display: inline-block;
}
*/

/* Make images with the 'right' class display as block-level elements,
	removing float so they no longer wrap text.
	Right-aligns image within its parent container,
	preserving full block display and preventing inline behavior. */

img.right {
	display: block;
	float: none;
	margin-left: auto;
	margin-right: 0; /* still right-aligns image */
}

img.centered {
	margin: 0 auto;
}

/*	2. Floating behavior * /

img.right {
	float: right;		/* Right-aligned image * /
}

img:not(.right) {
	clear: both;		/* Force left/non-floated images below previous float * /
}

*/

/*	3. Common utility sizes */

img.max-width-200px { max-width: 200px; }

img.width-30pc	{ width: 30%; }
img.width-40pc	{ width: 40%; }
img.width-50pc	{ width: 50%; }
img.width-60pc	{ width: 60%; }
img.width-70pc	{ width: 70%; }
img.width-80pc	{ width: 80%; }
img.width-90pc	{ width: 90%; }
img.width-100pc { width: 100%; }
img.100pratishat { width: 100%; } /* Alternate naming */

/* 4. Width with max constraints
	(384px, 512px, 770px, 256px)	*/

/* Max 770px */

img.width-30pc-max-770px { width: 30%; max-width: 770px; }
img.width-40pc-max-770px { width: 40%; max-width: 770px; }
img.width-50pc-max-770px { width: 50%; max-width: 770px; }
img.width-60pc-max-770px { width: 60%; max-width: 770px; }
img.width-70pc-max-770px { width: 70%; max-width: 770px; }
img.width-80pc-max-770px { width: 80%; max-width: 770px; }
img.width-90pc-max-770px { width: 90%; max-width: 770px; }
img.width-100pc-max-770px { width: 100%; max-width: 770px; }

/* Max 512px */

img.width-30pc-max-512px { width: 30%; max-width: 512px; }
img.width-40pc-max-512px { width: 40%; max-width: 512px; }
img.width-50pc-max-512px { width: 50%; max-width: 512px; }
img.width-60pc-max-512px { width: 60%; max-width: 512px; }
img.width-70pc-max-512px { width: 70%; max-width: 512px; }
img.width-80pc-max-512px { width: 80%; max-width: 512px; }
img.width-90pc-max-512px { width: 90%; max-width: 512px; }
img.width-100pc-max-512px { width: 100%; max-width: 512px; }

/* Max 384px */

img.width-30pc-max-384px { width: 30%; max-width: 384px; }
img.width-40pc-max-384px { width: 40%; max-width: 384px; }
img.width-50pc-max-384px { width: 50%; max-width: 384px; }
img.width-60pc-max-384px { width: 60%; max-width: 384px; }
img.width-70pc-max-384px { width: 70%; max-width: 384px; }
img.width-80pc-max-384px { width: 80%; max-width: 384px; }
img.width-90pc-max-384px { width: 90%; max-width: 384px; }
img.width-100pc-max-384px { width: 100%; max-width: 384px; }

/* Max 256px */

img.width-30pc-max-256px { width: 30%; max-width: 256px; }
img.width-40pc-max-256px { width: 40%; max-width: 256px; }
img.width-50pc-max-256px { width: 50%; max-width: 256px; }
img.width-60pc-max-256px { width: 60%; max-width: 256px; }
img.width-70pc-max-256px { width: 70%; max-width: 256px; }
img.width-80pc-max-256px { width: 80%; max-width: 256px; }
img.width-90pc-max-256px { width: 90%; max-width: 256px; }
img.width-100pc-max-256px { width: 100%; max-width: 256px; }

/* Max 192px */

img.width-30pc-max-192px { width: 30%; max-width: 192px; }
img.width-40pc-max-192px { width: 40%; max-width: 192px; }
img.width-50pc-max-192px { width: 50%; max-width: 192px; }
img.width-60pc-max-192px { width: 60%; max-width: 192px; }
img.width-70pc-max-192px { width: 70%; max-width: 192px; }
img.width-80pc-max-192px { width: 80%; max-width: 192px; }
img.width-90pc-max-192px { width: 90%; max-width: 192px; }
img.width-100pc-max-192px { width: 100%; max-width: 192px; }

/*	5. Almost full-width */

img.width-100pc-minus-2px	{ width: calc(100% - 2px);	height: calc(100% - 2px); }
img.width-100pc-minus-6px	{ width: calc(100% - 6px);	height: calc(100% - 6px); }
img.width-100pc-minus-20px	{ width: calc(100% - 20px);	height: calc(100% - 20px); }

/*	6. Margins utilities */

img.2px-left-margin	{ margin-left: 2px; }
img.20px-right-margin { margin-right: 20px; }

/*	7. Miscellaneous - to be deleted as Anya already has these and more*/

.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; */
}

/* Stylish HR */

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