/* CSS */
@import url('https://fonts.googleapis.com/css2?family=Piedra&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Piedra', cursive;}
body
{
	background-color: khaki;
}
div#world
{
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	height: 1000px;
	width: 1000px;
	background-color: white;
	/*border: 5px solid #ccc;*/
	margin: 20px auto;
	position: relative;
}
img#karel.north{transform: rotate(0deg);}
img#karel.east{transform: rotate(90deg);}
img#karel.south{transform: rotate(180deg);}
img#karel.west{transform: rotate(270deg);}
img#karel
{
	position: absolute;
	transition: all 500ms;
}
div#world > div > p
{
	font-size: 45px;
	opacity: .15;
}
div#world > div
{
	height: 100px;
	width: 100px;
	border: 1px solid #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
}