@font-face {
    font-family: 'trashhandregular';
    src: url('../webfonts/TrashHand-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'note_thisregular';
    src: url('../webfonts/Note_this-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'blokletters';
    src: url('../webfonts/Blokletters-Balpen-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'blokletters';
    src: url('../webfonts/Blokletters-Potlood-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'blokletters';
    src: url('../webfonts/Blokletters-Viltstift-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'handleeregular';
    src: url('../webfonts/handlee-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'schoolbellregular';
    src: url('../webfonts/Schoolbell-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@property --bgAnimA {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}

@property --bgAnimB {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 2.5%;
}

@property --bgAnimC {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 5%;
}

*, *::before, *::after {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

:root {
	interpolate-size: allow-keywords;
	--fontDefault: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html {
	font-family: var(--fontDefault);
}

body {
	--bgAnimA: 0%;
	--bgAnimB: 2.5%;
	--bgAnimC: 5%;
    min-height: 100vh;
    margin: 0px;
	background: repeating-conic-gradient(#ffdbdb var(--bgAnimA) var(--bgAnimB), #ffeae8 var(--bgAnimB) var(--bgAnimC));
	padding-block: 1rem;
	animation: animbackground 4s infinite linear;
}

@keyframes animbackground {
	100% {
		--bgAnimA: 5%;
		--bgAnimB: 7.5%;
		--bgAnimC: 10%;
	}
}

div.kaart {
    margin: 0 auto;
    width: min(calc(100% - 2rem), 1000px);
    box-shadow: 0px 1px 3px #000;
	padding: 1rem;
	position: relative;
	background: #fff;
}

h1 {
	position: relative;
    background: url(../images/bannermidden.png);
    background-size: 100% 100%;
    width: fit-content;
    padding-inline: 1%;
	padding-block: 1em 0.25em;
	margin: 0 auto 1rem auto;
	font-family: 'note_thisregular';
	font-size: 1.75rem;
}

h1::before {
    position: absolute;
    width: 3em;
    height: 100%;
    background: url(../images/bannerlinks.png);
    background-size: 100% 100%;
    content: "";
    left: -3em;
    top: 0px;
}

h1::after {
    position: absolute;
    width: 3em;
    height: 100%;
    background: url(../images/bannerrechts.png);
    background-size: 100% 100%;
    content: "";
    right: -3em;
    top: 0px;
}

table {
	width: 100%;
	margin-top: 1rem;
	position: relative;
	isolation: isolate;
}

th {
    font-family: 'trashhandregular';
    font-size: 1.5rem;
}

td {
	font-family: 'handleeregular';
	font-size: 1.25rem;
}

table input[type=text],
table input[type=email],
table input[type=tel] {
	font-family: 'blokletters';
	font-weight: 500;
	font-size: 1rem;
	/* border-bottom: 2px solid #888; */
	background-image: linear-gradient(transparent calc(1.5rem - 1px), #ccc 1px);
    background-size: 1.5rem 1.5rem;
	width: 100%;
}

table textarea {
	font-family: 'blokletters';
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5rem;
	min-height: 4.5rem;
	background-image: linear-gradient(transparent calc(1.5rem - 1px), #ccc 1px);
    background-size: 1.5rem 1.5rem;
	width: 100%;
	overflow: clip;
	field-sizing: content;
}

input[type="submit"] {
    background: url(../images/button.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 1rem 4rem;
    font-family: 'trashhandregular';
    font-size: 2rem;
	cursor: pointer;
}

input[type="submit"]:hover {
    filter: brightness(1.25);
}

.center {
	text-align: center;
}

.paddingtop {
	padding-top: 1rem;
}

.content {
    display: grid;
    padding-block: 1rem;
}

@media screen and (min-width: 900px) {
	.content {
		grid-template-columns: 1fr min(100%, 600px);
	}
}

.rollator {
    background: url(../images/rollator.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

div.tekst {
	font-family: 'schoolbellregular';
	font-size: 1.5rem;
	position: relative;
}

@media screen and (max-width: 899px) {
	div.tekst::before {
		content: '';
		inset: 0px;
		position: absolute;
		background: url(../images/rollator.png);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: contain;
		opacity: 0.15;
	}
}

.slingerlinks,
.slingerrechts {
    position: absolute;
    background: url(../images/slinger.png);
    height: 7rem;
    width: 10rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    top: 0px;
    left: 0px;
}

.slingerrechts {
	left: unset;
	right: 0px;
	scale: -1 1;
}


table::before {
    position: absolute;
    content: '';
    width: 3rem;
    height: 8rem;
    background: url(../images/ballon1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    right: 0px;
    top: -2rem;
	pointer-events: none;
}

.audio {
    margin: 0 auto 1rem;
    width: fit-content;
	display: grid;
	grid-template-columns: auto auto auto;
	align-items: center;
	gap: 1rem;
}

.audio .button {
    width: 2rem;
    height: 2rem;
    background-image: url(../images/play.png);
    background-repeat: no-repeat;
    background-size: contain;
	cursor: pointer;
}

.audio div:nth-last-child(2),
.audio div:last-child {
	scale: -1 1;
}

.audio.playing .button {
    background-image: url(../images/pause.png);
}

.audio .bananadancing,
.audio.playing .banana {
	display: none;
}

.audio.playing .bananadancing {
	display: block;
}

.banana img,
.bananadancing img {
	height: 3rem;
}