* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    height: 100vh;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(rgb(219, 219, 219), rgb(236, 236, 236));
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    perspective: 500px;
}

.square-main {
	cursor: pointer;
	position: relative;
	min-width: 100px;
    min-height: 100px;
    max-width: 300px;
    max-height: 300px;
}

.square {
	position: absolute;
	
    background: rgba(0, 204, 255, 0.212);
    align-items: center;
    justify-content: center;
    display: flex;
    box-shadow: 5px 5px rgba(145, 145, 146, 0.5);
    transition: transform 1s ease-in-out;
	/* transition-delay: 65ms; */
    min-width: 100px;
    min-height: 100px;
    max-width: 300px;
    max-height: 300px;
    padding: 5px;
	backface-visibility: hidden;
}

.square img {
    width: 100%;
    
}

.square.front {
	
}

.square.back {
	transform: rotateY(180deg);
    background-size: contain;
    background-repeat: no-repeat;
    background-origin: content-box;
}

.square.back.chunk
{
	background-image: url(chunk.png);
}

.square.back.sloth
{
	background-image: url(sloth.png);
}


.square.front.select {
    transform: rotateY(180deg);
}

.square.back.select {
    transform: rotateY(360deg);
}