/* ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ // k o k k o // u t f - 8 // ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ //
// ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ // k o k k o // u t f - 8 // ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ //
// ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ // k o k k o // u t f - 8 // ¤ ¤ ¤ ¤ ¤ // ¤ ¤ ¤ ¤ ¤ */

/* ### ### ### */

:root {
	--sc1: #001eff30;
	--sc2: #ff005020;
}

/* ### ### ### ### ### ### ### */
/* ### TERMINAL  CONTAINER ### */
/* ### ### ### ### ### ### ### */

.bash {
	/* Display */
	display: flex;
}

.bash .terminal {
	/* Display */
	/*
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	*/
	/* Flex */
	flex: 1 0;
	/* Settings */
	/*overflow: hidden;
	overflow: auto;*/
	overflow-y: scroll;
	word-wrap: break-word;
	user-select: initial;
	/* Text */
	text-align: left;
	text-align-last: left;
	/* Font */
	font-weight: normal;
	font-family: "Consolas", monospace;
	/* Color */
	background: #111;
	color: #eaeaea;
	/* Box */
	padding: .5rem;
	border: 0;
	margin: 0;
	/* Size */
	/*
	height: 100%;
	width: 100%;
	*/
}

.bash ::selection {
	/* Color */
	background-color: #eaeaea;
	color: #111;
}

.bash::-webkit-scrollbar,
.bash ::-webkit-scrollbar {
	/* Display */
	display: none !important;
}

.bash .console {
	/* Display */
	display: flex;
	flex-flow: column nowrap;
	/* Box */
	padding: 0;
	border: 0;
	margin: 0;
}

.bash .commandline {
	/* Display */
	display: flex;
	flex-flow: row nowrap;
	/* Settings */
	white-space: pre;
	user-select: none;
	/* Box */
	padding: 0;
	border: 0;
	margin: 0;
}

.bash .commandline > .user {
	/* Flex */
	flex: 0 0 auto;
}

.bash .commandline > .command {
	/* Flex */
	flex: 1 0;
	/* Settings */
	cursor: default;
	appearance: none;
	caret-shape: block;
	user-select: text;
	/* Font */
	font: inherit;
	/* Text */
	text-align: left;
	text-align-last: left;
	/* Color */
	background: none;
	color: inherit;
	/* Box */
	padding: 0;
	outline: inherit;
	border: 0;
	margin: 0;
}
/*div.terminal div.commandline span.cursor:before { content:"█" }*/

/* ### ### ### ### ### */
/* ### CRT EFFECTS ### */
/* ### ### ### ### ### */

