@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300');

:root {
	--bodyColor: hsl(0, 0%, 65%);
	--bodyBgColor: hsl(0, 0%, 0%);
	
	--highlightYellowBgColor: rgba(255, 255, 0, 0.2);
	--detailsBorderColor: rgb(50, 50, 50);
	--detailsOddBgColor: rgb(30, 30, 30);
	--detailsEvenBgColor: rgb(22, 22, 22);
	--spoilerBgColor: rgb(55, 22, 22);
	--qBgColor: rgba(255, 255, 255, 0.15);
	--linkColor: #009900;
	--linkHoverColor: #00cc00;
	--linkHoverBgColor: rgb(50, 5, 50);

	--introBgColor: rgb(0, 20, 30);
	--announceColor: rgb(220, 80, 80);
	--asideColor: hsl(0, 0%, 45%);

	--indentAmt: 0.25in;
}

* {
	color: var(--bodyColor);
}
body {
	background-color: var(--bodyBgColor);
}
a {
	color: var(--linkColor);
	font-family: "Source Code Pro", monospace;
	text-decoration: none;
}
a:hover {
	color: var(--linkHoverColor);
	text-shadow: 0 0 2px var(--linkHoverColor), 0 0 5px var(--linkHoverColor);
}
h1 {
	margin-block-end: 0.5rem;
}
aside {
	padding-inline: 1rem;
}
aside,
aside em {
	color: var(--asideColor);
}
details {
	border: 1px solid var(--detailsBorderColor);
	border-radius: calc(0.25*var(--indentAmt));
	padding-inline-start: var(--indentAmt);
	margin-inline-start: 0;
}
details > summary {
	margin-inline-start: calc(-1*var(--indentAmt));
}
.problem-part summary {
	background-color: var(--spoilerBgColor);
}
summary:hover {
	cursor: pointer;
}
details,
details details details,
details details details details details,
details details details details details details details,
details details details details details details details details details {
	background-color: var(--detailsOddBgColor);
}
details details,
details details details details,
details details details details details details,
details details details details details details details details,
details details details details details details details details details details {
	background-color: var(--detailsEvenBgColor);
}
q {
	background-color: var(--qBgColor);
}
.underline {
	text-decoration: underline;
}
.indent {
	margin-inline-start: var(--indentAmt);
}
ol, ul {
	padding-inline-start: var(--indentAmt);
}
.problem-section details {
	margin-block: 0.5rem;
}
.year-objective,
.problem-section details > summary {
	font-weight: bold;
}
pre, svg {
	display: inline-block;
	padding: calc(0.25*var(--indentAmt)) calc(0.5*var(--indentAmt));
	border-radius: calc(0.25*var(--indentAmt));
	background-color: var(--bodyBgColor);
}
img {
	border-radius: calc(0.25*var(--indentAmt));
}
/* list-style-type: symbols(cyclic '•' '◦' '▪' '▫' '▸' '▹' '⋄' '⁃'); */
ul {
	list-style-type: disc;
}
ul ul {
	list-style-type: circle;
}
ul ul ul {
	list-style-type: square;
}
ul ul ul ul {
	list-style-type: '▫';
}
ul ul ul ul ul {
	list-style-type: '▸';
}
ul ul ul ul ul ul {
	list-style-type: '▹';
}
ul ul ul ul ul ul ul {
	list-style-type: '⋄';
}
ul ul ul ul ul ul ul ul {
	list-style-type: '⁃';
}

p {
	margin-block: 0.5em;
}
.highlight-yellow {
	background-color: var(--highlightYellowBgColor);
	padding: 0.25rem 0.125rem;
	margin-inline: 0.125rem;
}
.announcement {
	color: var(--announceColor);
}
.star {
	font-family: "Source Code Pro", monospace;
	color: #ffff66;
  text-shadow: 0 0 5px #ffff66;
}
.introduction {
	border-radius: calc(0.25*var(--indentAmt));
	border: 1px solid var(--detailsBorderColor);
	padding-inline: calc(0.5*var(--indentAmt));
	background-color: var(--introBgColor)
}
sub,
sup {
	font-size: 0.55em;
}
.tiny-note {
	font-size: small;
}
.year-objective-p {
	font-size: larger;
}
.side-by-side {
	display: flex;
	flex-direction: row;
	gap: calc(0.5*var(--indentAmt));
}
.v-max {
	max-height: 20rem;
}
.v-scroll {
	overflow-y: auto;
}