:root {
	--dark-primary-color: #3f3f3f;
	--light-primary-color: #ffffff;
	--accent-color: #ff3f00;
}

/* Font Faces */
@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-LightItalic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
}

/* Font styles */
.font-bold {
	font-weight: 700;
}

.font-light {
	font-weight: 300;
}

/* Base styles */
body,
html {
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "JetBrains Mono", monospace, sans-serif, serif;
	font-weight: 400;
}

#network-icon {
	width: 5rem;
	height: 5rem;
}

.bi {
	/* fill: var(--dark-primary-color); */
	fill: var(--accent-color);
}

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

.lead {
	color: var(--accent-color);
	font-size: min(3em, 4vw);
}

.target-word {
	font-size: min(10em, 12.5vw);
	font-weight: 700;
	margin: 0 5vw;
}

.info-box {
	border-radius: 0.5rem;
	border: 0.2rem solid var(--dark-primary-color);
	margin: 0.5rem 1rem;
	padding: 1rem;
	text-align: justify;
	width: min(80%, 40rem);
}

/* Light theme */
body {
	background-color: #ffffff;
	color: #3f3f3f;
}

@media (prefers-color-scheme: dark) {
	/* Dark theme */
	body {
		background-color: #000000;
		color: #ffffff;
	}

	/* .bi-hdd-network {
		fill: var(--light-primary-color);
	} */

	.info-box {
		border-color: var(--light-primary-color);
	}
}

/* Responsive adjustments */
@media (max-width: 600px) {
}