* {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: #111;
	color: #fefefe;
	font-family: 'Fontdiner Swanky', cursive;
	-webkit-font-smoothing: antialiased;
}

p {
	font-family: Helvetica, Arial, sans-serif;
}

.puzzle {
	background: linear-gradient(hsl(360, 98%, 36%), hsl(360, 92%, 42%)), url(https://www.toptal.com/designers/subtlepatterns/patterns/white_plaster.png);
	background-blend-mode: multiply;
	width: 90vw;
	max-width: 700px;
	box-shadow:
		0 .25em 1em 0 rgba(0,0,0,0.30),
		inset .25em .25em 1em 0 hsl(360, 88%, 72%),
		inset .15em .15em .2em 0 hsl(360, 88%, 72%),
		inset -.25em -.25em 1em 0 hsl(360, 88%, 22%),
		inset -.15em -.15em .2em 0 hsl(360, 88%, 2%);
	border-radius: 1.2em;
	padding: 1.4em;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: .5em;
	position: relative;
	overflow: hidden;
}

.puzzle::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40%;
	transform: rotate(-15deg) scale(2);
	background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.12));
}

.puzzle > * {
	z-index: 1;
}

.grid {
	border: 2px solid hsl(360, 98%, 12%);
	grid-column-end: span 3;
	display: grid;
	grid-gap: 2px;
	grid-template-areas:
		"A B C"
		"D E F"
		"G H I";
	background: hsl(360, 98%, 12%);
	box-shadow:
		inset 0 0 2em 0 hsl(360, 98%, 2%);
}

.tile,
.answer {
	height: 0;
	padding-bottom: 100%;
	grid-area: var(--area, auto);
	border: none;
	background: url(1.jpg);
	background-size: 300%;
}

.tile {
	cursor: pointer;
}

.tile--empty {
	cursor: auto;
}

.tile:focus {
	outline: 2px solid hsl(360, 98%, 42%);
}

.tile[disabled] {
	cursor: not-allowed;
}

.answer {
	grid-column-end: span 1;
	width: 100%;
	justify-self: flex-end;
	background-size: 100%;
	box-shadow:
		inset 0 0 0 .2em hsl(360, 90%, 26%);
}

.tile--empty { background: transparent; }
.tile--1 { background-position: top left; }
.tile--2 { background-position: top center; }
.tile--3 { background-position: top right; }
.tile--4 { background-position: center left; }
.tile--5 { background-position: center; }
.tile--6 { background-position: center right; }
.tile--7 { background-position: bottom left; }
.tile--8 { background-position: bottom center; }

h2 {
	margin: 0;
	font-size: 4em;
}

.heading span {
	font-size: 2em;
	line-height: em;
}

.heading {
	align-self: center;
	grid-column-end: span 2;
	text-align: center;
	text-shadow: 0 -1px 0 hsl(360, 90%, 26%);
	transform: skew(-10deg) rotate(-6deg);
}

@-webkit-keyframes popIn {
	from {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transform: scale(0.6);
		transition: opacity, scale, 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
}

@keyframes popIn {
	from {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transform: scale(0.6);
		transition: opacity, scale, 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
}

p {
	padding: 0 1em;
	text-align: center;
}

a {
	color: white;
}



/*backround*/
canvas {
	background: #f4f4f4;
	height: 100vh;
	left: 0;
	position: absolute;
	top: 0;
	width: 100vw;
}