* {
	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: 800px;
	/*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;
	border: 2px solid black;
}



 @media only screen and (min-width : 992px) {
.puzzle {

max-width: 400px;

}
    }

.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: 1px solid black;
grid-column-end: span 3;
display: grid;
grid-gap: 2px;
grid-template-areas: "A B C"
"D E F"
"G H I";
background: rgb(209, 219, 255);
box-shadow: inset 0 0 0.5em 0 hsl(360, 98%, 2%);
}

.tile,
.answer {
	height: 0;
	padding-bottom: 100%;
	grid-area: var(--area, auto);
	border: none;
	/*background: url(https://source.unsplash.com/900x900/?christmas,holiday,festive);*/
	background: url(notienenombre.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%);*/
		border: 2px solid black;
}

.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; }
.tile--9 { background-position: bottom right; }

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

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

.heading {
	align-self: center;
	grid-column-end: span 2;
	text-align: center;
	/*text-shadow: 0 -1px 0 hsl(360, 90%, 26%);*/
	color: black;
	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;
}