:root {
	--body-font: Monda, Tahoma, sans-serif;
	--mono-font: 'Fira Code', 'Courier New', monospace;
	--a-color: #aa1166;
	--a-hover-color: #6611aa;
	
	--content-bg-color: #eeeeee;
	--content-bg-color-odd: #ddffff;
	--content-bg-color-even: #ffeeff;
	
	--code-line-even-bg: #00000001;
	--code-line-odd-bg: #0000000b;
}

body {
	font-family: var(--body-font);
	font-size: 16px;
	padding: 0;
	padding-bottom: 2rem;
	margin: 0;
	background-color: #112233;
}


/* ==== HEADER ==== */

header.header-top {
	/* box-sizing: border-box; */
	color: #597;
	/* background-color: #ffffff06; */
	padding: 1px 0 0 0;
	text-align: center;
	font-family: var(--body-font);
	height: 108px;
	border-bottom: 1px solid #ffffff22;
	
	background: repeating-radial-gradient(circle, rgba(0,100,200, 0.05), rgba(0,100,200, 0.05) 64px, rgba(0,50,100, 0.05) 64px, rgba(0,50,100, 0.05) 128px );
	
	h1 {
		font-family: 'Fira Code', sans-serif;
		font-size: 2rem;
		line-height: 1.5rem;
		position: relative;
		width: fit-content;
		z-index: 100;
		margin: 1.5rem auto 1rem auto;
	}
	
	img.header-logo {
		position: absolute;
		z-index: 10;
		left: 9px;
		top: 9px;
		height: 90px;
		border-radius: 100%;
		border: 3px solid #ffffff22;
		opacity: .5;
	}
	img.header-logo:hover {
		opacity: 1;	
	}
	div.header-links {
		position: relative;
		z-index: 100;
		display: flex;
		gap: 12px;
		justify-content: center;
		width: 95%;
		margin: auto;
		margin-bottom: 0rem;
		line-height: 1.5rem;
	}
	div.header-links a {
		/* flex: 1 1 auto; */
		text-decoration: none;
		padding: 0 .4rem;
		background-color: #11223388;
		border: 1px solid #ffffff22;
		border-radius: .25rem;
		font-size: .75rem;
		color: var(--a-color);
		font-weight: bold;
		display: inline-block;
		white-space: nowrap;
	}
	div.header-links a:hover {
		background-color: #ffffff77;
		color: var(--a-hover-color);
	}
}



main#wrap-main {
	/* padding: 0; */
	/* padding: 3em 2em; */
	background: repeating-radial-gradient(circle, rgba(0,100,200, 0.1), rgba(0,100,200, 0.1) 64px, rgba(0,50,100, 0.1) 64px, rgba(0,50,100, 0.1) 128px );
	min-height: 100vh;
	overflow: visible;
	padding: 12px;
	
	
	h1.h1-main {
		background-color: var(--content-bg-color);
		/* color: #112233; */
		border-radius: .25rem;
		margin: 1rem 1rem 1rem 1rem;
		
		font-size: 1rem;
		padding: .5rem;
		font-family: var(--body-font);
		margin: 0;
		/* background-color: #11223311; */
		border-bottom: 1px solid #11223388;
		text-align: center;
	}

	
}

div#drop {
	scroll-margin-top: 30px;
}


/* ==== COMMON ==== */

span.text-gray {
	color: #888;
}
span.text-smaller {
	font-size: 80%;
	vertical-align: top;
}

h1 span.series-icon, h2 span.series-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;		
	font-size: 1.25rem;
	padding: .5rem;
	margin: -1rem 0;
	width: 2.5rem;
	height: 2.5rem;
	background-color: #112233bb;
	border: 3px solid #ffffffbb;
	border-radius: 100px;
	margin-left: -8px;
    margin-right: 4px;
}

h1 .header-hili {
	background-color: #bbccddaa;
	display: inline-block;
	padding: .5rem 1rem .5rem 0;
	border-radius: .25rem;
	margin-left: .75rem;
}

