h1 {
color:var(--h1color);
font-size:1.6em;
text-shadow:1px 1px rgb(0 0 0 / 0);
letter-spacing:1px;
line-height:1.25;
text-wrap:balance;
margin:0 0 0.5em 0;
}
h2 {
color:var(--h2color);
font-size:1.4em;
text-shadow:1px 1px rgb(0 0 0 / 0);
line-height:1.5;
text-wrap:balance;
margin:0 0 1em 0;
}
h3 {
color:var(--h3color);
text-shadow:1px 1px rgb(0 0 0 / 0);
font-size:1.7em;
font-weight:400;
line-height:1.3;
text-wrap:balance;
margin:0 0 0.5em 0;
	@media screen and (max-width:900px) { font-size:1.2em; }
}
h4 {
color:var(--h4color);
text-shadow:none;
font-size:1.1em;
font-weight:400;
line-height:1.3;
text-wrap:balance;
margin:0;
	@media screen and (max-width:900px) { font-size:1.1em; }
}
h5 {
color:var(--h5color);
text-shadow:none;
font-size:1em;
font-weight:400;
line-height:1.3;
text-wrap:balance;
margin:0;
	@media screen and (max-width:900px) { font-size:1em; }
}

p {
color:var(--pcolor);
font-size:1.4em;
margin:0;
	@media screen and (max-width:900px) { font-size:1em; }
}

blockquote {
font-size:1.8em;
font-style:italic;
font-weight:700;
}

a {
color:var(--acolor);
/*text-shadow:1px 1px rgb(0 0 0 / .1);*/
transition:all 0.3s ease 0s;
}
a:link {
color:var(--acolor);
text-decoration-line:none;
text-decoration-color:var(--acolorhover);
}
a:visited {
color:var(--acolorvisited);
text-decoration-line:none;
text-decoration-color:var(--acolorvisited);
}
a:active {
color:var(--acolorhover);
text-decoration-line:none;
text-decoration-color:var(--acolorhover);
}
a:hover {
color:var(--acolorhover);
text-decoration-line:none;
text-decoration-color:var(--acolorhover);
}

hr {
width:100%;
height:1px;
background-color:var(--hrbgcolor);
margin:0.5rem 0;
border:none;
display:block;
}

b, strong, .strong {
font-weight:700;
}

i {
font-style:italic;
}

sup {
vertical-align:top;
font-size:80%;
}

img {
max-width:100%;
height:auto;
font-style:italic;
border:none;
}

ul {
list-style-position:outside;
padding:0;
margin:0.5rem 0 0 2rem;
}
li {
font-size:1em;
line-height:1.5;
	@media screen and (max-width:900px) { font-size:1em; }
}
li:before {
content: "";
}

table {
width:100%;
height:auto;
margin:0;
border-collapse:collapse;
display:block;
}
th {
padding:0;
}
td {
width:auto;
height:auto;
font-size:1em;
white-space:nowrap;
text-align:left;
border:none;
	@media screen and (max-width:900px) { white-space:normal; }
}

input, textarea, select {
color:rgb(0 0 0);
font-size:1em;
padding:0.5rem;
border:1px solid var(--inputbordercolor);
border-radius:5px;
background-color:rgb(255 255 255);
display:block;
}
input:hover, textarea:hover, select:hover {
border:1px solid var(--inputbordercolorhover);
transition:all .5s ease 0s;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
border:1px solid var(--inputbordercolorhover);
transition:all .5s ease 0s;
}
input:user-valid {
border:1px solid var(--inputbordercolorhover);
}
input:user-invalid {
border:1px solid var(--alertcolor);
}
input[type=number] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-webkit-appearance:none;
}
textarea {
min-height:1lh;
field-sizing:content;
}
input[type="checkbox"], input[type="radio"] {
width:auto;
height:auto;
padding:0;
margin:0 0.5ch 0 0;
vertical-align:baseline;
border:none;
background-color:none;
display:inline-block;
}
label {
color:var(--maincolor);
}
:hover + label {
color:var(--maincolorhover);
cursor:pointer;
}
:checked + label {
color:var(--maincolorhover);
cursor:pointer;
}

