/* CRT */
@font-face {
	font-family: 'VT323';
	src: url('/assets/fonts/VT323.woff2') format('woff2');
	font-weight: 400;
}

/* KINDLE */
@font-face {
	font-family: 'Bookerly';
	src: url('/assets/fonts/Bookerly.woff2') format('woff2'),
	url('/assets/fonts/Bookerly-Italic.woff2') format('woff2');
	font-weight: 400;
}

@font-face {
	font-family: 'Bookerly';
	src: url('/assets/fonts/Bookerly-Bold.woff2') format('woff2'),
	url('/assets/fonts/Bookerly-Bold-Italic.woff2') format('woff2');
	font-weight: 700;
}

/* LYRICS (GENIUS) */
@font-face {
	font-family: 'Programme';
	src: url('/assets/fonts/programme_light.woff2') format('woff2'),
	url('/assets/fonts/programme_light_italic.woff2') format('woff2');
	font-weight: 100;
}

/* LYRICS (SPOTIFY) */
@font-face {
	font-family: "Circular";
	src: url('/assets/fonts/spotify_bold.woff2') format('woff2');
	font-weight: 700;
}

/* PDF */
@font-face {
	font-family: "IM Fell DW Pica";
	src: url('/assets/fonts/IMFellDWPica.woff2') format('woff2'),
	url('/assets/fonts/IMFellDWPica-Italic.woff2') format('woff2');
	font-weight: 400;
}

/* TUMBLR */
@font-face {
	font-family: 'Favorit';
	src: url('/assets/fonts/favorit.woff2') format('woff2'),
		url('/assets/fonts/favorit-medium.woff2') format('woff2');
}



/* APPLE BOOKS */
.books {
	padding: 1rem;
	margin: 1rem 0;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	background-color: #F2F1F1;
	color: #000;
	font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	line-height: 1.55;
	font-size: 18px;

	*:first-child {
		margin-top: 0;
	}

	*:last-child {
		margin-bottom: 0;
	}

	::selection {
		background-color: rgba(0, 0, 0, .23);
	}

	mark {
		background-color: #E9D16E;
		color: inherit;
		border-radius: 0.2em;
		padding: 0 0;
	}

	mark.green {
		background-color: #A9D38F;
	}

	mark.blue {
		background-color: #A5BDE9;
	}

	mark.purple {
		background-color: #C4B7E9;
	}

	mark.pink {
		background-color: #E4AEBF;
	}

	mark.underline {
		background-color: inherit;
		text-decoration: 2px solid #DD594B underline;
	}
}

/* CRT OVERLAY (BOX) */
.crt {
	--crt-bg: #FFF;
	--crt-color: #000;

	display: inline-block;
	background-color: var(--crt-bg);
	background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	background-size: 100% 2px, 3px 100%;
	pointer-events: none;
	color: var(--crt-color);
	font-family: 'VT323';
	font-size: 1.2rem;
	line-height: 1;
	border-radius: .5rem;
	border: var(--border) rgb(var(--color-code));
	margin: 1rem 0;
	padding: 1rem;

	*:first-child {
		margin-top: 0;
	}

	*:last-child {
		margin-bottom: 0;
	}

	::selection {
		color: var(--crt-bg);
		background-color: var(--crt-color);
	}
}

/* KINDLE */
.kindle {
	padding: 1rem;
	margin: 1rem 0;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	background-color: #FFF;
	color: #000;
	font-family: 'Bookerly', serif;
	line-height: 1.55;
	font-size: 18px;

	*:first-child {
		margin-top: 0;
	}

	*:last-child {
		margin-bottom: 0;
	}

	::selection {
		background-color: rgba(10, 63, 255, .23);
	}

	mark {
		background-color: #FEF7B7;
		color: inherit;
		border-radius: 0;
		padding: 0 0;
	}

	mark.orange {
		background-color: #F9D9B3;
	}

	mark.pink {
		background-color: #F5C1CE;
	}

	mark.blue {
		background-color: #B7CCF7;
	}
}

