@font-face {
    font-family: ZillaRegular;
    src: url(../fonts/ZillaSlab-Regular.woff2);
}
@font-face {
    font-family: ZillaRegular;
    font-style: italic;
    src: url(../fonts/ZillaSlab-Italic.woff2);
}
@font-face {
    font-family: ZillaMedium;
    src: url(../fonts/ZillaSlab-Medium.woff2);
}
@font-face {
    font-family: ZillaMedium;
    font-style: italic;
    src: url(../fonts/ZillaSlab-MediumItalic.woff2);
}
@font-face {
    font-family: CalibriWoff;
    src: url(../fonts/Calibri-Bold.woff2);
}

html {
	background: #423e3f;
}
body {
	font-family: ZillaMedium;
	font-size: 14px;
	line-height: 1.35;
	margin: 0px;
	padding: 0px;
	background-color: #222;
		/* zelfde antraciet als achter logo */
	background: #423e3f;
	text-align: center;
	color: #eee;
	margin-bottom: 8em;
	min-height: 100vh;
		/* deze marges staan bij h1*/
	order-top: constant(safe-area-inset-top) solid #111;
	order-top: env(safe-area-inset-top) solid #111;
}
body::-webkit-scrollbar {
	display: none;
}

		@media only screen and (min-width: 500px) {
			body {
				font-size: 15px;
				font-family: ZillaRegular;
			}
		}
			// Een window aan de rechterkant op de laptop is 610px
		@media only screen and (min-width: 620px) {
			body {
				font-size: 16px;
			}
		}			
		@media only screen and (min-width: 700px) {
			body {
				font-size: 17px;
			}
		}			

@keyframes FadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes FadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

body {
		/* het is net alsof de animations rare dingen veroorzaken */
	nimation: 1s ease-out FadeIn;
	-webkit-nimation: 1s ease-out FadeIn;
}

h1, h2 {
	display: block;
	margin: 0;
	font-weight: normal;
	text-align: center;
		/* grijsblauw */
	background: #446677;
	color: #eeeeee;
	padding: 0.4em 0;
	border-top: constant(safe-area-inset-top) solid #446677;
	border-top: env(safe-area-inset-top) solid #446677;
}

h1 {
	font-size: 1em;
}
		@media only screen and (min-width: 500px) {
			h1 {
				font-size: 1.2em;
			}
		}			
		@media only screen and (min-width: 600px) {
			h1 {
				font-size: 1.3em;
			}
		}			
h2 {
	font-size: 1.15em;
}
.canvas-plus-tekst {
	display: block;
	margin-bottom: 20px;
	width: 100%;
	height: calc(100vw * 0.5 + 40px);
	max-height: calc(400px + 40px);
	margin-left: auto;
	margin-right: auto;
	background: #333;
		/* zelfde antraciet als achter logo */
	background: #423e3f;
	background: #111;
}
		@media only screen and (min-width: 500px) {
			.canvas-plus-tekst {
				height: calc(100vw * 0.5 + 70px)!important;
				max-height: calc(400px + 70px)!important;	
				}
		}			

.canvas-wrapper {
	display: block;
	position: relative;
	width: 100vw!important;
	height: calc(100vw * 0.5);
	max-width: 667px;
	max-height: 400px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	ackground: blue;
	ext-align: center;
	ackground: #369;	
}
canvas {
	display: block;
	position: absolute;
	width: 100vw!important;
	height: calc(100vw * 0.5)!important;
	max-width: 667px;
	max-height: 400px;
	left: 50%;
	transform: translate(-50%, 0);
	top: 0;
	margin-left: auto;
	margin-right: auto;
	ackground: #444;
}
.tekst-onder-canvas {
	display: block;
	osition: relative;
	color: #eee;
	width: 450px;
	max-width: 80%!important;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 1em!important;
	margin-bottom: 0px;
	height: 30px;
	ackground: blue;
}
.melding-gespiegeld {
	display: none;
	text-align: left;
	position: relative;
	top: -0.3em;
}
.melding-gespiegeld img {
	width: 1.1em!important;
	height: 1.1em!important;
	margin-left: 0.6em;
	margin-bottom: 0.6em;
	opacity: 0.5;
	border: 1px solid white;
}

.tekst {
		/* Er past maar 20em van 14pt op een iPhone */
	width: 40em!important;
	max-width: 95%;
	min-height: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	ackground: red;
}