::placeholder {
color:var(--placeholdercolor);
}

button, .button {
position:relative;
width:auto;
max-width:100%;
height:auto;
color:var(--buttoncolor);
text-shadow:1px 1px rgb(0 0 0 / .1);
font-size:1rem;
line-height:1;
text-decoration:none;
text-align:center;
text-transform:uppercase;
white-space:pre-wrap;
letter-spacing:1px;
padding:1.25rem;
text-box:trim-both cap alphabetic;
margin:0 0 0 auto;
background-color:var(--buttonbgcolor);
background-image:var(--buttonbgimage);
border:none;
border-radius:6px;
cursor:pointer;
display:block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
transition:all .5s ease 0s;
}
a.button {
color:var(--buttoncolor);
text-decoration:none;
}
a.button:link {
color:var(--buttoncolor);
text-decoration:none;
}
a.button:active {
color:var(--buttoncolor);
text-decoration:none;
}
a.button:visited {
color:var(--buttoncolor);
text-decoration:none;
}
button:hover, .button:hover, button:focus-visible, .button:focus-visible {
text-decoration:none;
color:var(--buttoncolorhover);
background-color:var(--buttonbgcolorhover);
background-image:var(--buttonbgimagehover);
}

.buttonklein {
font-size:0.8em;
text-transform:none;
padding:0.25rem;
}
.textbutton {
position:relative;
width:auto;
height:auto;
color:var(--maincolor) !important;
text-shadow:none;
font-size:1em;
letter-spacing:0;
text-transform:none;
background:transparent;
border:none;
padding:0;
margin:0;
transition:all .5s ease 0s;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
transition:all .5s ease 0s;
}
.textbutton:hover {
color:var(--maincolorhover);
text-shadow:none;
background:none;
cursor:pointer;
}

.soundbutton {
width:2rem;
height:2rem;
background:transparent;
border:none;
background-image:url("../graphics/sound-off.png");
background-position:center;
background-size:2rem 2rem;
background-repeat:no-repeat;
}
.soundbutton:hover, .soundbutton-on {
background-image:url("../graphics/sound-on.png");
cursor:pointer;
}

.terug {
text-align:left;
display:block;
}
.pijl {
position:relative;
width:auto;
height:auto;
font-size:80%;
line-height:1.2;
text-decoration:none;
vertical-align:middle;
border:none;
background:none;
display:inline-block;
}
.pijlklein {
font-size:80%;
}
.pijlmini {
font-size:60%;
}
.pijldown {
font-size:1em;
transform:rotate(90deg);
}
.pijlup {
color:var(--alertcolor);
font-size:2em;
line-height:1;
text-decoration:none;
vertical-align:baseline;
transform:rotate(-90deg);
transition:all .5s ease 0s;
display:inline-block;
}
.pijlup:hover {
color:var(--alertcolorhover);
text-decoration:none;
cursor:pointer;
}

.alert, a.alert {
color:var(--alertcolor) !important;
text-shadow:1px 1px rgb(0 0 0 / .1);
}
.alert:hover, a.alert:hover { color:var(--alertcolorhover) !important; }
.alert-border {
color:var(--alertcolor) !important;
text-shadow:none !important;
border:1px solid var(--alertcolor) !important;
}
.alert-border::placeholder {
color:var(--alertcolor) !important;
text-shadow:1px 1px rgb(255 255 255 / .1) !important;
}
.wit, .text-wit {
color:rgb(255 255 255 / .9) !important;
text-shadow:1px 1px rgb(0 0 0 / .1) !important;
}
.zwart, .text-zwart {
color:rgb(0 0 0 / .9) !important;
text-shadow:none !important;
}
.grote-tekst {
font-size:1.25em;
}
.kleine-tekst {
font-size:0.75em;
}