/* LOGEION STYLE */
.logeion {
	--font: Helvetica, Arial, "Lucida Grande", sans-serif, NewAthenaUnicodeRegular;

	font-family: var(--font);
	font-size: 14px;
	line-height: 1.35;
	background-color: #f5eed7;
	color: rgba(0, 0, 0, 0.87);
	padding: 1rem;
	margin: 1rem 0;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;

	ul,
	ol {
		padding: 0;
		margin-left: 1rem;
		list-style: none;
	}

	li {
		margin-bottom: 1rem;
	}

	.bullet {
		width: 5%;
		max-width: 25px;
		float: left;
		font-weight: 700;
	}

	:first-child {
		margin-top: 0;
	}

	:last-child {
		margin-bottom: 0;
	}

	a:link,
	a:visited {
		color: maroon;
	}

	a:hover {
		background-color: rgba(158, 158, 158, 0.2);
	}

	a:not([href*="splendide-mendax.com"]):not([href^="#"]):not([href^="/"]):not([href*="mailto"]):not([href*="tel"]):not([name]) {
		&::after {
		  content: "";
		}
	}

	.title {
		font-size: 2em;
		font-family: var(--font);
		font-weight: bold;
		background-color: transparent;
		text-transform: none;
		text-align: left;
		border-radius: 0;
		color: inherit;
		padding: 8px 0;
	}

	.heading {
		margin-bottom: 0;
		font-weight: var(--bold-weight);

		~ul {
			margin-top: 0;
		}

		~p {
			margin-top: -.4em;
		}
	}

	.dictionary {
		font-size: 14px;
		color: rgb(128, 0, 0);
		border-bottom: 2px solid rgb(128, 0, 0);
		width: 160px;
		text-align: center;
		line-height: 24px;
		padding: 12px;
		cursor: pointer;
		white-space: nowrap;
		position: relative;
		font-weight: 500;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 30px;

		~p {
			margin-left: calc(1em + 30px);
		}
	}
}

/* LYRICS */
.lyrics-g {
	margin: 1rem 0;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	padding: 1rem;
	font-family: "Programme", Arial, sans-serif;
	font-weight: 100;
	font-size: 1.125rem;
	color: #000;
	background-color: #FFF;

	mark {
		color: #000;
		background-color: rgb(233, 233, 233);
		padding-top: calc(0.75em - 0.75px - 0.625rem);
		padding-bottom: calc(0.75em - 0.25px - 0.625rem);
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;

		&:hover {
			color: #FFF;
			background-color: rgb(var(--color-nav));
		}
	}

	a,
	a:hover{
		color: inherit;
		text-decoration: none;
	}

	.tooltip::before {
		font-family: "Programme", Arial, sans-serif;
		font-weight: 100;
		background: rgb(233, 233, 233);
		color: #000;
		font-size: 1.125rem;
		transform: translateY(50%);
		left: 115%;
		bottom: -20%;
		border-radius: 0;
		padding-top: calc(0.75em - 0.75px - 0.625rem);
		padding-bottom: calc(0.75em - 0.25px - 0.625rem);
	}

	*:first-child {
		margin-top: 0;
	}

	*:last-child {
		margin-bottom: 0;
	}
}

.lyrics-s {
	--color: var(--color-link);
	--size: 4cqw;

	margin: 1rem 0;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	padding: 1rem;
	font-family: "Circular", Arial, sans-serif;
	font-weight: 100;
	container-type: inline-size;
	background-color: rgba(var(--color), 0.7);
	color: rgb(var(--white));

	* {
		font-size: var(--size);
		line-height: 1.5em;
	}

	.inactive {
		color: rgb(var(--black));
	}

	.passed {
		color: rgba(var(--white), 0.7);
	}

	& .alt {
		color: rgb(var(--black));

		.inactive {
			color: rgb(var(--white));
		}
	
		.passed {
			color: rgba(var(--black), 0.7);
		}
	}

	* {
		margin: 0;
	}
}

/* PDF */
.pdf {
	--rotate: .5deg;
	--blur: .03rem;
	--offset: 0 0;
	--opacity: 1.0;
	--size: 3.5cqw;

	margin: 1rem 0;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	font-family: 'IM Fell DW Pica', serif;
	font-weight: 500;
	color: transparent;
	text-shadow: 0 0 var(--blur) #000;
	background-color: #FFF;
	position: relative;
	overflow: hidden;
	container-type: inline-size;

	&:before {
		content: " ";
		background-image: url('/assets/images/texture.svg');
		background-repeat: repeat;
		background-position: var(--offset);
		background-size: 100%;
		filter: blur(var(--blur));
		-webkit-filter: blur(var(--blur));
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 2;
		pointer-events: none;
		transform: rotate(var(--rotate));
		opacity: var(--opacity);
	}

	* {
		transform: rotate(var(--rotate));
	}

	p {
		line-height: 1.1;
		text-align: justify;
		font-size: var(--size);
		padding: 0 3cqw;
		margin: .4em 0;
	}

	:first-child {
		margin-top: 0;
	}

	:last-child {
		margin-bottom: 0;
	}

	mark {
		background-color: rgba(255, 255, 10, .5);
		color: inherit;
		border-radius: 0;
		padding: 0 0;
	}

	mark.underline {
		background-color: inherit;
		text-decoration: .075em solid red underline;
	}

	.pg {
		font-size: var(--size);
		margin-bottom: .5em;
		text-align: left;
	}

	.title {
		font-size: var(--size);
		font-family: inherit;
		text-transform: none;
		font-weight: normal;
		font-style: italic;
		text-align: center;
		margin-top: -1.6em;
		margin-bottom: 1.5em;
	}
}

.grid {
	.pdf {
		font-size: 4cqw;
	}
}

