/*
Theme Name: Crap-o-theme
Author: Vasilis van Gemert
Author URI: https://vasilis.nl/
Description: Tailor made theme for the crap-o-meter
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
	--geel: #FFF021;
	--hover: red;
	--wit: white;
	--zwart: black;
	--color: var(--zwart);
	--page-margin: 5.555;
	--page-background: var(--wit);
	--border-width: .06em;
	--border: var(--border-width) solid var(--color);
	--link-color: blue;
	--visited-link-color: rebeccapurple;
	
}
@media (prefers-color-scheme: dark) {
	:root {
		--page-background: var(--zwart);
		--color: var(--wit);
		--border: var(--border-width) solid var(--color);
		--link-color: lightblue;
		--visited-link-color: violet;
	}
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
a:link {
	color: var(--link-color);
}
a:visited {
	color: var(--visited-link-color);
}
html {
	font-family: 'Open Sans', sans-serif;
	scroll-behavior: smooth;
	line-height: 1.618;
	color: var(--color);
	scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: calc( var(--page-margin) * 1vh) calc( var(--page-margin) * 1vw) ;
	background: var(--page-background);
	font-size: 1.2em;
}
@media (max-width: 30em) {
	body {
		font-size: 1em;
	}
}
h1, h2, h3, h4, h5 {
  font-weight: normal;
  text-wrap: balance;
}
h1 {
  font-size: 3.99758436em;
  font-size: clamp(1em, 8.7vh, 5.998em);
  rotate: 180deg;
  position: fixed;
  line-height: 1;
  border: var(--border);
  display: inline-block;
  padding: 1.8em .4em .4em;
  margin: 0 -.5em;
  writing-mode: vertical-rl;
  z-index: 4;
  height: 90vh;
  text-align: right;
}
h1:before {
  content: '';
  position: absolute;
  background-image: url(iconen/bol.svg);
  width: 1.8em;
  height: 1.9em;
  background-size: 1.8em 1.9em;
  rotate: 180deg;
  top: 0;
}
h1 > span {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
h1 span::before,
h1 span::after {
	--w: 2;
	content: '';
	position: absolute;
	border: var(--border);
	border-radius: .2rem;
	width: calc( var(--w) * 1rem );
	height: calc( var(--w) * 1rem );
	aspect-ratio: 1;
	left: calc( var(--w) * -.5rem );
	top: calc( var(--w) * -.5rem );
	background: var(--page-background);
	animation: blink 7s -6s infinite;
}
h1 span::after {
	left: auto;
	right: calc( var(--w) * -.5rem );
	animation-duration: 7.51s;
}
h1 span + span::before,
h1 span + span::after {
	top: auto;
	bottom: calc( var(--w) * -.5rem );
	animation-duration: 7.73s;
}
h1 span + span::after {
	animation-duration: 7.37s;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes blink {
		90%,95% {
			background: var(--page-background);
		}
		90.1%,93.5%,95.1%, 100%  {
			background: var(--geel);
		}
	}
}


main {
  margin-left: 18vh;
  display: flex;
  flex-direction: column;
  align-items: start;
  position: relative;
  container-type: inline-size;
  container-name: main;
  max-width: 30em;
  --border-width: calc( .3cqw + .3vh);
  --border: var(--border-width) solid var(--color);
}
@media (max-width: 50em) {
	h1 {
		position: relative;
		writing-mode: unset;
		rotate: 0deg;
		font-size: clamp(1em, 9.3vw, 3.99758436em);
		height: auto;
		padding: .4em 1.8em .4em .4em ;
	  }
	  h1:before {
		top: auto;
		right: -.2em;
		bottom: 0;
		rotate: 0deg;
	  }
	  main{
	   margin-left: 0; 
	  }
}


p, textarea {
	font: inherit;
	max-width: 35em;
}
form {
	width: 100%;
}
fieldset {
	border: var(--border);
	border-radius: .2rem;
	display: flex;
	flex-direction: column;
	max-width: 35em;
}
legend {
	font-size: 2em;
	border: var(--border);
	border-radius: .2rem;
	padding: .2em .3em;
	line-height: 1.2;
}
label, input {
	display: block
}
label {
	z-index: 1;
	display: flex;
	gap: .4rem;
	margin-left: -1.5em;
	margin-top: 1em;
	font-weight: bold;
}
label::before {
	--w: 1.8;
	content: '';
	border: var(--border);
	border-radius: .2rem;
	width: calc( var(--w) * 1rem );
	aspect-ratio: 1;
	background: var(--page-background);
	animation: blink 6s -5.7s infinite;
}
label:nth-of-type(2)::before {
	animation-delay: -5.5s;
}
label:nth-of-type(3)::before {
	animation-delay: -5.3s;
}
label:nth-of-type(4)::before {
	animation-delay: -5.1s;
}
label:nth-of-type(5)::before {
	animation-delay: -4.9s;
}

input, textarea, button {
	font: inherit;
	margin-block-end: 1em;
	border: var(--border);
	border-radius: .2em;
	padding: .3em;
	background: var(--page-background);
	color: var(--color);
}
input[type="file"] {
	width: 100%;
	font: inherit;
}
textarea {
	width: 100%;
	min-height: 10em;
	display: block;
}
fieldset button {
	margin-left: auto;
	padding: .2em .5em;
	background: var(--geel);
	cursor: pointer;
}
fieldset button:hover {
	background: var(--page-background);
}
fieldset *:focus-visible {
	background: var(--page-background);
	outline: var(--border-width) solid var(--geel);
	outline-offset: var(--border-width);
}
main footer {
	font-style: italic;
	font-size: .8em;
}

/* Range slider */

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: white; /* Otherwise white in Chrome */
  height: .6em;
  height: calc( var(--border-width) * 3 );
  padding: 0;
  border-radius: 0;
  margin-top: 1em;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: var(--border);
  height: 1.4em;
  width: 1.4em;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  border: var(--border);
  height: 1.4em;
  width: 1.4em;
  background: #ffffff;
  cursor: pointer;
  border-radius: 0;
}
input[type=range]:focus::-webkit-slider-thumb {
	outline: var(--border-width) solid var(--geel);
	background: var(--geel);
}
input[type=range]:focus::-moz-range-thumb {
	outline: var(--border-width) solid var(--geel);
	background: var(--geel);
}
output {
	font-size: .9em;
	font-style: italic;
	margin: -0.6em 0 1em;
}
.c2 { margin-left: 3%; }
.c3 { margin-left: 18%; }
.c4 { margin-left: 25%; }
.c5 { margin-left: 40.5%; }
.c6 { margin-left: 47%; }
.c7 { margin-left: 59%; }
.c8 { margin-left: 65%; }
.c9 { margin-left: 79%; }
.c10 { margin-left: auto; }

