:root {
	--terminal-black: #000000;
	--terminal-red: #e6193c;
	--terminal-green: #01a252;
	--terminal-yellow: #c3c322;
	--terminal-blue: #01a0e4;
	--terminal-magenta: #e16a98;
	--terminal-cyan: #72d3e7;
	--terminal-white: #ffffff;
}

body {
	--site-font-size: 16px;
	--site-line-spacing: 2rem;
	--spacing-small: 4px;
	--spacing-large: 12px;
	--ascii-font-size: 8px;

	background-color: black;
	font-family: 'cascadia-mono', serif;
	color: var(--terminal-green);
	font-size: var(--site-font-size);
	line-height: var(--site-line-spacing);
}

@media only screen and (min-width: 768px) {
	body {
		--site-font-size: 20px;
		--site-line-spacing: 2.5rem;
		--spacing-small: 8px;
		--spacing-large: 24px;
		--ascii-font-size: 12px;
	
		background-color: black;
		font-family: 'cascadia-mono', serif;
		color: var(--terminal-green);
		font-size: var(--site-font-size);
		line-height: var(--site-line-spacing);
	}

	.pwd > .prompt {
		display: flex;
		width: 95%;
	}

	input[type=text] {
		flex: 1;
	}
}

#matrix-canvas {
	width: 100%;
	height: 100%;
}

.prompt, .response, #intro-response {
	margin-left: 2%;
	margin-right: 2%;
}

.ascii-banner {
	margin-top: var(--spacing-large);
	margin-left: 2%;
	margin-right: 2%;
	font-size: var(--ascii-font-size);
	line-height: 0.5em;
}

.love {
    margin-left: 2%;
    margin-right: 2%;
    line-height: 0em;
}

.ascii-banner > pre {
	font-family: 'dos-font' !important;
}

.pwd, .response, #intro-pwd {
	margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
}

.options {
	margin-top: var(--spacing-large);
}

#footnote {
	margin-left: 2%;
	margin-right: 2%;
	margin-top: var(--spacing-large);
}

.highlight {
	color: var(--terminal-blue)
}

.text-highlight {
	color: var(--terminal-magenta);
}

.prompt-username {
	color: var(--terminal-yellow)
}

.prompt-arrow {
	color: var(--terminal-green)
}

.prompt-directory {
	color: var(--terminal-cyan)
}

.hidden {
	display: none;
}

.visible {
	display: block;
}

.hyperlink {
	color: inherit;
	text-decoration: none;
}

span.user-command {
	color: var(--terminal-white);
	margin: 0%;
	padding: 0%;
}

span.animated:after {
	content:"|";
	color: var(--terminal-white);
	font-size: var(--site-font-size);
	font-weight: 900;
	opacity: 0;
	margin: 0%;
	animation: cursor 500ms infinite;
}

#splash {
	color: var(--terminal-white);
	height: 100%;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 2%;
}

#init-cursor {
	color: var(--terminal-white);
}

#terminal {
	width: 100%;
	height: 100%;
}

input[type=text] {
	border: none;
	background-color: transparent;
	font-family: 'cascadia-mono', serif;
	transition: width 0.5s;
	text-transform: lowercase;
	font-size: var(--site-font-size);
	color: var(--terminal-white);
	text-shadow: 0 0 0 transparent;
}

input[type=text]:focus {
	border: none;
	background-color: transparent;
	min-width: 0px;
	outline: 0;
}

input[type=text]:hover {
	cursor: default;
}

span.remove-anim:after {
	content: none;
}

@keyframes cursor {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background-color: #000000;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #232323; 
}