/* TV SCRIPT */
.script {
	margin: 1rem 0;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	font-family: Courier, monospace;
	background-color: #FFF;
	color: #000;
	padding: 1rem;
	container-name: script;
	container-type: inline-size;

	p {
		margin: 0;
		line-height: 1;
		padding-left:2em;
		text-indent:-2em;
	}

	.heading {
		text-transform: uppercase;
		font-weight: var(--bold-weight);
		margin: 1em 0;
		padding-left: 0;
		text-indent: 0;
	}

	.character {
		text-transform: uppercase;
		margin-left: 45%;
		margin-top: 1em;
		margin-bottom: 0.25em;
		padding-left: 0;
		text-indent: 0;
	}

	.dialogue {
		margin-left: 12.5%;
		width: 75%;
		margin-bottom: 1em;
		padding-left: 0;
		text-indent: 0;
	}

	.parenthetical {
		margin-left: 33%;
		width: 33%;
		padding-left: 0;
		text-indent: 0;
	}
}

@container (max-width: 400px) {
	.script {
		.character {
			margin-left: 0;
			text-align: center;
		}
		.dialogue {
			margin-left: 6.25%;
			width: 87.5%;
		}
	}
}

/* (CHAKOTEYA) TRANSCRIPT */
.transcript {
	margin: 1rem 0;
	padding: 1rem;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	color: #000;
	background-color: #d5d5d5;
	font-family: Arial, Helvetica, sans-serif;

	:first-child {
		margin-top: 0;
	}

	:last-child {
		margin-bottom: 0;
	}

	p {
		line-height: 1.4em;
	}
}

.tumblr {
	--tumblr-color: 0, 0, 0;

	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;
	font-family: "Favorit", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	max-width: 540px;
	width: 100%;
	background-color: #FFF;
	color: rgb(var(--tumblr-color));
	position: relative;
	margin-inline: auto;
	margin-block: 16px;

	hr {
		border-bottom: 1px solid rgba(var(--tumblr-color), .13);
		margin: 0;
	}

	a:not([href*="splendide-mendax.com"]):not([href^="#"]):not([href^="/"]):not([href*="mailto"]):not([href*="tel"]):not([name]) {
		&::after {
		  content: "";
		}
	}

	.header {
		padding: 16px;
		justify-content: center;
		align-items: center;
		display: flex;

		a {
			color: inherit;
			text-decoration: none;

			&:hover {
				text-decoration: none;
			}
		}

		.icon {
			align-self: flex-start;
			padding-right: 10px;

			img {
				border-radius: 3px;
				width: 32px;
				height: 32px;
				margin: 0;
			}
		}

		.user {
			flex-flow: wrap;
			flex-grow: 1;
			justify-content: flex-start;
			align-items: center;
			column-gap: 4px;
			font-size: .875rem;
			font-weight: 400;
			line-height: 1.42857;
			display: flex;
			font-size: .875rem;
			font-weight: 700;
			line-height: 1.125rem;
		}

		.meatballs {

			svg {
				stroke: none;
				height: 10px;
				width: 18px;
			}
		}
	}

	.body {
		margin: 8px 16px 15px 16px;

		p {
			margin-top: 0;
			margin-bottom: 0.75em;
		}

		a {
			color: inherit;
			text-decoration: underline;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	ul.tags {
		margin: 10px -6px 10px -6px;
		padding-top: 4px;
		padding-inline: 16px;

		li {
			display: inline-flex;
			list-style-type: none;
			line-height: 1.5;
			margin: -2px 0 !important;
			padding: 2px 6px;
			color: rgba(var(--tumblr-color), .65)
		}

		*::before {
			content: "#";
		}

		*::after:not(:last-child) {
			content: ",";
		}
	}
}

/* WIKIPEDIA STYLE */
.wiki {
	font-family: sans-serif;
	font-size: 0.875rem;
	line-height: 1.5714285;
	background-color: white;
	color: #202122;
	padding: 1em;
	margin: 1em 0;
	border: var(--border) rgb(var(--color-code));
	border-radius: 0.5rem;

	:first-child {
		margin-top: 0;
	}

	:last-child {
		margin-bottom: 0;
	}

	a {
		color: #36c;
		text-decoration: none;
	}

	a:visited {
		color: #795cb2;
	}

	a:hover {
		text-decoration: 1px solid underline;
		background-color: transparent;
	}

	a:not([href*="splendide-mendax.com"]):not([href^="#"]):not([href^="/"]):not([href*="mailto"]):not([href*="tel"]):not([name]) {
		&::after {
		  content: "";
		}
	}

	.title {
		font-size: 1.8em;
		font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
		font-weight: normal;
		line-height: 1.375;
		background-color: transparent;
		text-transform: none;
		text-align: left;
		border-radius: 0;
		color: inherit;
		border-bottom: 1px solid #a2a9b1;
	}

	.disambiguation {
		padding-left: 1.6em;
		margin-bottom: 0.5em;
		font-style: italic;
	}
}