/* Inline Details */

.no-js p button {
	all: unset;
}
.js p button {
	background: var(--page-background);
	color: var(--color);
	margin: 0;
	border: none;
	padding: 0;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: .1em;
}
.js p button::after {
	content: ' ⏵';
}
.js p button.open::after {
	content: ' ⏷';
}
.js p button:hover {
	background: var(--geel);
	color: var(--zwart);
}
.js p button:focus-visible {
	background: var(--page-background);
	outline: var(--border-width) solid var(--geel);
}
.js .details {
	display: none;
	opacity: 0;
}
.js .details.open {
	display: inline;
	opacity: 1;
	background: var(--geel);
	animation: inlinedetails 2s forwards;
	font-style: italic;
}


/* Comments */
[id^="comment-"] {
	border: var(--border);
	background: var(--page-background);
	color: var(--color);
	display: flex;
	flex-direction: column;
	padding: 0 1rem 1rem;
	margin: 0 0 2rem;
}
[id^="comment-"] h3 {
	border: var(--border);
	background: var(--page-background);
	color: var(--color);
	margin: -1em 0 0;
	align-self: start;
	padding: 0 .3em;
}
[id^="comment-"] blockquote {
	background-image: url('iconen/chat.svg');
	background-repeat: no-repeat;
	background-size: 2em;
	margin: 0;
	padding: 0 0 0 3em;
	min-height: 3em;
}
[id^="comment-"] blockquote p {
	margin-top: 0;
}
[id^="comment-"].crap-o-3 blockquote,
[id^="comment-"].crap-o-4 blockquote {
	background-image: url('iconen/mic.svg');
}
[id^="comment-"].crap-o-5 blockquote,
[id^="comment-"].crap-o-6 blockquote,
[id^="comment-"].crap-o-7 blockquote {
	background-image: url('iconen/trash.svg');
}
[id^="comment-"].crap-o-8 blockquote,
[id^="comment-"].crap-o-9 blockquote,
[id^="comment-"].crap-o-10 blockquote {
	background-image: url('iconen/fire.svg');
}


@keyframes inlinedetails {
	0% {
		opacity: 0;
		color: var(--zwart);
		
	}
	25% {
		opacity: 1;
		background: var(--geel);
		color: var(--zwart);
	}
	100% {
		background: var(--page-background);
	}
}


@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(fonts/OpenSans-Bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/OpenSans-Regular.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/OpenSans-Italic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}