@font-face {
  font-display: swap;
  font-family: 'Noto Sans Symbols 2';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/noto-sans-symbols-2-regular.woff2');
}

:root {
	--star_color_a: #FFFFFFAA;
	--star_color_b: #DDFFFFEE;
	--star_color_c: #FFCCEEEE;
}

body:not(.card) {
	background:
		radial-gradient(circle at 83% 93%, var(--star_color_b) 0, transparent 0.58%) fixed,
		radial-gradient(circle at 93% 53%, var(--star_color_b) 0, transparent 0.91%) fixed,
		radial-gradient(circle at 21% 24%, var(--star_color_b) 0, transparent 0.45%) fixed,
		radial-gradient(circle at  9% 66%, var(--star_color_b) 0, transparent 0.79%) fixed,
		radial-gradient(circle at 63% 10%, var(--star_color_c) 0, transparent 0.86%) fixed,
		radial-gradient(circle at 55% 86%, var(--star_color_b) 0, transparent 0.37%) fixed,
		radial-gradient(circle at 11% 76%, var(--star_color_c) 0, transparent 0.58%) fixed,
		radial-gradient(circle at  9% 33%, var(--star_color_a) 0, transparent 0.51%) fixed,
		radial-gradient(circle at 19% 78%, var(--star_color_b) 0, transparent 0.43%) fixed,
		radial-gradient(circle at 33% 58%, var(--star_color_a) 0, transparent 0.97%) fixed,
		radial-gradient(circle at 24% 31%, var(--star_color_c) 0, transparent 0.96%) fixed,
		radial-gradient(circle at 95% 59%, var(--star_color_c) 0, transparent 0.57%) fixed,
		radial-gradient(circle at 14% 15%, var(--star_color_c) 0, transparent 0.70%) fixed,
		radial-gradient(circle at 59% 24%, var(--star_color_a) 0, transparent 0.44%) fixed,
		radial-gradient(circle at 52%  3%, var(--star_color_b) 0, transparent 0.58%) fixed,
		radial-gradient(circle at 37% 36%, var(--star_color_a) 0, transparent 0.48%) fixed,
		radial-gradient(circle at 15% 17%, var(--star_color_b) 0, transparent 0.42%) fixed,
		radial-gradient(circle at 27% 91%, var(--star_color_b) 0, transparent 0.71%) fixed,
		radial-gradient(circle at 52% 63%, var(--star_color_a) 0, transparent 0.50%) fixed,
		radial-gradient(circle at 50%  8%, var(--star_color_a) 0, transparent 0.42%) fixed,
		radial-gradient(circle at 74% 65%, var(--star_color_a) 0, transparent 0.72%) fixed,
		radial-gradient(circle at 18% 64%, var(--star_color_c) 0, transparent 0.58%) fixed,
		radial-gradient(circle at 63%  8%, var(--star_color_b) 0, transparent 0.42%) fixed,
		radial-gradient(circle at 52% 28%, var(--star_color_a) 0, transparent 0.80%) fixed,
		radial-gradient(circle at 72% 39%, var(--star_color_a) 0, transparent 0.65%) fixed,
		radial-gradient(circle at 96% 57%, var(--star_color_b) 0, transparent 0.38%) fixed,
		radial-gradient(circle at 43% 22%, var(--star_color_b) 0, transparent 0.48%) fixed,
		radial-gradient(circle at 49% 63%, var(--star_color_b) 0, transparent 0.60%) fixed,
		radial-gradient(circle at  8%  5%, var(--star_color_a) 0, transparent 0.77%) fixed,
		radial-gradient(circle at 30% 92%, var(--star_color_c) 0, transparent 0.49%) fixed,
		radial-gradient(circle at 43% 60%, var(--star_color_a) 0, transparent 0.54%) fixed,
		radial-gradient(circle at  6%  8%, var(--star_color_b) 0, transparent 0.52%) fixed,
		radial-gradient(circle at 29% 13%, var(--star_color_c) 0, transparent 0.84%) fixed,
		radial-gradient(circle at 46% 81%, var(--star_color_a) 0, transparent 0.47%) fixed,
		radial-gradient(circle at 77% 72%, var(--star_color_a) 0, transparent 0.40%) fixed,
		radial-gradient(circle at  8% 59%, var(--star_color_c) 0, transparent 0.42%) fixed,
		radial-gradient(circle at 49% 30%, var(--star_color_a) 0, transparent 0.35%) fixed,
		radial-gradient(circle at 62% 27%, var(--star_color_b) 0, transparent 0.81%) fixed,
		radial-gradient(circle at 95% 40%, var(--star_color_c) 0, transparent 0.88%) fixed,
		radial-gradient(circle at 73% 48%, var(--star_color_c) 0, transparent 0.63%) fixed,
		radial-gradient(circle at 52% 68%, var(--star_color_c) 0, transparent 0.67%) fixed,
		radial-gradient(circle at 24% 67%, var(--star_color_b) 0, transparent 0.41%) fixed,
		radial-gradient(circle at 26%  7%, var(--star_color_c) 0, transparent 0.91%) fixed,
		radial-gradient(circle at 43% 62%, var(--star_color_b) 0, transparent 0.48%) fixed,
		radial-gradient(circle at 96%  6%, var(--star_color_a) 0, transparent 0.60%) fixed,
		radial-gradient(circle at 30% 24%, var(--star_color_b) 0, transparent 0.54%) fixed,
		radial-gradient(circle at 72% 39%, var(--star_color_b) 0, transparent 0.95%) fixed,
		radial-gradient(circle at 34% 35%, var(--star_color_b) 0, transparent 0.36%) fixed,
		radial-gradient(circle at 22% 43%, var(--star_color_b) 0, transparent 0.39%) fixed,
		radial-gradient(circle at 53% 63%, var(--star_color_a) 0, transparent 0.59%) fixed,
		black;

	background-size: 200px 200px;
	background-position: center;

	min-width: 100vw;
	min-height: 100vh;
	margin: 0;
}

