Slang/simplesnake/simplesnake.css

body.hints:before,
body.hints:after {
	display: block;
	position: absolute;
	left: 0;
	top: 12.5%;
	bottom: 12.5%;
	z-index: 100;
}
body.hints:before {
	content: "";
	width: 100%;
	border-top: dotted 0.3vmin rgba(255, 0, 0, 0.5);
	border-bottom: dotted 0.3vmin rgba(255, 0, 0, 0.5);
}
body.hints:after {
	content: "↺↻";
	width: 37vmin;
	right: 50%;
	left: auto;
	overflow: visible;
	border-right: dotted 0.3vmin rgba(255, 0, 0, 0.5);

	color: rgba(255, 0, 0, 0.5);
	font-size: 15vmin;
	line-height: 70vh;
	white-space: pre;
	letter-spacing: 50vmin;
}
.hints .simplesnake {
	opacity: 0.2;
}
.hints .title:before,
.hints .title:after {
	position: absolute;
	display: block;
	text-align: center;
	width: 100vw;
	color: red;
	font-size: 5vh;
	line-height: 10vh;
	z-index: 100;
	opacity: 0.6;
}
.hints .title:before {
	content: "New level";
}
.hints .title:after {
	bottom: 0;
	content: "Pause game";
}
.hints .title {
	display: block;
}
.hints .title h1:after {
	content: "Touch control hints...";
	display: block;
	position: relative;
	font-size: 4vmin;
	font-weight: normal;
	font-style: italic;
	text-shadow: 3pt 3pt 10pt rgba(0,0,0,0.2);
	opacity: 0.4;
}


.title {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	z-index: 500;
	color: rgba(255,0,0,0.7);
}
.title h1 {
	position: relative;
	display: block;
	top: 50%;
	font-size: 10vmin;
	margin-top: -22vmin;
	font-weight: bolder;
	text-shadow: 3pt 3pt 15pt rgba(0,0,0,0.2);
}
.title h1 sup {
	font-weight: normal;
	font-size: 5vh;
}



body {
	background-color: rgb(253, 253, 253);
	font-family: sans-serif;
	overflow: hidden;
}

.simplesnake .field {
	position: relative;
	left: 50%;
	margin-left: -45vmin;

	width: 90vmin;
	height: 90vmin;
	border: solid 1px silver;
}

/* show score... */
.simplesnake[score]:after {
	position: absolute;
	display: block;
	text-align: center;
	width: 100vw;
	color: gray;
	font-size: 2vh;
	line-height: 3vh;

	content: "Top score: " attr(snake) ": " attr(score) " " attr(state);

	opacity: 0.9;
}

.simplesnake .wall {
	background-color: silver;
}
.simplesnake .apple {
	position: relative;
	background-color: red;
}

body:not(.hints) .simplesnake.paused:before {
	content: "Paused...";
	position: absolute;
	display: block;
	width: 100%;
	top: 50%;
	margin-top: -10vmin;
	font-size: 10vmin;
	font-weight: bolder;
	text-align: center;
	color: rgba(0, 0, 0, 0.2);
	z-index: 100;
}


/*
.simplesnake .apple {
	position: relative;
	background-color: none;
}
.simplesnake .apple:before {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: red;
	transform: rotate(45deg);
}
*/

/*
.simplesnake .apple {
	position: relative;
	background-color: none;
}
.simplesnake .apple:before {
	display: block;
	content: "";
	width: 60%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background-color: red;
	border-radius: 30%;
	border-bottom-right-radius: 50%;
	transform: rotate(-10deg);
}
.simplesnake .apple:after {
	display: block;
	content: "";
	width: 60%;
	height: 100%;
	top: 0;
	right: 0;
	position: absolute;
	background-color: red;
	border-radius: 30%;
	border-bottom-left-radius: 50%;
	transform: rotate(10deg);
}
*/