@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');

a {
	text-decoration: none;
	color: currentColor;
}

body {
	margin: auto;
	max-width: 500px;
	padding: 0px 16px;
	font-family: 'Roboto Mono', monospace;
}

body p {
	color: rgb(76, 76, 76);
}

hr {
	opacity: 0.4;
	border-width: 0.3px;
}

section {
	margin-bottom: 50px;
}

.big-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 3em;
}

.highlighted {
	color: black;
}

.link {
	color: black;
}

@media (prefers-color-scheme: dark) {
	body p {
		color: rgb(143, 143, 143);
	}
}

@media (hover: none) {
	.link {
		text-decoration: underline;
		text-decoration-thickness: 1.2px;
		text-underline-offset: 3px;
	}
}

@media (hover: hover) {
	.link {
		position: relative;
		white-space: nowrap;
	}
	
	.link::before {
		content: "";
		position: absolute;
		width: 95%;
		height: 1.2px;
		bottom: -1px;
		left: 0;
		right: 0;
		margin: 0 auto;
		background-color: black;
		visibility: visible;
		transform: scaleX(1);
		transition: all 0.2s ease-out 0s;
	}
	
	.link:hover::before {
		visibility: hidden;
		transform: scaleX(0);
	}
	
	a:hover > .link::before {
		visibility: hidden;
		transform: scaleX(0);
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: black;
		color: #ccc;
	}
	.link {
		color: currentColor;
	}
	.link::before {
		background-color: currentColor;
	}
	.highlighted {
		color: #ccc;
	}
	img {
		opacity: 0.9;
	}
}