/* Google FONTS (all monospace versions hehe.) */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Cutive+Mono&family=DM+Mono&family=Fira+Code&family=IBM+Plex+Mono&family=JetBrains+Mono&family=Noto+Sans+Mono&family=PT+Mono&family=Red+Hat+Mono&family=Roboto+Mono&family=Source+Code+Pro&family=Space+Mono&display=swap');

/* Fonts */
@font-face {
	font-family: cascadiaCode;
	src: url('../assets/fonts/CascadiaCodePL.woff2');
}

/* ROOT */
:root 
{
	--default-font-size: 110%; 
	--default-font: 'Fira Code', cascadiaCode, 'Source Code Pro', 'Menlo', monospace;
	--default-font-color: limegreen; 
	/* --default-font-color: rgb(30, 255, 150);  */
	/* --default-font-color: rgb(29, 255, 149);  */
	--default-background-color: black;

	--font: var(--default-font);
	--font-size: var(--default-font-size);
	--font-color: var(--default-font-color);

	--background-color: var(--default-background-color);
	--log-background: var(--background-color);

	--selection-color: var(--background-color);
	--selection-background: var(--font-color);

	--prompt-before-content: "";
	--prompt-after-content : "";

	--prompt-before-margin-left: 0px;
}

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

/*Easy Classes*/
.hArray {
	flex-direction: row;
}

/*Animations*/

/* Loading */
@keyframes loadingAni
{
	0% {
		transform: rotateZ(0deg);
	}

	50% {
		transform: rotateZ(360deg);
		box-shadow: none;
	}
}

@keyframes shineAni
{
	0% {
		box-shadow: none;
	}

	50% {
		box-shadow: 0 0 0.5em 0.5em var(--font-color);
	}
}

.loading
{
	animation: loadingAni 6s ease-in-out 0s infinite normal both;
}

.shine
{
	animation: shineAni 3s ease-in-out 0s infinite normal both;
}

.loadingDiv
{
	width: 1em;
	height: 1em;
	top: 0.2em;
	left: 0.8em;
	position: absolute;
	transform: rotateZ(0deg);
}

.loadingDot
{
	width: 0.39em;
	height: 0.39em;
	background-color: var(--font-color);
	border-radius: 50%;
}