/* ==== MENUS ==== */

nav.menu {
	position: sticky;
	z-index: 1444;
	top: 0px;
	background-color: #113366aa;
}
nav.menu ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0;
	
	li {
		flex-grow: 1;
		margin: 0;
		padding: 1px;
		min-width: 2.5rem;
		text-align: center;
		position: relative;
		z-index: 1;
	}
	
	a {
		display: block;
		text-decoration: none;
		text-align: center;
		overflow: hidden;
		text-transform: uppercase;
		font-size: .85rem;
		font-weight: bold;
		color: #bbbbdd;
		padding: 0.5rem;
		padding-left: 0;
		/* margin: 0.3em; */
		background-color: #ffffff11;
		/* border: var(--menu-sub-a-border); */
		/* border-radius: 0.5em 0; */
		/* color: var(--menu-sub-a-color); */
		/* background-color: var(--menu-sub-a-bg); */
	}
	a:hover {
		background-color: #ffffff33;
		
	}
	
}


/* ==== INDEX ==== */

section.wrap-index {
	margin: 0;
	display: grid;
	/* grid-template-columns: repeat(auto-fill, minmax(240px, 2fr)); */
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0; /* Uniform spacing between images */
}

article.item-base {
	font-family: var(--body-font);
	font-size: .8rem;
	margin: 8px;
	background-color: var(--content-bg-color);
	color: #112233;
	line-height: 1.5em;
	border-radius: .25rem;
	
}

article.idx-drop-item {
	
	overflow: hidden;
	
	.meta-wrap {
		width: 100%;
	}		
	h2 {
		font-family: var(--body-font);
		font-size: .85rem;
		margin: 0;
		/* background-color: #11223311; */
		border-bottom: 1px solid #11223388;
		text-align: center;
	}
	h2 a {
		padding: .25rem .5rem;
		display: block;
		color: var(--a-color);
		text-decoration: none;
	}
	h2 a:hover {
		background-color: #112233bb;
		/* color: var(--a-hover-color); */
		color: #ddd;
	}

	p.item-desc {
		max-height: 108px;
		overflow: auto;
		font-size: .8rem;
		background-color: #11223306;
		padding: .5rem .75rem;
	}
		

	div.item-player-image-wrap {
		overflow: hidden;
		position: relative;
		z-index:10;
	}
	
	div.item-player-image-wrap img {
		border: 3px solid #ffffff44;
		border-radius: .25rem .25rem 0 0;
		width: 100%;
		display: block;
		cursor: pointer;
	}
}


section.wrap-index div.item-player-image-wrap {
	
	position: relative;
	
	&::after {
		content: 'PLAY ▶';
		display: block;
		position: absolute;
		z-index: 100;
		top: 12px;
		right: 12px;
		/* transform: translatex(-50%); */
		background-color: #ffffff88;
		padding: .25rem .75rem;
		border-radius: 1rem;
		border: 1px solid #bbb;
		pointer-events: none;
	}
	&:hover {
		img {
			border: 3px solid #000000aa;
		}
		&::after {
			background-color: #11223388;
			color: #eee;
			/* border: 1px solid #888; */
		}
	}

}


/* LIST VIEW (SERIES) */

section.wrap-index-list {
	margin: 0;
	/* display: grid; */
	/* grid-template-columns: repeat(auto-fill, minmax(33%, 2fr)); */
	display: flex;
	flex-wrap: wrap;
	/* grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); */
	/* gap: 0; /* Uniform spacing between images */	 */
}

