@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Major+Mono+Display&display=swap');

:root {
	--main-bg-color: rgb(32, 62, 74);
	--white-smoke: rgb(237, 224, 204);
	--glacier-gray: rgb(197, 198, 199);
	--glacier-gray-transparent: rgba(197, 198, 199, 0.1);
	--onyx: rgb(44, 40, 44);
	--moonlight-ocean: rgb(42, 59, 78);
	--evening-blue: rgba(42, 41, 62, 0.8);
	--summer-green: rgb(121, 211, 129);
}

html, body {
	height: 100%;
}

body {
	font-family: 'Cutive Mono', monospace;
	font-weight: normal;
	font-style: normal;

	height: 93%;
	width: 70%;
	background-color: var(--main-bg-color);

	

	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
}

header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;

	color: var(--white-smoke);
}

header .header-container {
	background-color: var(--glacier-gray-transparent);


	padding-left: 1em;
	width: 100%;

	border-bottom-width: 1px;
	border-bottom-color: var(--white-smoke);
	border-bottom-style: solid;

	border-style: solid;
	border-color: var(--white-smoke);
	border-radius: 5px;
	border-width: 1px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

header h1 {
	text-transform: uppercase;

	margin-bottom: 0.5em;
}

header p {
	font-style: italic;
}

main {
	background-color: var(--evening-blue);
	height: 80%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	margin-left: auto;
	margin-right: auto;

	border-style: solid;
	border-width: 1px;
	border-color: var(--white-smoke);
	border-radius: 5px;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-top: none;

	padding-left: 1em;
	padding-right: 1em;

	color: var(--white-smoke);

	overflow: scroll;
}

main .content {
	width: 100%;
}

main .prompt-container {
	
}

main .prompt::before {
	color: var(--summer-green);
	font-weight: bold;
	content: "guest@alexbardasu.com:/ > ";
}

main .prompt .input {
	font-family: 'Cutive Mono', monospace;
	font-size: large;
	background: none;
	color: var(--white-smoke);

	width: 50%;
	/*padding-left: 1em;*/

	border: none;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--white-smoke);
}

main .prompt .input:focus {
	outline: none;

	border: none;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--white-smoke);
}

.hidden {
	display: none;
}

ul li span {
	padding-right: 2em;
}

ul li span::after {
	content: ": ";
}

ul li a {
	color: var(--white-smoke);
}

.output-sep hr {
	border-style: dashed;
	border-color: var(--white-smoke);
}

.cmd-output p.type,
.job-entry p,
.edu-entry p {
	--duration: 0.5s;
	--order: 0;

	width: 0;
}

.cmd-output p.type,
.job-entry p,
.edu-entry p {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid transparent; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  /*margin: 0 auto;  Gives that scrolling effect as the typing happens */
  /*letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing var(--duration) steps(40, end) calc(var(--order) * var(--duration));
  animation-fill-mode: forwards;
}

.cmd-output ul li > p.type {
	margin-top: 0;
	margin-bottom: 0;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--summer-green); }
}