:root {
	--string-color: 206, 145, 120;
	--keyword-color: 86, 156, 214;
	--variable-color: 79, 193, 255;
	--class-color: 76, 193, 169;
	--method-color: 220, 220, 170;
	--parenthesis-color: 244, 206, 2;
}

code {
	font-family: 'Fira Code', monospace;
	font-weight: 500;
}

code.empty {
	height: 1rem;
}

.code-container {
	margin-top: 2vh;
	display: flex;
	justify-content: center;
}

.code-window {
	width: 33rem;
}

.code-line {
	display: block;
}

.keyword {
	color: #569CD6;
}

.variable {
	color: #4FC1FF;
}

.string, .string a {
	color: rgb(var(--string-color));
}

.string a {
	text-decoration: none;
}

.string a:focus {
	outline: none;
	background-color: rgba(var(--string-color), 0.2);
}

.string a:hover {
	text-decoration: underline;
	background-color: rgba(var(--string-color), 0.2);
}

.comment {
	color: #6A9955;
}

.class {
	color: #4CC1A9;
}

.method {
	color: #DCDCAA;
}

.parenthesis {
	color: #F4CE02;
}

@keyframes loading {
	0%, 80%, 100% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}

/* .introduction-text span { */
/* 	animation: loading 1.4s ease-in-out; */
/* } */

/**/

.introduction-text {
	& > .blink:first-child {
		animation: blinking 1s step-start infinite, hide 3s steps(1) forwards;
	}
	& > .d-block {
		width: 0;
		animation: typing 0.5s steps(20) forwards;
		overflow-x: hidden;
		overflow-y: hidden;
		word-break: break-all;
		height: 1.2em;
	}

  & .d-block:nth-child(2) { animation-delay: 3.1s; }
  & .d-block:nth-child(3) { animation-delay: 3.6s; }
  & .d-block:nth-child(4) { animation-delay: 4.0s; }
}

@keyframes hide {
	from { display: block; }
	to { display: none; }
}

@keyframes typing {
	from { width: 0; }
	to { width: 100%; }
}