article.idx-drop-item-list {
	
	/* background-color: #000; */
	/* max-width: 160px; */
	/* overflow: hidden; */
	flex: 1 1 auto;
	
	.meta-wrap {
		/* width: 100%; */
		display: flex;
		flex-wrap: wrap;
	}
	
	div.item-desc {
		flex: 1;
		/* max-height: 108px; */
		/* overflow: auto; */
		font-size: .8rem;
		background-color: #11223306;
		padding: .25rem .25rem;
	}

	div.item-player-image-wrap {
		flex: 0 0 64px;
		/* width: 60px; */
		/* overflow: hidden; */
	}
	div.item-player-image-wrap img {
		width: 100%;
		border: 3px solid #ffffff44;
		border-radius: .25rem .25rem 0 0;
		/* width: 100%; */
		display: block;
		cursor: pointer;
	}
	div.item-player-image-wrap img:hover {
		border: 3px solid #ffffffaa;
	}
}

article.idx-drop-item-list:nth-of-type(odd) {
	background-color: var(--content-bg-color-odd);
}

article.idx-drop-item-list:nth-of-type(even) {
	background-color: var(--content-bg-color-even);
}



/* THUMBS VIEW (SERIES) */

section.wrap-index-thumbs {
	/* margin: 0; */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80, 2fr));
	/* display: flex; */
	/* flex-wrap: wrap; */
	/* grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); */
	/* gap: 0; /* Uniform spacing between images */	 */
}

article.idx-drop-item-thumbs {
	
	background-color: transparent;
	.meta-wrap {
		/* width: 100%; */
		/* display: flex; */
		/* flex-wrap: wrap; */
	}
	
	div.item-desc {
		/* flex: 1; */
		/* max-height: 108px; */
		/* overflow: auto; */
		font-size: .8rem;
		background-color: #11223306;
		padding: .25rem .25rem;
	}

	div.item-player-image-wrap {
		/* flex: 0 0 64px; */
		width: 80px;
		/* overflow: hidden; */
	}
	div.item-player-image-wrap img {
		width: 100%;
		border: 3px solid #ffffff44;
		border-radius: .25rem .25rem 0 0;
		/* width: 100%; */
		display: block;
		cursor: pointer;
	}
	div.item-player-image-wrap img:hover {
		border: 3px solid #ffffffaa;
	}
}

article.idx-drop-item-thumbs:nth-of-type(odd) {
	/* background-color: var(--content-bg-color-odd); */
}

article.idx-drop-item-thumbs:nth-of-type(even) {
	/* background-color: var(--content-bg-color-even); */
}




/* ==== ITEM ====  */

section.wrap-item {
	max-width: 90vw;
	margin: auto;
	font-size: .9rem;
}


article.item-base.drop-item {
	
	header, footer {
		background-color: #ccc;
		color: #333;		
				
		.im-bit {
			padding: .25rem .75rem;
			display: inline-block;
			margin: 0;
			background-color: #ffffffaa;
			border: 1px solid #ddd;
			border-radius: .25rem;
		}
		.item-meta.im-tags {
			background-color: #ffffff33;
			border-bottom: 1px solid #00000033;
		}
		.im-tags a {
			padding: .25rem .75rem;
			display: inline-block;
			margin: 0;
			/* background-color: #fafafa; */
			background-color: #ffffffaa;
			/* background-color: #00330022; */
			border: 1px solid #bbb;
			/* border-radius: .25rem; */
			border-radius: 1rem;
			text-decoration: none;
			/* color: #909; */
		}
		.im-tags a:hover {
			background-color: #11223388;
			color: #fff;
		/* padding: .25rem 1rem; */
		/* border: 1px solid #bbb; */
			border: 1px solid #888;
		}
	}
	
	header .item-meta {
		padding: .25rem;
		text-align: center;
		
	}
	footer .item-meta {
		text-align: center;
		padding: .25rem;
	}
		
	header .item-desc {
		padding: .5rem 1.25rem;
		font-size: .85rem;
		line-height: 1.8rem;
		max-height: none;
		background-color: #e0e0e0;
		border-top: 1px solid #aaa;
		border-bottom: 1px solid #888;
	}

	header a:hover, footer a:hover {
		text-decoration: none;
	}
}




