<commit_before>﻿body {
	font-family: 'Consolas';
	background-color: #0FBAB2;
	color: white;
	margin:20px;
	overflow: hidden;
	-ms-touch-action:none;
    /*background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.17) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.19) 50%); background-size: 13px, 29px, 37px, 53px; background-color: rgb(2, 104, 115);*/
    /*background-position: 0px 10px, 0% 0%, 0% 0%; background-image: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, rgb(102, 17, 51) 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, rgb(102, 17, 51) 10px, rgba(96, 16, 48, 0) 11px), none; background-attachment: scroll, scroll, scroll; background-repeat: repeat, repeat, repeat; background-size: 20px 20px; background-origin: padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box; background-color: rgb(40, 40, 40);*/
    /*background-position: 0px 0px, 40px 60px, 130px 270px, 70px 100px; background-image: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px); background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; background-color: black;*/
    /*background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0px 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), radial-gradient(circle at 0px 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); background-size: 100px 50px; background-color: silver;*/
    /*background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0px 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), radial-gradient(circle at 0px 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); background-size: 100px 50px; background-color: black;*/
}

.square {
	height: 30px;
	width: 30px;
	background-color: red;
	text-align: center;
	vertical-align: middle;
	overflow: none;
}

#board {
	width: 100%;
}

#colors {
	display: inline;
}

#colorQueueCell {
    float:left;
}

#game {
	clear:both;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

#header {
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

#footer {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

#flipper {
	height: 30px;
	width: 30px;
	position: absolute;
	text-align: center;
	vertical-align: middle;
	margin:0px;
	padding:0px;
	border-radius: 25px;
}

.endGame {
	position: relative;
	transform-style: preserve-3d;
	transform: scale(3) rotate(90deg);
    -webkit-transform: scale(3) rotate(90deg);
	animation: squareEndGame 1s;
    -webkit-animation: squareEndGame 1s;
	border-radius: 25px;
}

.rotateUp {
	position: relative;

	transform-style: preserve-3d;
	transform-origin: top;

	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: top;

	animation: flipUp 0.2s;
	-webkit-animation: flipUp 0.2s;
}

.rotateRight {
	position: relative;

	transform-style: preserve-3d;
	transform-origin: right;

	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: right;

	animation: flipRight 0.2s;
	-webkit-animation: flipRight 0.2s;
}

.rotateLeft {
	position: relative;

	transform-style: preserve-3d;
	transform-origin: left;

	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: left;

	animation: flipLeft 0.2s;
	-webkit-animation: flipLeft 0.2s;
}

.rotateDown {
	position: relative;

	transform-style: preserve-3d;
	transform-origin: bottom;

	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: bottom;

	animation: flipDown 0.2s;
	-webkit-animation: flipDown 0.2s;
}

.stay {
	transform: rotateX(0deg) rotateY(0deg);
}

.cell {
	width: 30px;
	height: 30px;

	background-color: #077A75;
}

.row {
	float:left;
}

@keyframes squareEndGame {
	from{
		transform: scale(1) rotate(0deg);
		background-color: white;
	}
	to{
		transform: scale(3) rotate(90deg);
		background-color: yellow;
	}
}

@keyframes flipDown {
	0% {
		transform: rotateX(0deg) skewX(0deg);
		-webkit-transform: rotateX(0deg) skewX(0deg);
	}
	50% {
		transform: rotateX(90deg) skewX(-35deg);
		-webkit-transform: rotateY(90deg) skewX(-135deg);
	}
	100%{
		transform: rotateX(180deg) skewX(0deg);
		-webkit-transform: rotateX(180deg);
	}
}

@keyframes flipUp {
	0% {
		transform: rotateX(0deg) skewX(0deg);
		-webkit-transform: rotateX(0deg) skewX(0deg);
	}
	50% {
		transform: rotateX(90deg) skewX(35deg);
		-webkit-transform: rotateY(90deg) skewX(135deg);
	}
	100%{
		transform: rotateX(180deg) skewX(0deg);
		-webkit-transform: rotateX(180deg);
	}
}

@keyframes flipRight {
	0% {
		transform: rotateY(0deg) skewY(0deg);
		-webkit-transform: rotateY(0deg) skewY(0deg);
	}
	50%{
		transform: rotateY(90deg) skewY(-35deg);
		-webkit-transform: rotateY(90deg) skewY(-35deg);
	}
	100% {
		transform: rotateY(180deg) skewY(0deg);
		-webkit-transform: rotateY(180deg);
	}
}

