html,
body,
:root,
.root {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;

	overflow: hidden;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background-color: #000;
}

.section {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

h1 {
	color: #fff;
	font-family: "courier new", monospace;
	/* font-style: italic; */
	font-weight: 900;
	font-size: 50px;
}

.link {
	color: #fff;
	font-family: "courier new", monospace;
	font-weight: 900;
	font-size: 20px;
	/* no underline */
	text-decoration: none;

	margin-left: 100px;
	margin-right: 100px;
}

.icon {
	width: 100px;
	height: 100px;

	margin-left: 50px;
	margin-right: 50px;

	margin-top: 25px;
	margin-bottom: 50px;

	/* make them white instead of black */
	filter: invert(1);
}



/*:root {
	--font: "Lato", sans-serif;
	--font-light: "Lato-Light", sans-serif;
	--font-bold: "Lato-Bold", sans-serif;
	--font-wall-e: "Arial", sans-serif;
	--font-mono: "Courier New", Courier, monospace;
	--background-color-primary: #000;
	--foreground-color-primary: #fff;
	--text-color-primary: #006d09;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color-primary: #000;
		--foreground-color-primary: #fff;
	}
}

html,
body,
:root,
.root {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;

	overflow: hidden;

	background-color: var(--background-color-primary);
}

* {
	-moz-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.content {
	left: 2.5%;
	top: 2.5%;
	position: absolute;
	width: 95%;
	height: 95%;
}

.placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70%;
	width: 100%;
	color: var(--foreground-color-primary);
	font-family: var(--font-wall-e);
	font-weight: 900;
	font-size: 5rem;
}

.console {
	font-family: monospace;
	color: var(--text-color-primary);
	font-weight: 900;
	font-size: 20px;
}

.command {
	position: absolute;
	bottom: 10px;
}

.console-input {
	background-color: transparent;
	border: none;
	outline: none;
	width: 100%;

	color: var(--foreground-color-primary);
	font-family: var(--font-mono);
	font-weight: 900;
	font-size: 20px;
}

.console-input-pre {
	background-color: transparent;
	border: none;
	outline: none;
	width: 100%;

	color: var(--text-color-primary);
	font-family: var(--font-mono);
	font-weight: 900;
	font-size: 20px;
}

.button {
	font-family: monospace;
	color: var(--text-color-primary);
	font-weight: 900;
	font-size: 1.5rem;

	background: transparent;
	border: none;
}

.exp {
	visibility: hidden;
}

.blink {
	animation: blink 1s steps(1) infinite;
}

@keyframes blink {
	25% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}

	75% {
		opacity: 0.8;
	}
}

.art {
	font-family: monospace;
	color: var(--text-color-primary);
	font-weight: 900;
	font-size: 0.3rem;
	position: relative;
	left: 400px;
	bottom: 150px;
}

.console-output {
	margin-bottom: 100px;
}

.console-div {
	position: absolute;
	background: transparent;

	width: 100%;
	height: 100px;
	bottom: 0;
	top: auto;
}*/