@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

@font-face {
	font-family: Inter;
	src: url(/assets/Inter.ttf);
}

@font-face {
	font-family: Rubik;
	src: url(/assets/Rubik.ttf);
}

body {
	font-family: 'Inter';
	font-weight: 400;
	background-color: #000000;
	color: #ffffff;
	font-size: 10pt;
	display: flex;
	flex-direction: column;
	align-items: center;
}

pre {
	font-family: 'Source Code Pro';
}

h1,
h2,
h3,
p {
	margin: 0;
	height: fit-content;
}

a {
	cursor: crosshair;
}

@media (max-width: 768px) {
	.gradient {
		font-size: 300%;
	}

	.w-141 {
		width: 100%;
		max-width: 400px;
	}
}

.gradient {
	font-family: Rubik;
	font-weight: bold;
	font-size: 400%;

	background: linear-gradient(0deg, #ffff9fce 0%, #ffffff 75%, #ffffff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	width: 100%;
	text-align: center;
}

h1.gradient {
	text-transform: uppercase;
}

.smaller {
	font-size: 150%;

	@media (max-width: 768px) {
		font-size: 100%;
	}
}

.less-smaller {
	font-size: 300%;

	@media (max-width: 768px) {
		font-size: 200%;
	}

	@media (max-width: 480px) {
		font-size: 150%;
	}

	@media (max-width: 400px) {
		font-size: 130%;
	}
}

.code {
	background-color: #2b323e;
	font-family: 'Source Code Pro';
	padding: 2px 8px;
	border-radius: 6px;
	margin-right: 8px;
}

#page-list {
	padding: 0;
	margin: 0;
	font-size: 150%;
	width: fit-content;
}

#page-list > dd:not(:last-child) {
	margin-bottom: 8px;
	margin-left: 0;
}

#page-list-container {
	display: flex;
	justify-content: center;
}

code {
	background-color: #2b323e;
	font-family: 'Source Code Pro';
	padding: 2px 8px;
	border-radius: 6px;
}