@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body{
	height: 100vh;
	background: linear-gradient(123deg,rgba(238, 174, 202, 1) 0%, rgba(181, 206, 219, 1) 70%, rgba(148, 187, 233, 1) 100%);
	
	color: #444;
	font-family: "Indie Flower";
	text-align: center;
}
canvas{
	cursor: pointer;
	display: block;
	margin: 0 auto;
}
button{
	cursor: pointer;
	padding: 5px 15px;
}
a{
	color: white;
	&:hover{ color: #f36 }
}
h1 {
	padding-top: 12px;
	text-shadow: 2px 2px 9px #903;
}
p{ 
	font-size: 2rem;
	font-weight: bold;
	text-shadow: 2px 2px 9px #69f;
	text-transform: uppercase;
}

.wrapper{ display: grid }
.wrapper canvas{
	grid-row: 1;
	grid-column: 1;
}
@keyframes fadeToTransparent {
	from { filter: blur(0) opacity(.6) }
	to { filter: blur(30px) opacity(0) }
}
.t{ animation: fadeToTransparent 1000ms forwards }
.o{ filter: blur(0) opacity(0) }