@font-face {
  font-family: "PressStart";
  src: url("fonts/prstartk.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --terminal-green: #1bbc68;
}

body {
  font-family: "PressStart", monospace;
	margin: 0;
	padding: 0;
	background: black;
	font-size: 12px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.command-line-box {
  color: var(--terminal-green);
  border: solid;
  width: 45%;
  min-width: 600px;
  margin-top: 50px;
} 

.text-box {
  color: var(--terminal-green);
  border: solid;
  width: 45%;
  min-width: 600px;
  text-align: center;
  margin-top: 20px;
  opacity: 0;
  animation: fade-in 1s forwards;
  animation-delay: 2s;
}

pre {
  font-family: monospace;
  white-space: pre;
  text-align: start;
  display: inline-block;
  margin-inline: auto;
}

/* Base snow layer */
.snow,
.snow::after {
	position: fixed;
	top: 0;
	left: 0;
	background: transparent;
	box-shadow:
	10vw 20vh white,
	30vw 80vh white,
	50vw 40vh white,
	70vw 10vh white,
	90vw 60vh white,
	15vw 75vh white,
	25vw 30vh white,
	45vw 90vh white,
	65vw 55vh white,
	85vw 25vh white,
	95vw 95vh white,
	5vw 5vh white;
}

.snow::after {
	top: 100vh;
}

.snow.tiny {
	animation: falling 12s infinite linear;
	opacity: 0.9;
}

.snow.small {
	width: 2px;
	height: 2px;
	animation: falling 10s infinite linear;
	opacity: 0.9;
	margin-left: 314px;
}

.snow.medium {
	width: 3px;
	height: 3px;
	animation: falling 20s infinite linear;
	opacity: 0.9;
	margin-left: 150px;
}

.snow.large {
	width: 5px;
	height: 5px;
	animation: falling 28s infinite linear;
	opacity: 0.9;
	margin-left: 250px;
}

.terminal-cursor {
  animation: blink 1s infinite linear;
}

.terminal-title {
  display: flex;
  text-shadow: #BFFAB4 3px 0px 20px;
  margin-left: 20px;
  flex-direction: row;
}

.terminal-typing {
  width: 0;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  animation:
    typing 4.5s steps(35, end) forwards;
  animation-delay: 0.5s;
}

.socials {
  margin-top: 10xp;
  margin-bottom: 15px;
}

@keyframes falling {
	0%   { transform: translateY(-100vh) }
	100% { transform: translateY(100vh) }
}

@keyframes blink {
  0% { opacity: 1 }
  50% { opacity: 0.2 }
  100% { opacity: 1 }
}

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

@keyframes fade-in {
  to {
    opacity: 1;
  }
}