section.wrap-item article.item-base.drop-item {
	
	h2 {
		font-size: 1.2rem;
		padding: 1rem 1.5rem;
		font-family: var(--body-font);
		margin: 0;
		background-color: #11223311;
		border-bottom: 1px solid #11223388;
		text-align: center;
		line-height: 1.8rem;
	}
	h2 span.series-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;		
		font-size: 1.25rem;
		padding: .5rem;
		margin: -1rem 0;
		width: 2.5rem;
		height: 2.5rem;
		background-color: #112233bb;
		border: 3px solid #ffffffbb;
		border-radius: 100px;
	}
	
	div.item-flex {
		display: flex;
	}
	div.item-flex-left {
		display: flex;
		flex-direction: row;
		position: relative;
		/* align-items: center; */
		margin: .75rem;
	}
	
	div.content-wrap {
		font-family: var(--mono-font);
		font-size: .9rem;
		line-height: 2rem;
		padding: 2rem 1rem;
		white-space: pre-wrap;
					
		background: repeating-linear-gradient(
			to bottom,
				var(--code-line-odd-bg) 0,
				var(--code-line-odd-bg) 1.95rem,
				rgba(255,255,255,0.05) 1.95rem,
				rgba(255,255,255,0.05) 2rem,
				var(--code-line-even-bg) 2rem,
				var(--code-line-even-bg) 3.95rem,
				rgba(255,255,255,0.05) 3.95rem,
				rgba(255,255,255,0.05) 4rem,
				var(--code-line-odd-bg) 4rem
			);

		
	}
	div.item-player-image-wrap {
		padding: 4px;
		
	}
	
	div.item-image {
		/* display: flex; */
		position: relative;
		flex-shrink: 0;
	}
	div.item-nextprev {
		/* background-color: #ddd; */
		margin-top: 12px;
		/* width: 20px; */
	}
	div.item-nextprev a {
		text-decoration: none;
		display: inline-block;
		/* height: 64px; */
		background-color: #ddd;
		padding: 64px 6px;
		border: 1px solid #bbb;
		/* color: # */
	}
	div.item-nextprev a:hover {
		background-color: #88448888;
		color: #eee;
	}
	div.item-nextprev.item-next a {
		border-radius: 0 1rem 1rem 0;
	}
	div.item-nextprev.item-prev a {
		border-radius: 1rem 0 0 1rem;
	}
}





section.wrap-item div.item-player-image-wrap {
	position: relative;
	z-index:10;
	text-align: center;
	
	img {
		border: 3px solid #11223344;
		border-radius: 0;
	}
	
	img {
		cursor: pointer;
	}

	&::after {
		content: 'PLAY ▶';
		display: block;
		position: absolute;
		z-index: 100;
		top: 12px;
		left: 50%;
		transform: translatex(-50%);
		background-color: #ffffffaa;
		padding: .25rem 1rem;
		border-radius: 1rem;
		border: 1px solid #bbb;
		pointer-events: none;
	}
	&:hover {
		img {
			border: 3px solid #000000aa;
		}
		&::after {
			background-color: #11223388;
			color: #eee;
			/* border: 1px solid #888; */
		}
	}

}


/* ==== VIDEO PLAYER ==== */


modal.yt-modal {
	display: none;
	position: fixed;
	z-index: 11008;
	left: 0;
	top: 32px;
	width: 100vw; 
	height: calc(100vh - 32px);
	overflow: auto;
	/* background-color: ; */
	border: 1px solid #ffffff77;
	border-width: 1px 0 1px;
	background: no-repeat center/80% url("../img/icons/loader-infin.svg") #000000aa;
	/* background-image: url(); */
}

modal div.modal-tools {
	position: absolute;
	top: 48px;
	right: 24px;
	z-index: 1010;
	
	
}

