@import url("https://hy.purplecheshire.net/hy.css");
@import url("https://hy.purplecheshire.net/hyacinth/fonts/ibm-plex-sans.css");

.hy {
	--main-color: #04f;
}

@media (prefers-color-scheme: light) {
	.hy {
		--sub-color: color-mix(in oklab, var(--main-color), white);
		--theme: white;
		--inverse: black;
		--text: black;
	}
}

@media (prefers-color-scheme: dark) {
	.hy {
		--sub-color: color-mix(in oklab, var(--main-color), black);
		--theme: color-mix(in oklab, black, var(--main-color) 20%);
		--inverse: white;
		--text: white;
	}

	.hy.button.action:hover {
		background-color: color-mix(in oklab, var(--main-color), var(--inverse));
		color: var(--theme);
	}

	.hy.button.action:active {
		color: color-mix(in oklab, var(--main-color), var(--inverse));
		background-color: color-mix(in oklab, var(--theme), var(--main-color));
	}
}

body.hy {
	background-color: var(--theme);
}

.big-banner::after {
	width: 100%;
	height: 23em;
	margin-top: -6em;
	content: "AAAAAAA";
	position: absolute;
	background-color: var(--sub-color);
	z-index: -10;
	mask-image: linear-gradient(calc(-90deg), white, white 50%, transparent 95%, transparent);
}

.override {
	min-width: 100%;
}

.hy.subcard {
	max-width: none;
	width: 97% !important;
}

code {
	width: 60% !important;
	background-color: #222;
	color: white !important;
	padding: 0.3em 0.6em;
	margin-inline: 0.3em;
	border-radius: inherit;
	box-shadow: 0px 3px 6px color-mix(in oklab, black, transparent);
	flex-wrap: nowrap;
	overflow-wrap: normal;
	overflow-x: scroll;
	word-wrap: normal;
	white-space: nowrap !important;

}

.description {
	width: 36% !important;
}