:root {
	--fg: #f8f8f2;
	--bg: #1e1e1e; /* if you're using a dark background variable */
	--ansi-green: #50fa7b; /* Command line green */
	--ansi-cyan: #8be9fd; /* `Help` line cyan */
	--ansi-yellow: #f1fa8c; /* Projects list yelllow */
	--ansi-purple: #bd93f9; /* Banner purple */
	--ansi-blue: #326ec4; /* Folder structure blue */
	--light-grey: #d3d3d3; /* Hint element grey */
	--warning-amber: #f0ad4e; /* For waning text */
	--error: #ff5555; /* `Command not found:` red */
	
}

/* ANSI color classes */
.ansi-green { color: #50fa7b; }
.ansi-cyan { color: #8be9fd; }
.ansi-yellow { color: #f1fa8c; }
.ansi-purple { color: #bd93f9; }
.ansi-blue { color: #326EC4; }
.light-grey { color: #d3d3d3; }
.error { color: #ff5555; }
.warning { color: f0ad4e }
  
 /* Basic reset */
  
 * { box-sizing: border-box; }
  
 html, body { height: 100%; margin: 0; background-color: #1e1e1e; }

 body {
	margin: 0;
	color: var(--fg, #f8f8f2);
	font-family: 'Fira Code', monospace;
	font-size: 16px;
	height: 95vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	box-sizing: border-box;
	border: 2px solid #50fa7b; /* terminal green border near edges */
	border-radius: 6px; /* subtle rounding */
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
 }

p { text-indent: 12px; }

strong { color:var(--ansi-purple, #bd93f9); font-weight: bold; }

a { color: #8be9fd; text-decoration: underline; }
a:hover { text-decoration: underline 3px; }

.warning { color: var(--warning-amber); }

#orientation-bar {
/*
	position: absolute;
*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #282a36;
	color: var(--fg, #f8f8f2);
	font-family: 'Fira Code', monospace;
	font-size: 14px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--ansi-green, #50fa7b);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 101;
}

#terminal {
	background-color: var(--bg, #1e1e1e);
	max-width: 900px;
	width: 100%;
	height: 90vh; /* Use a fixed height relative to viewport */
	overflow-y: auto;
	padding: 1rem 2rem;
	font-family: 'Fira Code', monospace;
	color: var(--fg, #f8f8f2);
/*
	box-sizing: border-box;
*/
	display: block;
}

#banner-container {	overflow-x: auto; padding-bottom: 1rem; }

#banner {
	white-space: pre;
	color: var(--ansi-purple, #bd93f9);
	font-weight: bold;
	font-size: clamp(10px, 3vw, 18px);
/*    font-size: clamp(12px, 3vw, 20px); */
	line-height: 1.1;
	margin: 0;
}

#banner-container .ansi-cyan { 
	font-size: clamp(12px, 3vw, 20px);
	line-height: 1.1;
}
  
.hint {
	font-style: italic;
	font-size: 0.9rem;
	color: var(--light-grey, #d3d3d3);
}

#output { 
/*
	min-height: 150px; 
*/
	margin-bottom: 1rem; 
}
  
/* Static file-content */

.file-content blockquote {
	margin: 1em 0;
	padding: 0.75em 1em;
	padding-left: 1.25em;
	border-left: 4px solid var(--light-grey, #d3d3d3);
	background-color: #282a36;
	color: var(--fg, #f8f8f2);
	font-style: italic;
}

.file-content q { color: var(--ansi-purple); }

.file-content fieldset, .file-content code {
	display: block;
	border: none;
	border-radius: 8px;
	padding: 1em;
	background-color: #282a36;
	font-family: monospace;
	font-size: 0.9rem;
	margin: 25px auto;
}

.file-content legend {
	background-color: #282a36;
	font-size: inherit;
	font-weight: bold;
	padding: 0 0.5em;
	border: 1px solid var(--light-grey, #d3d3d3);
	border-radius: 4px;
}

.file-content pre {
font-size: inherit;
	overflow-x: auto;
	word-break: break-word;
	white-space: pre-wrap;
	margin: 0;
}

.file-content .copy-btn {
	float: right; 
/*	margin-top: -2.2em; */
	background: #282a36;
	color: var(--ansi-cyan, #8be9fd);
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
}

/* Command output elements */

.ansi-yellow b { /* command `projects` folder names */
	font-weight: bold;
	color: var(--ansi-yellow, #f1fa8c);
}
  
.ansi-yellow i { /* command `projects` description */
	font-style: italic;
	color: var(--fg, #f8f8f2);
}
  
.help b { color: var(--ansi-cyan, #f8f8f2); }
	
.line { white-space: pre-wrap; }

.prompt { color: #50fa7b; margin-right: 0.5ch; }

.input-line { display: flex; align-items: center; margin-bottom: 25px; }

input {
	background-color: transparent !important;
	border: none;
	border-bottom: 2px solid var(--ansi-green, #50fa7b);
	outline: none;
	max-width: 50%;
	color: var(--fg, #f8f8f2);
	caret-color: #f8f8f2; /* makes sure it's visible */
	font-family: inherit;
	font-size: inherit;
	flex-grow: 1;
}

/* Remove input autofill background in Firefox and Chromium browsers */
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-internal-autofill-selected {
		box-shadow: 0 0 0px 1000px transparent inset !important;
		-webkit-text-fill-color: var(--fg, #f8f8f2) !important;
		transition: background-color 9999s ease-in-out 0s;
}

/* Style the grey vertical scroll bar in Chromium browsers */

#terminal::-webkit-scrollbar { width: 8px;}
#terminal::-webkit-scrollbar-track { background: #1e1e1e;} /* same as terminal bg */
#terminal::-webkit-scrollbar-thumb {
	background-color: #444;      /* dark thumb */
	border-radius: 4px;
	border: 2px solid #1e1e1e;   /* creates spacing around thumb */
}
#terminal::-webkit-scrollbar-thumb:hover { background-color: #666;} /* slightly lighter on hover */


/* Cursor element is commented out on the pages*/

/*
.cursor {
	width: 10px;
	height: 1em;
	background: var(--fg, #f8f8f2);
	margin-left: 2px;
	animation: blink 1s steps(1) infinite;
}
@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
*/
 
 /* Scroll to top button */

#scrollTopBtn {
	display: none;  /* Hidden by default */
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100;
	background-color: var(--ansi-green, #50fa7b);
	color: #1e1e1e;
	border: none;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 18px;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.3s ease;
}

#scrollTopBtn:hover { opacity: 1; } 

  /* Responsive tweaks */
@media (max-width: 780px) {
	body { padding: 0.5rem; }
	#terminal { max-width: 100%; }
	#banner { font-size: clamp(10px, 5vw, 16px); }
	.ansi-cyan { font-size: clamp(10px, 5vw, 16px)!important; }
	h1 { font-size: 1.7em; }
	h2 { font-size: 1.2em; }
	h3 { font-size: 1.1em; }
}
  
@media (max-width: 680px) {
	#banner { font-size: clamp(10px, 5vw, 12px); }
	/*.prompt, #output { font-size: clamp(10px, 5vw, 12px); }*/
	.ansi-cyan: { font-size: clamp(10px, 5vw, 16px)!important; }
	h1 { font-size: 1.3em; }
}
  
@media (max-width: 540px) {
	#banner { font-size: clamp(8px, 5vw, 10px); }
	.file-content fieldset { font-size: 0.8rem!important; }
/*
	.prompt, #output { font-size: clamp(10px, 5vw, 12px); }
	.ansi-cyan { font-size: clamp(8px, 5vw, 12px)!important; }
	.hint { font-size: 0.7rem; }
*/
}

@media (max-width: 400px) {
/* Removes the top bar on the pages as it breaks on the small viewport */
	#orientation-bar { display: none!important; }
	#terminal { margin-top: 15px!important; }
}

@media (max-width: 380px) {
	#banner { font-size: clamp(7px, 4vw, 8px); }
	h1 { font-size: 1em; }
/*
	.prompt, #output { font-size: clamp(8px, 4vw, 10px); }
	.ansi-cyan { font-size: clamp(8px, 5vw, 12px)!important; }
	.hint { font-size: 0.7rem; }
*/
}