modal span.mt-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	
	cursor: pointer;
	border: 1px solid #00000022;
	border-radius: .25rem;
	
	font-size: 1.75rem;
	/* line-height: 1.2; */
	text-align: center;
	
	padding: 0 .5rem;
	height: 2.5rem;
	max-height: 2.5rem;
	width: 2.5rem;
	max-width: 2.5rem;
	
	
	font-family: var(--mono-font), sans-serif;
	margin-bottom: .5rem;
	background-color: #88228888;
}

modal span.mt-icon:hover {
	background-color: #882288;
}

modal span.mt-icon a {
	color: #ddd;
	text-decoration: none;
}
modal span.mt-icon a:hover {
	color: #fff;
}

modal span.mt-icon.modal-closer {
	background-color: #ffffff88;
	font-size: 2rem;
	color: #112233;
}

modal span.modal-closer:hover {
	background-color: #dd66aa88;
}

modal span.reader-link {
}

modal span.reader-link:hover {
}



.video--yt-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 90;
	/* cursor: pointer; */
	background-color: #ffffff11;
}



/* ==== SETS === */

article.set-legend {
	
	background-color: var(--content-bg-color);
	color: #112233;
	border-radius: .25rem;
	margin: 1rem 1rem 1rem 1rem;
	
	h2 {
		font-size: 1rem;
		padding: .5rem;
		/* padding: 1rem 1.5rem; */
		font-family: var(--body-font);
		margin: 0;
		background-color: #11223311;
		border-bottom: 1px solid #11223388;
		text-align: center;
	}
	h2 a {
		/* padding: .25rem .5rem; */
		/* display: block; */
		color: var(--a-color);
		/* text-decoration: none; */
	}
	h2 a:hover {
		/* background-color: #eee; */
		color: var(--a-hover-color);
		text-decoration: none;
	}
	h2 .series-name {
		background-color: #bbccddaa;
		display: inline-block;
		padding: .5rem 1rem .5rem 0;
		border-radius: .25rem;
		margin-left: .75rem;
	}
	h2 .series-icon {
		background-color: #eeeeeecc;
		margin-left: -8px;
		margin-right: 4px;
		transform: translate(2px -6px);
	}
	h2 .series-name:hover .series-icon {
		background-color: #112233bb;
	}
	h2 .series-name:hover {
		background-color: #11223311;
	}
	.item-desc {
		text-align: center;
		padding: .5rem 1.25rem;
		font-size: .85rem;
		line-height: 1.5rem;
		max-height: none;
		background-color: #00000022;
		/* border-top: 1px solid #aaa; */
		/* border-bottom: 1px solid #888; */
	}	
}
article.set-legend.lgd--cat {
}




/* ==== GENERAL ==== */

img.icon-file {
	height: .9em;
	/* max-height: 1em; */
	/* margin: .1em 0 0; */
	vertical-align: middle;
	line-height: 1;
}


@media only screen and (max-width: 600px) {
		

	header.header-top {
		/* text-align: right; */
		height: 108px;
		
		
		img.header-logo {
			left: 9px;
			top: 9px;
			height: 70px;
		}
		
		h1 {
			font-size: 1.6rem;
			line-height: 1.5rem;
			/* width: fit-content; */
			/* text-align: left; */
			/* margin: 1.25rem auto 1rem calc((100% - 100px)); */
			margin: 1.25rem auto 1rem 100px;
		}
		div.header-links {
			justify-content: space-evenly;
			gap: 0;
		}
	}
	section.wrap-index {
		margin: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 0; /* Uniform spacing between images */	
	}
	
	
	section.wrap-item article.item-base.drop-item {
		
		div.item-flex {
			/* display: block; */
			flex-direction: column;
		}
		div.item-flex-left {
			max-width: 80%;
			margin: .75rem auto;
		}
		div.item-player-image-wrap {
			margin-bottom: 0;
		}
		div.item-player-image-wrap img {
			/* display: block; */
			/* margin: auto; */
		}
		.im-bit:first-of-type {
			margin-bottom: 4px;
		}
	}

	
	
}