@keyframes flipLeft {
	0% {
		transform: rotateY(0deg) skewY(0deg);
	}
	50%{
		transform: rotateY(-90deg) skewY(35deg);
	}
	100% {
		transform: rotateY(-180deg) skewY(0deg);
	}
}

@-webkit-keyframes flipLeft {
	0% {
		-webkit-transform: rotateY(0deg) skewY(0deg);
	}
	50%{
		-webkit-transform: rotateY(-90deg) skewY(35deg);
	}
	100% {
		-webkit-transform: rotateY(-180deg) skewY(0deg);
	}
}

@-webkit-keyframes flipRight {
	0% {
		-webkit-transform: rotateY(0deg) skewY(0deg);
	}
	50%{
		-webkit-transform: rotateY(90deg) skewY(-35deg);
	}
	100% {
		-webkit-transform: rotateY(180deg) skewY(0deg);
	}
}

@-webkit-keyframes flipDown {
	0% {
		-webkit-transform: rotateX(0deg) skewX(0deg);
	}
	50% {
		-webkit-transform: rotateX(-90deg) skewX(-35deg);
	}
	100%{
		-webkit-transform: rotateX(-180deg) skewX(0deg);
	}
}

@-webkit-keyframes flipUp {
	0% {
		-webkit-transform: rotateX(0deg) skewX(0deg);
	}
	50% {
		-webkit-transform: rotateX(90deg) skewX(35deg);
	}
	100%{
		-webkit-transform: rotateX(180deg) skewX(0deg);
	}
}

@-webkit-keyframes squareEndGame {
	from{
		-webkit-transform: scale(1) rotate(0deg);
		background-color: white;
	}
	to{
		-webkit-transform: scale(3) rotate(90deg);
		background-color: yellow;
	}
}
<commit_msg>adding instructions code<commit_after>﻿body {
	font-family: 'Consolas';
	background-color: #0FBAB2;
	color: white;
	margin:20px;
	overflow: hidden;
	-ms-touch-action:none;
    /*background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.17) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.19) 50%); background-size: 13px, 29px, 37px, 53px; background-color: rgb(2, 104, 115);*/
    /*background-position: 0px 10px, 0% 0%, 0% 0%; background-image: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, rgb(102, 17, 51) 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, rgb(102, 17, 51) 10px, rgba(96, 16, 48, 0) 11px), none; background-attachment: scroll, scroll, scroll; background-repeat: repeat, repeat, repeat; background-size: 20px 20px; background-origin: padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box; background-color: rgb(40, 40, 40);*/
    /*background-position: 0px 0px, 40px 60px, 130px 270px, 70px 100px; background-image: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px); background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; background-color: black;*/
    /*background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0px 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), radial-gradient(circle at 0px 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); background-size: 100px 50px; background-color: silver;*/
    /*background-image: radial-gradient(circle at 100% 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 0px 150%, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent), radial-gradient(circle at 50% 100%, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent), radial-gradient(circle at 100% 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent), radial-gradient(circle at 0px 50%, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent); background-size: 100px 50px; background-color: black;*/
}

.square {
	height: 30px;
	width: 30px;
	background-color: red;
	text-align: center;
	vertical-align: middle;
	overflow: none;
}

#board {
    margin-left:auto;
    margin-right:auto;
}

#colors {
	display: inline;
}
.hidden {
    display:none;
}

#colorQueueCell {
    float:left;
}

#game {
	clear:both;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

#header {
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

#footer {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

#flipper {
	height: 30px;
	width: 30px;
	position: absolute;
	text-align: center;
	vertical-align: middle;
	margin:0px;
	padding:0px;
	border-radius: 25px;
}

.endGame {
	position: relative;
	transform-style: preserve-3d;
	transform: scale(3) rotate(90deg);
    -webkit-transform: scale(3) rotate(90deg);
	animation: squareEndGame 1s;
    -webkit-animation: squareEndGame 1s;
	border-radius: 25px;
}

.rotateUp {
	position: relative;

	transform-style: preserve-3d;
	transform-origin: top;

	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: top;

	animation: flipUp 0.2s;
	-webkit-animation: flipUp 0.2s;
}

