@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Libre+Baskerville:wght@400;700&family=Roboto+Mono:wght@400;700&family=Fira+Code&display=swap");

@font-face {
	font-family: Monocraft;
	src: url("https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf");
}

:root {
	--primary-color: #030712;
	--secondary-color: #4ade80;
	--mix-color: color-mix(in srgb, var(--primary-color), var(--secondary-color) 70%);
	--background-opacity: 0.65;
	--hover-background-opacity: 0.55;
	--scroll-text-font: 'Roboto Mono', monospace;
	--max-width: 1000px;
	overscroll-behavior: none;
}

body {
	background-color: var(--primary-color);
	color: var(--secondary-color);
	margin: 0;
	padding: 0;
	transition: color 0.3s, background-color 0.3s;
}

a {
	color: var(--secondary-color);
	text-decoration: underline;
	font-weight: bold;
}

.blur-backdrop {
	background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

@keyframes scroll {
	to {
		transform: translateX(calc(-100% - 100px));
	}
}

@keyframes scroll-reversed {
	from {
		transform: translateX(calc(-100% - 100px));
	}

	to {
		transform: translateX(0);
	}
}