/* Custom HT(D)ML tags stylesheet, feel free to use it completely or parts of it (or whatever) */

.block { /* Necessary hack for <code>-tag overrides if they don't render as expected */
	display: block;
	width: fit-content;
}

a-q {
	font-style: italic;
}
answer-tag {
	color: var(--darkvslight);
}
b-i-q {
	font-weight: bolder;
	font-style: italic;
}
b-i-q::before {
	content: "\201C";
}
b-i-q::after {
	content: "\201D";
}
card-inner {
	display: inline-block;
	border: 1px solid var(--lightmax);
	border-radius: 10%;
	background-color: var(--dimlight);
	margin-top: 1em;
	padding: 2em;
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	font-style: italic;
	color: var(--darkest);
	font-weight: bold;
}
card-inner a:link {
	border: none;
}
card-tag {
	display: block;
	border-width: 0.3em 0.2em 0 0;
	border-style: outset outset none none;
	border-color: var(--darkest);
	border-top-color: var(--light);
	border-right-color: var(--evenlighter);
	border-radius: 25% 2% 0 0;
	width: fit-content;
	margin: 1.6em auto 1.6em auto;
	padding: 1.2em 1.2em 1.2em 1.6em;
	background-color: var(--evenlighter);
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	font-style: italic;
	font-size: 80%;
	font-weight: bold;
	box-shadow: 0 6px 8px var(--darkest);
}
card-tag a:link {
	border: none;
}
center-tag {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
contact-form {
	display: block;
	text-align: center;
	margin: auto;
	width: 90%;
	height: auto;
	padding: 1em;
}
contact-form textarea {
	width: 80%;
	height: 18em;
	border: 6px ridge var(--dimlight);
	border-radius: 5%;
	white-space: normal;
}
error-tag {
	display: inline-block;
	color:  var(--attention);
	text-decoration: wavy underline;
}
footnote-inner {
	display: block;
	border: 1px solid var(--lightmax);
	border-radius: 10%;
	background-color: var(--evenlighter);
	margin-top: 1em;
	padding: 2em;
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	font-style: italic;
	font-size: 90%;
	color: var(--darkest);
	font-weight: bold;
}
footnote-inner a:link {
	border: none;
}
footnote-shell {
	display: block;
	border-width: 0.3em 0.2em 0 0;
	border-style: outset outset none none;
	border-color: var(--darkest);
	border-top-color: var(--light);
	border-right-color: var(--evenlighter);
	border-radius: 25% 2% 0 0;
	width: fit-content;
	margin: 1.6em auto 1.6em auto;
	padding: 1.2em 1.2em 1.2em 1.6em;
	background-color: var(--lightmax2);
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	font-style: italic;
	font-size: 80%;
	font-weight: bold;
	box-shadow: 0 6px 8px var(--darkest);
}
footnote-shell a:link {
	border: none;
}
ha-ha-ha-😂-😂-😂 {
	font-weight: bold;
	color: var(--contrast);
}
list-item {
	display: list-item;
	text-align: -webkit-match-parent;
	unicode-bidi: isolate;
}
margin-top {
	display: block;
	margin-top: 8em;
}
my-strong-opinion {
	text-transform: uppercase;
}
ol-open {
	display: block;
	list-style-type: decimal;
	margin-block-start: 1em;
	margin-block-end: 1em;
	padding-inline-start: 40px;
	unicode-bidi: isolate;
}
ol-open list-item {
	display: list-item;
	margin-top: 1em;
}
ol-open-outstanding {
	display: block;
	list-style-type: none;
	margin-block-start: 1em;
	margin-block-end: 1em;
	padding-inline-start: 0; /* Verwijder de standaard padding */
	unicode-bidi: isolate;
	counter-reset: my-counter; /* Maak een nieuwe teller */
}
ol-open-outstanding list-item {
	padding-inline-start: 40px;
	margin-top: 1em;
	position: relative;
}
ol-open-outstanding list-item::before {
	content: counter(my-counter) ". ";
	counter-increment: my-counter;
	position: absolute;
	left: 0;
	color: var(--outstanding); /* Verander de kleur naar wat je wilt */
	font-weight: bold;
}
p-head {
	display: inline-block;
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	color: var(--outstanding);
	font-size: 120%;
	max-width: 90%;
	margin-top: 2em;
	font-weight: bold;
	overflow-wrap: break-word;
}
p-head-no-top {
	display: inline-block;
	font-family: Papyrus, "Segoe script", "Comic Sans MS", Calibri, sans-serif;
	color: var(--outstanding);
	font-size: 120%;
	max-width: 90%;
	font-weight: bold;
	overflow-wrap: break-word;
}
p-indent {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 4em;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
p-p {
	display: block;
	margin-top: 2em;
}
part-flex {
	display: flex;
}
part-grid {
	display: grid;
}
part-inner {
	display: block;
	width: fit-content;
	text-align: left;
	margin: auto;
}
part-shell, part-inner-shell, part-inner-shell2, part-inner-shell3 {
	display: block;
}
q-a {
	font-style: italic;
}
question-tag {
	color: var(--shoutcolor);
}
samp-block {
	display: block;
	width: fit-content;
	font-family: monospace;
	font-size: 100%;
	background-color: var(--lighter);
	padding: 0.2em 0.4em 0.2em 0.4em;
}
social-button {
	display: block;
	margin: 0 2em 0 0;
	border: 4px outset var(--verylight);
	border-radius: 10%;
	width: 150px;
	height: auto;
}
social-button:hover {
	border: 4px inset var(--dimlight);
}
social-button img {
	transform: translateY(0.2em);
}
special-square-button {
	display: block;
	margin: 0 auto 0 auto;
	border: 4px outset var(--verylight);
	border-bottom-width: 2px;
	border-radius: 5%;
	width: 172px;
	height: auto;
}
special-square-button:hover {
	border: 4px inset var(--dimlight);
	border-bottom-width: 2px;
}
special-square-button img {
	transform: translateY(0.1em);
}
tab-left {
	display: block;
	margin-left: 2.6em;
	box-sizing: border-box;
}
tab-right {
	display: block;
	margin-right: 2.6em;
	box-sizing: border-box;
}
text-inner, text-inner2 {
	display: inline;
}
text-inner a:link, text-inner2 a:link {
	border: none;
}
text-large {
	font-size: 140%;
}
ul-open {
	display: block;
	list-style-type: none;
	margin-block-start: 1em;
	margin-block-end: 1em;
	padding-inline-start: 40px;
	unicode-bidi: isolate;
}
ul-open list-item {
	display: list-item;
	margin-top: 1em;
}
var-attention {
	display: inline-block;
	margin-left: 0.2em;
	font-family: Consolas, "Lucida console", Monaco, Terminal, monospace;
	color: var(--lightmax);
	-webkit-text-stroke: 1px var(--attention);
	letter-spacing: 0.1em;
	font-size: 92%;
	transform: translateY(-0.05em);
}
varbg-mint {
	padding: 0 0.4em 0 0.4em;
	background-color: #ccffcc;
	color: black;
}
var-contrast {
	color: var(--contrast);
}
var-outstanding {
	display: inline-block;
	position: relative;
	top: -0.03em;
	color: var(--light);
	-webkit-text-stroke: 1px var(--outstanding);
	font-weight: bold;
	letter-spacing: 0.1em;
	font-size: 92%;
}
varbg-colorname {
	display: inline-block;
}
warning-tag {
	display: inline-block;
}
web-manifest {
	display: block;
	width: fit-content;
	border: 0.2em ridge var(--attention);
	border-radius: 4%;
	background-color: var(--evenlighter);
	color: var(--darkest);
	padding: 1.5em;
	margin: auto;
	font-size: 100%;
}
web-manifest a:link {
	border: none;
}