/*
Bubbles:
https://codepen.io/djoba/pen/pYVBPq
https://codepen.io/bajzarpa/pen/woYNXp
*/

*,*::before,*::after{box-sizing:border-box}

:root{
	--blauw:#4285F4;
	--rood:#DB4437;
	--geel:#F4B400;
	--groen:#0F9D58;
}

body{padding:0;margin:0;background: #234;font-family: arial,verdana;font-size: 5vw;color:#FFF7;text-align:center;line-height:1.5;}

h1{font-size: 1.5em;margin: 1em 0;color: #FFF;}
h2{font-size: 1.2em; font-family:courier new;color:#FFF9; margin-top:1em}
a{color:#FFF;}
p{color: #FFF7;margin: 1em 3em;text-align:left;}

svg{fill:currentColor;width: 1em;}

.tiles svg{width:1.5em;display:block;margin: 1em auto;}

.page{
	position:relative;
	max-width:800px;
	margin:auto;
	padding:0 0.5em;
	z-index:10;
}

h1.banner{
	margin:1em 0;
	font-size: 2em;
	font-weight: bold;
	color: #FFF3;
}

strong{
	color: #FFF9;
}

header svg{
	display:block;
	margin:0.5em auto;
	width:2em;
}

footer{
	padding: 1em 0;
	font-size: 1.2em
}

footer h1.banner{font-size:1em}

footer a{
	text-decoration: none;
	margin:0.5em;
}

footer a:hover{
	text-decoration: underline;
}

input, textarea{
	border:0;
	background:#FFF1;
	font-family:courier new;
	font-size:1em;
	font-weight:bold;
	color:#FFF8;
	outline:0;
	border-radius: 0.3em;
}
textarea{
	width:100%;
	padding: 1em;
}
input{
	padding: 0.5em 0;
	text-align:center;
	font-size:2em;
	width:100%;
}

.content-smaller{
	max-width:25em;
}

ul{
	display:inline-block;
	margin:1em auto;
	text-align:left;
}
li{
	margin:0.5em 0;
}

fieldset{
	border:solid 3px #FFF2;
	border-radius:0.5em;
	margin:1em 0;
}

q{font-style:italic;color:#FFF9;display:block;margin:1em 0}

.bubble{
	position:absolute;
	left:50vw;
	top:50vh;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	animation: blaat 90s infinite, blaat 90s;
	background: #FFF5;
	opacity:0.3;
}


.bubble:nth-child(3) {background-color: var(--blauw);opacity:0.1}
.bubble:nth-child(4) {background-color: var(--rood);opacity:0.1}
.bubble:nth-child(5) {background-color: var(--geel);opacity:0.3}
.bubble:nth-child(6) {background-color: var(--groen);opacity:0.3}

 @keyframes blaat {
	 10%{top:0;transform: scale(3)}
	 10%{opacity:0.1}
	 20%{top:75vh;left:10vw}
	 20%{opacity:0.2}
	 30%{top:90vh;left:50vw;transform:scale(1)}
	 30%{opacity:0.1}
	 40%{top:10vh;left:90vw;}
	 40%{opacity:0.2}
	 50%{top:0;left:70vw;transform:scale(2)}
	 50%{opacity:0.1}
	 60%{top:90vh;left:0vw;}
	 60%{opacity:0.2}
	 70%{top:25vh;left:75vw;}
	 70%{opacity:0.1}
	 80%{top:75vh;left:25vw;transform:scale(3)}
	 80%{opacity:0.2}
	 90%{top:75vh;left:75vw;}
	 90%{opacity:0.1}
}

/*
 @keyframes blaat {
	 10%{top:0;left:10vw;transform:scale(3);opacity:0.5}
	 20%{top:50vh;left:0;}
	 30%{top:90vh;left:50vw;transform:scale(1);opacity:1}
	 40%{top:10vh;left:90vw;}
	 50%{top:0;left:70vw;transform:scale(2);opacity:0.8}
	 60%{top:90vh;left:0vw;}
	 70%{top:25vh;left:75vw;}
	 80%{top:75vh;left:25vw;transform:scale(3);opacity:0.5}
	 90%{top:75vh;left:75vw;}
}
*/
@media (min-width: 800px) 
{
	body{font-size: 18pt;}
	.page{padding:0;}
}

.grid a svg:not(.selected svg, .active svg, :focus svg), q{animation: colorize 9s infinite}

.icon-keyboard,
.icon-textballoons,
.icon-drum,
.icon-brain{
	transform:scale(1.5);
}
.icon-orderedlist{
	transform:scale(1.2);
}