.tekst p {
	margin-top: 1.4em;
}


/* ------------------------------- NAVIGATIE */

.navigatie {
	display: block;
	width: 100%;
	height:6em;
	osition: fixed;
	ottom: 0;
		/* grijsblauw */
	background: #423e3f;
	border-top: 0.01em solid #666; 
}

.link-naar-top {
	display: block;
	position: absolute;
	display: block;
	width: 120px;
	height: 200px;
	left: calc(50% - 60px);
		/*  dit is het logootje onder aan de pagina, tussen de knoppen 'terug' en 'verder' */
	background: url('../img/logo-zonder-letters.svg');
	background-repeat: no-repeat;
	background-size: 600px;
	background-position: 50.5% 0px;
	order: 1px solid white;
}

		@media only screen and (min-width: 500px) {
				.link-naar-top {
						background-size: 1100px;
						width: 160px;
						left: calc(50% - 80px);
				}
		}
		@media only screen and (min-width: 620px) {
				.link-naar-top {
						background-size: 1100px;
						width: 200px;
						left: calc(50% - 100px);
				}
		}


/* ---------------------------------------------------------------- KNOPPEN */
.knop, .next, .play-again, .back {
	font-family: ZillaMedium;
	line-height: 1.35;
	background: #446677;
	color: black;
	display: block;
	width: 9em;
	height: 1.55em;
	padding-top: 0.05em;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
	text-decoration: none;
	border: 2px solid #446677;
}

.knop:active, .next:active, .play-again:active, .back:active {
	border: 2px solid #aaa;
	background: #aaa;
	color: #111;
}
	
}
		@media only screen and (min-width: 500px) {
			.knop, .next, .play-again, .back {
				font-family: ZillaRegular;
			}
		}


.knop {
	width: 15em;
}

.knop, .next, .play-again, .back {
	ackground-color: #446677;
}

.play-again {
	width: 7em;
	margin-top: 0.5em;
}

.play-again:after {
	content: "Play again";
}

	/* ------------------------------------------- */

.back, .next {
	width: 5.2em;
	margin: 0;
	margin-top: 3em;
}

.back {
	float: left;
	margin-left: calc(50% - 9.5em);
}
.next {
	float: right;
	margin-right: calc(50% - 9.5em);
}

		@media only screen and (min-width: 500px) {
			.back {
				margin-left: calc(50% - 12em)!important;
			}
			.next {
				margin-right: calc(50% - 12em)!important;
			}
		}

.next {
	float: right;
	margin-right: calc(50% - 9.5em);
}
				
		}			


	/* ------------------------------------------- */
.back:after, .next:before {
	position: relative;
	top: 0.05em;
}
.back:after {
	content: "Back";
}
.next:before {
	content: "Next";
}

	/* ------------------------------------------- PIJL BIJ BACK EN NEXT*/
.back:before, .next:after {
	font: Zilla;
	content: "\2190";
	font-size: 1.3em;
	line-height: 1px;
	position: relative;
	top: 0.05em;
}
.back:before {
	content: "\2190";
	margin-right: 0.25em;
}
.next:after {
	content: "\2192";
	margin-left: 0.25em;
}

/* ------------------------------------------- */
.halve-regel {
	ine-height: 0.8em;
}

.pijltje {
	eight: 0.7em;
	osition: relative;
	op: 0.05em;
	argin-right: 0.1em;
}

/* ----------------------------------------------------------------- MAATSOORTEN */
.teller {
	position: relative!important;
	top: -0.1em!important;
}
.noemer {
	position: relative!important;
	top: 0.1em!important;
}
.slash:after {
	content: "/";
	font-size: 1.2em;
	line-height: 1;
	position: relative;
	top: 0.1em;
	margin-right: -0.04em;
}
.plus:after {
	content: "+";
	font-size: 1.3em;
	line-height: 1px;
	position: relative;
	top: 0.08em;
	margin-left: 0.03em;
	margin-right: 0.03em;
}

/* ---------------------------------------------------------------- NOTEN */
/*      noten maken met inkscape met marge 5                                 */

.noten-wrapper{
	display: block;
	height: 4em;
	ackground: #333;
	text-align: center;
	
	opacity: 0.8;
	margin-bottom: 2em;
	padding: 0;
}

.noten {
	width: 12em; 
}