@import url("./evergarden.css");

::-webkit-scrollbar {
	width: 0.5rem;
	height: 6px;
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: hsla(var(--overlay1) / 1);
	border-radius: 3px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

:root {
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--ease-springier: cubic-bezier(0.25, 2.2, 0.5, 1);
	--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

	--transition-properties:
		margin, grid-template-rows, grid-template-columns, stroke-dasharray,
		stroke-dashoffset, outline-color, outline-offset, color, background-color,
		box-shadow, outline, border-color, border-radius, font-weight, opacity,
		transform, backdrop-filter, text-decoration-color, filter, scale, height;
	--transition-duration: 0.2s;
	--transition: var(--transition-duration) var(--ease);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

body {
	color: hsl(var(--text));
	font-family:
		"Google Sans Flex",
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
	background-color: hsl(var(--surface0));
	/*font-family: monospace;*/
	font-size: 15px;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-weight: normal;

	scrollbar-width: thin;
	scrollbar-color: hsla(var(--overlay1) / 1) transparent;

	-webkit-tap-highlight-color: transparent;
	outline: 2px solid;
	outline-offset: 2px;
	outline-color: hsla(var(--blue) / 0);

	transition-property: var(--transition-properties);
	transition-duration: var(--transition-duration);
	transition-timing-function: var(--ease);
}

*:focus-visible {
	outline-color: hsl(var(--blue));
	z-index: 5;
}

::selection {
	background-color: hsla(var(--overlay0) / 1);
	color: hsl(var(--accent));
}

.links {
	display: inline-flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 0.25rem;
}

a,
.link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;

	border-radius: 0.5rem;
	padding: 0.25rem 1rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	will-change: transform;

	background: hsla(var(--surface1) / 1);

	&::after {
		content: attr(data-text) / "";
		font-weight: 900;
		height: 0;
		visibility: hidden;
		overflow: hidden;
		user-select: none;
		pointer-events: none;
	}

	&:focus-visible,
	&:hover {
		font-weight: 900;
		background: hsl(var(--accent));
		color: hsl(var(--base));

		&:active {
			background: hsla(var(--accent) / 0.75);
		}
	}
}

nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		flex: 1;

		a {
			flex: 1;
		}
	}
}