body {
	font-family: 'Noto Sans', sans-serif;
	color: #e0e0e0;
}

#card_container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.card:not(body) {
	background: #77777744;
	display: block;
	width: min(50rem, calc(100vw - 5rem));
	padding: 1rem;
	margin: 2rem;
	border-width: 2px;
	border-color: #FFFFFFAA;
	border-style: solid;
	position: relative;
	text-decoration: none;
}

.card {
	--color: white;
	--glow-strength: 50%;
}

a.card h3, button.card h3 {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.card:first-child {
	margin-top: 5rem;
}

.card *, header * {
	color: var(--color);
	text-shadow: 0 0 3px rgb(from var(--color) r g b / var(--glow-strength));
}

small {
	--glow-strength: 20%;
}

.card p {
	font-size: 1.5rem;
	text-align: justify;
	margin: 1rem 0 0 0;
}

.card a {
	--color: cornflowerblue;
	--glow-strength: 100%;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
	margin: 0 0 1rem 0;
	display: inline;
}

.card h1 {
	--color: #FFAAAA;
	font-size: 2.5rem;
	--glow-strength: 100%;
}

.card h2 {
	--color: #FFFFAA;
	font-size: 2rem;
	--glow-strength: 100%;
}

.card h3 {
	--color: #AAFFAA;
	font-size: 2rem;
	--glow-strength: 70%;
}

.card tag::before {
	content: " · ";
}

.card tag {
	--color: #AAAAAA;
	font-size: 1.5rem;
}

.card .data {
	--color: #AAFFAA;
	--glow-strength: 100%;
	--glow-strength: 100%;
}

.title.card {
	max-width: min(50rem, calc(100vw - 5rem));
	width: auto;
	margin: 1rem;
}

.title.card * {
	margin: 0;
}

header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: min(2rem, 3vw);
	font-size: min(2rem, 4vw);

	padding-top: 1rem;

	width: 100vw;
	height: 5rem;

	--color: cornflowerblue;

}

.buttoncontainer {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

#card_container {
	container-name: card_container;
	container-type: inline-size;
}

iframe.card {
	max-height: 50rem;
}

input, textarea {
	background: #000000AA;
	border-width: 0;
	border-radius: 0.5rem;
	padding: 0.2rem;
	font-size: 1.25rem;
}

@container card_container (max-width: 500px) {
	.card p {
		font-size: 1rem;
	}

	.card h1 {
		font-size: 2rem;
	}

	.card h2 {
		font-size: 1.5rem;
	}

	.card h3 {
		font-size: 1.5rem;
	}

	.card tag {
		font-size: 1rem;
	}
}

pre code {
	display: block;
	width: calc(100% - 2rem);
	background: #000000AA;
	padding: 1rem;
	border-radius: 0.5rem;
	margin: 1rem 0 1rem 0;
	overflow-x: scroll;
}

code {
	background: #000000AA;
	padding: 0.1rem;
	--glow-strength: 40%;
	font-size: 1.25rem;
	text-wrap: nowrap;
	font-family: 'Noto Sans Mono';
}

.hljs-title,
.hljs-name {
	--color: #FFFFAA;
	--glow-strength: 75%;
}

.hljs-comment,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-punctuation {
	--color: #AAAAAA;
	--glow-strength: 50%;
}

.hljs-number,
.hljs-symbol,
.hljs-literal,
.hljs-deletion,
.hljs-link {
	--color: #FFAAAA;
	--glow-strength: 75%;
}

.hljs-string,
.hljs-doctag,
.hljs-addition,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo {
	--color: #AAFFAA;
	--glow-strength: 75%;
}

.hljs-code,
.hljs-selector-id {
	--color: #FFAAFF;
	--glow-strength: 75%;
}
/*color: fg_blue*/
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-bullet,
.hljs-tag > .hljs-attr {
	--color: #AAAAFF;
	--glow-strength: 20%;
}
/*color: fg_aqua*/
.hljs-subst,
.hljs-template-tag,
.hljs-template-variable {
	--color: #AAFFFF;
	--glow-strength: 100%;
}
/*color: fg_orange*/
.hljs-type,
.hljs-built_in,
.hljs-quote,
.hljs-section,
.hljs-selector-class {
	--color: #FFCCAA;
	--glow-strength: 50%;
}
.hljs-emphasis {
	font-style: italic
}
.hljs-strong {
	font-weight: bold
}