.rotateRight {
	position: relative;

	transform-style: preserve-3d;
	transform-origin: right;

	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: right;

	animation: flipRight 0.2s;
	-webkit-animation: flipRight 0.2s;
}

.rotateLeft {
	position: relative;

	transform-style: preserve-3d;
	transform-origin: left;

	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: left;

	animation: flipLeft 0.2s;
	-webkit-animation: flipLeft 0.2s;
}

.rotateDown {
	position: relative;

	transform-style: preserve-3d;
	transform-origin: bottom;

	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: bottom;

	animation: flipDown 0.2s;
	-webkit-animation: flipDown 0.2s;
}

.stay {
	transform: rotateX(0deg) rotateY(0deg);
}

.cell {
	width: 30px;
	height: 30px;

	background-color: #077A75;
}

.row {
	float:left;
}

@keyframes squareEndGame {
	from{
		transform: scale(1) rotate(0deg);
		background-color: white;
	}
	to{
		transform: scale(3) rotate(90deg);
		background-color: yellow;
	}
}

@keyframes flipDown {
	0% {
		transform: rotateX(0deg) skewX(0deg);
		-webkit-transform: rotateX(0deg) skewX(0deg);
	}
	50% {
		transform: rotateX(90deg) skewX(-35deg);
		-webkit-transform: rotateY(90deg) skewX(-135deg);
	}
	100%{
		transform: rotateX(180deg) skewX(0deg);
		-webkit-transform: rotateX(180deg);
	}
}

@keyframes flipUp {
	0% {
		transform: rotateX(0deg) skewX(0deg);
		-webkit-transform: rotateX(0deg) skewX(0deg);
	}
	50% {
		transform: rotateX(90deg) skewX(35deg);
		-webkit-transform: rotateY(90deg) skewX(135deg);
	}
	100%{
		transform: rotateX(180deg) skewX(0deg);
		-webkit-transform: rotateX(180deg);
	}
}

@keyframes flipRight {
	0% {
		transform: rotateY(0deg) skewY(0deg);
		-webkit-transform: rotateY(0deg) skewY(0deg);
	}
	50%{
		transform: rotateY(90deg) skewY(-35deg);
		-webkit-transform: rotateY(90deg) skewY(-35deg);
	}
	100% {
		transform: rotateY(180deg) skewY(0deg);
		-webkit-transform: rotateY(180deg);
	}
}

@keyframes flipLeft {
	0% {
		transform: rotateY(0deg) skewY(0deg);
	}
	50%{
		transform: rotateY(-90deg) skewY(35deg);
	}
	100% {
		transform: rotateY(-180deg) skewY(0deg);
	}
}

@-webkit-keyframes flipLeft {
	0% {
		-webkit-transform: rotateY(0deg) skewY(0deg);
	}
	50%{
		-webkit-transform: rotateY(-90deg) skewY(35deg);
	}
	100% {
		-webkit-transform: rotateY(-180deg) skewY(0deg);
	}
}

@-webkit-keyframes flipRight {
	0% {
		-webkit-transform: rotateY(0deg) skewY(0deg);
	}
	50%{
		-webkit-transform: rotateY(90deg) skewY(-35deg);
	}
	100% {
		-webkit-transform: rotateY(180deg) skewY(0deg);
	}
}

@-webkit-keyframes flipDown {
	0% {
		-webkit-transform: rotateX(0deg) skewX(0deg);
	}
	50% {
		-webkit-transform: rotateX(-90deg) skewX(-35deg);
	}
	100%{
		-webkit-transform: rotateX(-180deg) skewX(0deg);
	}
}

@-webkit-keyframes flipUp {
	0% {
		-webkit-transform: rotateX(0deg) skewX(0deg);
	}
	50% {
		-webkit-transform: rotateX(90deg) skewX(35deg);
	}
	100%{
		-webkit-transform: rotateX(180deg) skewX(0deg);
	}
}

@-webkit-keyframes squareEndGame {
	from{
		-webkit-transform: scale(1) rotate(0deg);
		background-color: white;
	}
	to{
		-webkit-transform: scale(3) rotate(90deg);
		background-color: yellow;
	}
}

{'fraction_non_alphanumeric': 0.16152587183683748, 'fraction_numerical': 0.09989928238700743, 'mean_word_length': 4.643694493783304, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1354540', 'n_tokens_mistral': 7380, 'n_tokens_neox': 5670, 'n_words': 1586}