.blink {
	animation-name: blink;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes blink {	
	0% {
		opacity: 1;
		transform: scale(1);
	}
	
	50% {
		opacity: 1;
		transform: scale(3);
	}
	
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes typeWriter {
	0% {
		width: 100%;
	}

	100% {
		width: 0%;
	}
}

@keyframes codeReveal {
	0% {
		opacity: 0;
		transform: scale(1.5);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(1.5em);
	}

	100% {
		opacity: 1;
		transform: translateY(0em)
	}
}

@keyframes rightBlurOut {
	0% {
		opacity: 0;
		filter: blur(1em);
		transform: translateX(5em);
	}

	100% {
		opacity: 1;
		filter: blur(0em);
		transform: translateX(0em);
	}
}

.hShake {
	animation-name: hShake;
	animation-duration: 0.25s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.vShake {
	animation-name: vShake;
	animation-duration: 0.25s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes hShake {
	0% {
		transform: translateX(0em);
	}

	25% {
		transform: translateX(0.5em);
	}

	50% {
		transform: translateX(-0.5em);
	}

	75% {
		transform: translateX(0.5em);
	}

	100% {
		transform: translateX(0em);
	}
}

@keyframes vShake {
	0% {
		transform: translateY(0em);
	}

	25% {
		transform: translateY(0.5em);
	}

	50% {
		transform: translateY(-0.5em);
	}

	75% {
		transform: translateY(0.5em);
	}

	100% {
		transform: translateY(0em);
	}
}

.rotate {
	
	transform-origin: center;
	animation-name: rotate;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-timing-function: linear;
}

@keyframes rotate {	

	0% {
		/* color: red; */
		transform: rotate(0deg);
	}

	25% {
		/* color: yellow; */
	}
	
	50% {
		/* color: purple; */
		
	}

	75% {
		/* color: orange; */
		
	}
	
	100% {
		/* color: red; */
		transform: rotate(360deg);
	}
}

/* EASY CLASSES */

.displayNone {
	display: none !important;
}

.noWrap {
	/* mobile */
	white-space: nowrap;
}

/*Blue Print*/

* {
	/* border: 0.1em solid transparent; */
	font-family: var(--font);
	/* transition: all 0.25s, font-size 0s; */
}

body {
	background-color: var(--background-color);
	
	height: 100vh;
	padding: 0%;
	margin: 0%;
	
	color: var(--font-color);
	font-size: var(--font-size);
	
	display: flex;
	flex-direction: column;

	/* background-image: url('./assets/saturn.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed; */
}

#terminal {
	padding: 1em 1.25em;
}

#logsDiv {
	border: none;
}

.log,
.prompt {
	/* margin-top: 0.5em;
	margin-bottom: 0.5em; */
	padding-bottom: 0.5em;
	display: flex;
	align-items: stretch;
	align-content: stretch;
	
	gap: 1em;
	z-index: 1;
}

.prompt {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	margin: 0em -1em;
	padding: 0em 1em;
	padding-bottom: 0.5em;

	background-color: transparent;
	backdrop-filter: blur(1em);
	-webkit-backdrop-filter: blur(1em);

	z-index: 2;
}

.logSpan,
.promptSpan {
	color: var(--font-color);
	background-color: transparent;
	font-size: var(--font-size);
	margin: 0%;
	padding: 0%;
	border: none;
	flex-grow: 0;
	transform: scale(1);
	word-wrap: anywhere;

	display: flex;
	align-self: center;
}

.promptIcon:hover { cursor: pointer !important; }
.promptIcon::selection { background-color: transparent; color: inherit; }

.promptInput {
	color: var(--font-color);
	background-color: transparent;
	outline: none;
	border: none;
	font-size: var(--font-size);
	margin: 0%;
	padding: 0%;
	flex-grow: 1;
	caret-color: var(--font-color);
	display: flex;
	align-self: center;
}

.promptInput::selection {
	background-color: var(--selection-background);
	color: var(--selection-color);
}

/* .logIcon,
.promptIcon {
	writing-mode: vertical-rl;
	text-orientation: upright;
} */

.logSpanMessage::after {
	background-color: var(--log-background);
	color: var(--log-background);

	/* background-color: var(--background-color);
	color: var(--background-color); */
	
	width: 100%;
	height: 100%;
	
	position: fixed;
	right: 0;
	content: "|";
	padding-left: 0.2em;
	margin-right: -0.2em;

	animation-name: typeWriter;
	animation-fill-mode: both;
	animation-duration: 0.5s;
	animation-delay: 0s;
}

.prompt::before, 
.prompt::after {
	background-color: transparent;
	color: var(--font-color);

	opacity: 0.5;

	display: flex;
	align-items: center;
	justify-content: center;
	
	font-size: var(--font-size);
	
	padding: 0em;
	margin: 0em;

	position: absolute;
}

.prompt::before {
	content: var(--prompt-before-content);
	margin-left: var(--prompt-before-margin-left);
	/* will be determined by js -> margin-left */
	left: 0;
	z-index: -1;
}

.prompt::after {
	content: var(--prompt-after-content);
	right: 0;
	z-index: 2;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.logCode::-webkit-scrollbar {
	display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
.logCode {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.logCode {

	flex-direction: column;
	align-self: center;

	position: relative;
	
	padding: 0.5em;
	/* border: 0.1em dotted var(--font-color); */

	color: var(--font-color);
	background-color: transparent;

	max-height: 35vh;
	overflow-y: scroll;

	max-width: 100vw;
	min-width: 25vw;
	overflow-x: scroll;

	transition: all 0.25s;
	transform: scale(1);

	animation-name: codeReveal;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

.logPre {
	tab-size: 2.25em; 
	line-height: 1.75em;
	margin: 0;
}

.magenta {
	color: magenta;
}

.yellow {
	color: yellow;
}

.aqua {
	color: aqua;
}

.lime {
	color: lime;
}

/* JSON COLORS {{{}}} */
.color1, .color2, .color3 {
	color: var(--font-color);
}

.fullScreen {
	z-index: 5;
	position: fixed;
	top: 0;
	right: 0;
	padding: 2em;
	width: calc(100vw - 4em);
	height: calc(100vh - 4em);
	max-width: 100vw;
	max-height: 100vh;
	border-radius: none;
}

.fullScreenButton {
	display: none;
}

.codeControls {
	position: -webkit-sticky;
	position: sticky;
	display: flex;
	gap: 0.25em;
	flex-direction: row;
	justify-content: flex-end;
	background-color: transparent;
	
	top: 0em;
	left: 0em;
}

.codeControlButton {
	border: none;
	border-radius: 0.5em;
	font-size: medium;
	padding: 0.25em 0.5em;	
	background-color: transparent;
	
	backdrop-filter: blur(1em);
	-webkit-backdrop-filter: blur(1em);

	color: var(--font-color);
	background-color: transparent;

	transition: all 0.25s;
	transform: scale(1);
}

.codeControlButton:hover {
	cursor: pointer;
	color: var(--background-color);
	background-color: var(--font-color);
	/* background-color: rgb(50,50,50);
	color: white; */
}

.codeControlButton:active {
	transform: scale(1.3);
}

.audioLogSpan {
	display: flex;
	justify-content: center;
	align-items: center;

	animation: rightBlurOut 0.5s ease-in-out 1 both;
}

.audioLog .logIcon:hover {
	cursor: pointer;
}

.markdownLogPre
{
	white-space: pre-wrap;

	animation-name: slideUp;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

.markdownHeading
{
	margin: 0;
	text-transform: uppercase;
	font-weight: normal;
	font-size: var(--font-size);
}

.markdownLEFTBLOCK-1
{
	border-left: 1em solid;
	padding-left: 0.5em;
}

.markdownLEFTBLOCK-2
{
	border-left: 0.5em solid;
	padding-left: 0.5em;
}

.markdownUL
{
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.markdownSTRONG
{
	text-transform: uppercase;
	letter-spacing: 0.125em;
	font-style: bold;
}

.markdownSpacer
{
	height: 0.13em;
	display: block;
}