@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(
		135deg,
		#ff3333 0%,
		#ffeaea 25%,
		#ff3333 50%,
		#ffeaea 75%,
		#ff3333 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	width: fit-content;
	flex-shrink: 1;
	text-align: center;
}

.seasonal_outline {
	/* off-season: outline-4 outline-neutral-800 */
	/* outline: 4px solid oklch(26.9% 0 0); */

	/* candy cane outline */
	border: 8px solid transparent;
	border-radius: 24px;
	position: relative;

	background: linear-gradient(oklch(20.5% 0 0), oklch(20.5% 0 0)) padding-box,
		/* candy cane stripes */
			repeating-linear-gradient(
				45deg,
				#ff3333 0,
				#ff3333 10px,
				#ffeaea 10px,
				#ffeaea 20px
			)
			border-box;

	/* glow */
	box-shadow: 0 0 12px 2px rgba(255, 80, 80, 0.3);
}

.seasonal_outline::after {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 24px;
	pointer-events: none;

	/* 3D depth effect - inner highlight, outer shadow */
	box-shadow:
		/* outer edge shadow (bottom-right) */ inset -2px -2px 4px
			rgba(0, 0, 0, 0.5),
		/* inner edge highlight (top-left) */ inset 2px 2px 4px
			rgba(255, 255, 255, 0.3);
}

.seasonal_fill {
	border-radius: 12px !important;
	background: repeating-linear-gradient(
		45deg,
		#ff3333 0,
		#ff3333 10px,
		#ffeaea 10px,
		#ffeaea 20px
	);
	box-shadow: 0 0 12px 2px rgba(255, 80, 80, 0.3);
	position: relative;
}

.seasonal_fill::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 12px;
	pointer-events: none;
	box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.5),
		inset 2px 2px 4px rgba(255, 255, 255, 0.3);
}

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;
}