style.css

:root {
    font-family: "Fira Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--font-clr);
    hyphens: auto;
	
	--fst-clr-bg: #f1f5ff;
	--fst-clr-weak: #97b6f0;
    --fst-clr: #6E98E8;
    --snd-clr-weak: #ecb1a2;
    --snd-clr: #DC755C;

    --font-clr: #4B4E6D;
	/*--bg-clr: #F9F4F5;*/ --bg-color: #F3F3F3;
}

linked {
	display: block;
}

h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor {
	opacity: 1;

}

.spoiler {
    width: max-content;
    inline-size: fit-content;
	display: inline;
    padding: 0 0.1rem;
	color: #f9f9f9;
	background-color: #f9f9f9;
}

.spoiler:hover {
	color: var(--font-clr);
    transition-property: color;
    transition-duration: 0.2s;
}

.spoiler > input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden;
}

.spoiler > label {
    cursor: pointer;
}

input:checked + label{
	color: var(--font-clr);
}

summary .heading {
	border-bottom: none;
}

.font-fira-code {
	font-family: 'Fira Code', monospace;
}

/* 9. Footer */

.links > * {
    display: flex;
    color: inherit;
}
.links > * + *::before {
    content: "|";
    display: block;
    margin-left: 0.5em;
    margin-right: 0.5em;
    color: var(--font-clr);
}