/* stripe-pixelation */
.bash.crt::before {
	/* Display */
	display: flex;
	/* Position */
	/*position: absolute;*/
	position: absolute;
	/*
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	*/
	z-index: 2;
	/* Settings */
	content: "";
	pointer-events: none;
	/* Color */
	/*background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 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%;*/
	background: linear-gradient(#12101000 50%, #00000040 50%), linear-gradient(90deg, #ff00000f, #00ff0005, #0000ff0f);
	background-size: 100% 2px, 3px 100%;
	/* Size */
	height: 100%;
	width: 100%;
	/*
	*/
}

/* flickering */
.bash.crt.flick::after {
	/* Display */
	display: block;
	/* Position */
	/*position: absolute;*/
	position: absolute;
	/*
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	*/
	z-index: 2;
	/* Settings */
	content: "";
	pointer-events: none;
	opacity: 0;
	/* Animation */
	animation: flicker 0.15s infinite;
	/* Color */
	background: #1210101a;
	/* Size */
	height: 100%;
	width: 100%;
}

@keyframes flicker {
	0%	{ opacity: 0.87; }
	5%	{ opacity: 0.61; }
	10%	{ opacity: 0.92; }
	15%	{ opacity: 0.74; }
	20%	{ opacity: 0.63; }
	25%	{ opacity: 0.68; }
	30%	{ opacity: 0.57; }
	35%	{ opacity: 0.79; }
	40%	{ opacity: 0.83; }
	45%	{ opacity: 0.76; }
	50%	{ opacity: 0.58; }
	55%	{ opacity: 0.65; }
	60%	{ opacity: 0.82; }
	65%	{ opacity: 0.94; }
	70%	{ opacity: 0.85; }
	75%	{ opacity: 0.62; }
	80%	{ opacity: 0.71; }
	85%	{ opacity: 0.88; }
	90%	{ opacity: 0.79; }
	95%	{ opacity: 0.91; }
	100%	{ opacity: 1.00; }
}

/* text color separation */
.bash.crt.sep * {
	/* Animation */
	animation: color-separation 1.6s infinite;
}

@keyframes color-separation {
	0%	{ text-shadow: 0.44px 0 1px var(--sc1), -0.44px 0 1px var(--sc2), 0 0 3px; }
	5%	{ text-shadow: 2.79px 0 1px var(--sc1), -2.79px 0 1px var(--sc2), 0 0 3px; }
	10%	{ text-shadow: 0.03px 0 1px var(--sc1), -0.03px 0 1px var(--sc2), 0 0 3px; }
	15%	{ text-shadow: 0.40px 0 1px var(--sc1), -0.40px 0 1px var(--sc2), 0 0 3px; }
	20%	{ text-shadow: 3.48px 0 1px var(--sc1), -3.48px 0 1px var(--sc2), 0 0 3px; }
	25%	{ text-shadow: 1.61px 0 1px var(--sc1), -1.61px 0 1px var(--sc2), 0 0 3px; }
	30%	{ text-shadow: 0.70px 0 1px var(--sc1), -0.70px 0 1px var(--sc2), 0 0 3px; }
	35%	{ text-shadow: 3.90px 0 1px var(--sc1), -3.90px 0 1px var(--sc2), 0 0 3px; }
	40%	{ text-shadow: 3.87px 0 1px var(--sc1), -3.87px 0 1px var(--sc2), 0 0 3px; }
	45%	{ text-shadow: 2.23px 0 1px var(--sc1), -2.23px 0 1px var(--sc2), 0 0 3px; }
	50%	{ text-shadow: 0.08px 0 1px var(--sc1), -0.08px 0 1px var(--sc2), 0 0 3px; }
	55%	{ text-shadow: 2.38px 0 1px var(--sc1), -2.38px 0 1px var(--sc2), 0 0 3px; }
	60%	{ text-shadow: 2.20px 0 1px var(--sc1), -2.20px 0 1px var(--sc2), 0 0 3px; }
	65%	{ text-shadow: 2.86px 0 1px var(--sc1), -2.86px 0 1px var(--sc2), 0 0 3px; }
	70%	{ text-shadow: 0.49px 0 1px var(--sc1), -0.49px 0 1px var(--sc2), 0 0 3px; }
	75%	{ text-shadow: 1.89px 0 1px var(--sc1), -1.89px 0 1px var(--sc2), 0 0 3px; }
	80%	{ text-shadow: 0.08px 0 1px var(--sc1), -0.08px 0 1px var(--sc2), 0 0 3px; }
	85%	{ text-shadow: 0.10px 0 1px var(--sc1), -0.10px 0 1px var(--sc2), 0 0 3px; }
	90%	{ text-shadow: 3.44px 0 1px var(--sc1), -3.44px 0 1px var(--sc2), 0 0 3px; }
	95%	{ text-shadow: 2.18px 0 1px var(--sc1), -2.18px 0 1px var(--sc2), 0 0 3px; }
	100%	{ text-shadow: 2.62px 0 1px var(--sc1), -2.62px 0 1px var(--sc2), 0 0 3px; }
}

/* turning on-off */
/*#switch:checked ~ .container > .screen {*/
/*.crt.turning .terminal {
	animation: turn-on 4s linear;
	animation-fill-mode: forwards;
}*/

/*#switch ~ .container > .screen {*/
/*.crt {
	 animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
	 animation-fill-mode: forwards;
}*/
/*
@keyframes turn-on {
	0% {
		transform: scale(1, 0.8) translate3d(0, 0, 0);
		filter: brightness(30);
		opacity: 1;
	}
	3.5% {
		transform: scale(1, 0.8) translate3d(0, 100%, 0);
	}
	3.6% {
		transform: scale(1, 0.8) translate3d(0, -100%, 0);
		opacity: 1;
	}
	9% {
		transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
		filter: brightness(30);
		opacity: 0;
	}
	11% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(0) brightness(0);
		opacity: 0;
	}
	100% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(1) brightness(1.2) saturate(1.3);
		opacity: 1;
	}
}

@keyframes turn-off {
	0% {
		transform: scale(1, 1.3) translate3d(0, 0, 0);
		-webkit-filter: brightness(1);
		filter: brightness(1);
		opacity: 1;
	}
	60% {
		transform: scale(1.3, 0.001) translate3d(0, 0, 0);
		-webkit-filter: brightness(10);
		filter: brightness(10);
	}
	100% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: scale(0, 0.0001) translate3d(0, 0, 0);
		-webkit-filter: brightness(50);
		filter: brightness(50);
	}
}
*/