/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~ Product and property of Titan Informatics LLC ~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* FIGURE START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
figure {
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
	display: flex;
	flex-direction: column;
	background: inherit;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}
figure[type="audio"]::before {
	font-family: "Font Awesome 6 Sharp";
	font-size: 10rem;
	font-weight: 300;
	content: "\f028";
	height: 100%;
	margin-bottom: auto;
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	opacity: 0.4;
	background: rgba(0, 0, 0, 0.25);
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FIGURE END */

/* FIGURE FIGCAPTION START ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
figure figcaption {
	font-size: 0.875rem;
	line-height: 1rem;
	margin: 5px 10px 5px 10px;
	position: relative;
	float: left;
	background: inherit;
}
figure figcaption credit::before {
	margin: 0 5px;
}
figure[type="img"] figcaption credit::before {
	content: "(Image by:";
}
figure[type="audio"] figcaption credit::before {
	content: "(Audio by:";
}
figure[type="video"] figcaption credit::before {
	content: "(Video by:";
}
figure figcaption credit::after {
	content: ")";
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FIGURE FIGCAPTION END */

/* CONTROLS START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
controls {
	min-height: 50px;
	margin: -50px 0 0 0;
	position: relative;
	float: left;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
	display: none;
	container-type: inline-size;
	container-name: controls;
}
figure[type="audio"] controls {
	/*margin: 0;*/
	background: rgba(0, 0, 0, 0.25);
}
figure[type="img"] controls {
	background:unset;
}
figure[type="audio"] progressbar {
	background: rgba(0, 0, 0, 0.1);
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CONTROLS END */

/* PROGRESSBAR START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
progressbar {
	width: calc(100% - 10px);
	height: 10px;
	position: absolute;
	bottom: 100%; left: 5px;
	background: rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.2);
	/*transition: all 0.2s;*/
}
progressbar::before,
progressbar::after {
	content: "";
	width: 5px;
	height: 100%;
	position: relative;
}
progressbar::before {
	margin: 0 0 0 -5px;
	float: left;
	background: #2f8ddc;
}
progressbar::after {
	float: right;
	margin: 0 -5px 0 0;
	background: inherit;
}
progressbar progression {
	width: 0;
	height: 100%;
	position: relative;
	float: left;
	background: #2f8ddc;
	z-index: 1;
}
progressbar progression::after {
	content: "";
	width: 10px;
	height: 100%;
	position: absolute;
	right: -5px;
	background: #fff;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PROGRESSBAR END */

/* CONTROLS ICONS START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
timedisplay, speaker, backward, play, forward, expand, settings {
	top: 50%;
	transform: translateY(-50%);
}
backward, play, forward {
	position: absolute;
}
timedisplay, timedisplay current, timedisplay duration, speaker, expand, settings {
	position: relative;
}

timedisplay, speaker {
	float: left;
	margin-left: 12px;
}
timedisplay current, timedisplay duration {
	float: left;
}
timedisplay current {
	min-width: 40px;
}
timedisplay duration {
	float: right;
	opacity: 0.6;
}

timedisplay duration::before {
	content: "/";
	position: relative;
	float: left;
	margin: 0 -2px 0 0;
	top: 50%;
	transform: translateX(-50%);
}
timedisplay current::after, timedisplay duration::after {
	font-size: 1rem;
	content: attr(time);
	position: relative;
	float: left;
}
timedisplay duration::after {
	float: right;
}
backward {
	left: calc(50% - 45px);
}
play {
	left: 50%;
	transform: translate(-50%, -50%);
}
play.pause::before {
	content: "\f04c";
	margin: 0 1.5px 0 -1.5px;
}
forward {
	left: calc(50% + 20px);
}
expand, settings {
	float: right;
	margin-right: 12px;
}
expand {
	z-index: 20;
}

backward::before,
play::before,
forward::before,
expand::before,
settings::before,
speaker::before,
settings li[name="loop"]::before,
settings li[name="share"]::before {
	font-family: "Font Awesome 6 Sharp";
	font-size: 1.375rem;
	line-height: 1.375rem;
	font-weight: 300;
	position: relative;
	float: left;
	cursor: pointer;
	display: block;
}

backward::before, forward::before {
	z-index: 1;
}
backward::before {
	content: "\f0e2";
}
play::before {
	font-size: 2.25rem;
	line-height: 2.25rem;
	/*font-weight: 200;*/
	content: "\f04b";
}
forward::before {
	content: "\f01e";
}
backward::after, forward::after {
	font-family: "Font Awesome 6 Sharp";
	font-size: 0.625rem;
	line-height: 1.25rem;
	font-weight: 500;
	content: "\35";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
	cursor: pointer;
}
expand::before {
	content: "\f31d";
}
expand.compress::before {
	content: "\e0a5";
}
settings::before {
	content: "\e5e9";
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CONTROLS ICONS END */

/* SPEAKER, VOLUME BAR START ~~~~~~~~~~~~~~~~~~~~~~~~~ */
speaker::before {
	content: "\f028";
	min-width: 28px;
}
speaker.muted::before {
	content: "\f6a9";
}
volumebar {
	width: 10px;
	height: 100px;
	position: absolute;
	bottom: calc(100% + 39px); left: 50%;
	transform: translateX(-50%);
	/*background: rgba(255, 255, 255, 0.2);*/
	background: rgba(0, 0, 0, 0.2);
	display: none;
}
volumebar::before {
	content: "";
	width: calc(100% + 20px);
	height: calc(100% + 30px);
	position: absolute;
	top: -15px; left: -10px;
	border: 10px solid rgba(0, 0, 0, 0.5);
}
volumebar::after {
	content: "";
	width: 100%;
	height: 5px;
	position: absolute;
	top: -5px; left: 0;
	background: inherit;
}
volumebar volume {
	width: 100%;
	height: 50%;
	position: absolute;
	bottom: 0;left: 0;
	background: #2f8ddc;
}
volumebar volume::before {
	content: "";
	width: 100%;
	height: 5px;
	position: absolute;
	bottom: -5px;left: 0;
	background: inherit;
}
volumebar volume::after {
	content: "";
	width: 100%;
	height: 10px;
	background: #fff;
	position: relative;
	float: left;
	top: -5px;
	z-index: 1;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ SPEAKER, VOLUME BAR END */

/* SETTINGS MENU START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
settings ul {
	min-width: 80px;
	padding: 7.5px;
	/*border: 1px solid rgba(0, 0, 0, 0.2);*/
	background: rgba(0, 0, 0, 0.4);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	list-style: none;
	display: none;
}
settings li {
	width: calc(100% - 5px);
	padding: 7.5px 5px;
	margin: 2.5px;
	color: #f5f5f5;
	position: unset;
	background: rgba(255, 255, 255, 0.4);
	text-align: center;
	cursor: pointer;
}
settings li:first-of-type {
	border-top: none;
}
settings li:hover {
	color: #fff;
	/*background: rgba(0, 0, 0, 0.4);*/
	background: rgba(255, 255, 255, 0.5);
}
settings > ul {
	position: absolute;
	right: 0;
	bottom: calc(100% + 24px);
	/*border: 1px solid rgba(0, 0, 0, 0.2);*/
	/*z-index: 1000;*/

}
settings ul ul {
	min-width: 85px;
	height: 100%;
	position: absolute;
	top: 0;right: 100%;
	/*top: -1px;
	height: calc(100% + 2px);*/
	overflow-y: auto;
	transition: all 0.5s ease;
}
/*settings ul ul.active {
	right: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
}*/
settings li::before {
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
}
settings li::after {
	cursor: pointer;
}
settings li[speed]::before {
	content: attr(speed);
	transform: translateX(calc(-50% - 6px));
}
settings li[speed]::after {
	content: "X";
}
settings li[resolution]::before {
	content: attr(resolution);
	transform: translateX(calc(-50% - 6px));
}
settings li[resolution]::after {
	content: "P";
}
settings li[name="loop"]::before,
settings li[name="loop"]::after,
settings li[name="share"]::before {
	font-family: "Font Awesome 6 Sharp";
	font-weight: 300;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.5;
}
settings li[name="loop"]::before {
	content: "\f364";
}
settings li[name="share"]::before {
	content: "\f1e0";
	opacity: 1;
}
settings li[name="loop"] {
	position: relative;
}
settings li[name="loop"]::after {
	font-size: 22px;
	content: "\f715";
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}
settings li[name="loop"].loop::before,
settings li[name="loop"].loop::after {
	opacity: 1;
}
settings li[name="loop"].loop::after {
	content: none;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SETTINGS ICONS END */

/* POPUP START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
popup {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0;
	background: rgba(0, 0, 0, 0.3);
	display: none;
	z-index: 1;
}
popup:before {
	content: "Clicking on the textarea will automatically copy the text for you. Afterward, you can paste it directly into your preferred location.";
	margin: 10px 0 0 10px;
	position: relative;
	float: left;
	color: #fff;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.95);
	opacity: 0.5;
}
popup textarea {
	font-family: "Kanit-Light";
	font-size: 1.063rem;
	line-height: 1.125rem;
	width: 80%;
	max-height: 80%;
	padding: 10px;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	color: #151515;
	resize: unset;
	overflow-y: auto;
	z-index: 1;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ POPUP END */

/* MEDIA QUERIES START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 840px) {

}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MEDIA QUERIES END */

/* CONTAINER QUERIES START ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@container controls (max-width: 400px) {
	speaker {
		margin-left: 6px;
	}
	/*timedisplay current {
		background: indianred;
	}*/
	timedisplay duration {
		display: none;
	}
@container controls (max-width: 300px) {
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CONTAINER QUERIES END */