style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
	background:#000;
	width:500px;
	margin: 50px auto 0;
}

strong{
	color:#ffdd00;
}

.head {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	max-width: 500px;
	margin: 0 auto 20px;
	align-items: center;
}

#rules{
	width: calc(100% - 140px);
	color:#fff;
	font-size:12px;
	margin-left: 20px;
}

#controls{
	width:120px;
	height:120px;
}

#controls li{
	width:22px;
	height:22px;
	display:block;
	float:left;
	cursor:pointer;
	margin:0;
	padding:0;
	background:#333333;
	list-style:none;
	border:1px solid black;
}

#Grid1, #Grid2, #Grid3, #Grid4, #Grid5, #Grid6, 
#Grid7, #Grid8, #Grid9, #Grid10, #Grid11, #Grid12,
#Grid13, #Grid14, #Grid15, #Grid16, #Grid17, #Grid18,
#Grid19, #Grid20, #Grid21, #Grid22, #Grid23, #Grid24, #Grid25{
	width:100px;
	height:100px;
	text-align: justify;
	font-size: 0.1px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#Grid1, #Grid10, #Grid11, #Grid20, #Grid21{
	background:#ffdd00;
}

#Grid2, #Grid9, #Grid12, #Grid19, #Grid22{
	background:#ffdd00;
}

#Grid3, #Grid8, #Grid13, #Grid18, #Grid23{
	background:#ffdd00;
}

#Grid4, #Grid7, #Grid14, #Grid17, #Grid24{
	background:#ffdd00;
}

#Grid5, #Grid6, #Grid15, #Grid16, #Grid25{
	background:#ffdd00;
}

#Grid1:after, #Grid2:after, #Grid3:after, #Grid4:after, #Grid5:after, 
#Grid6:after, #Grid7:after, #Grid8:after, #Grid9:after, #Grid10:after, 
#Grid11:after, #Grid12:after, #Grid13:after, #Grid14:after, #Grid15:after, 
#Grid16:after, #Grid17:after, #Grid18:after, #Grid19:after, #Grid20:after, 
#Grid21:after, #Grid22:after, #Grid23:after, #Grid24:after, #Grid25:after{
	content: '';
	display: inline-block;
	width: 100%;
}

#Grid1 .mix, #Grid2 .mix, #Grid3 .mix, #Grid4 .mix, #Grid5 .mix, 
#Grid6 .mix, #Grid7 .mix, #Grid8 .mix, #Grid9 .mix, #Grid10 .mix, 
#Grid11 .mix, #Grid12 .mix, #Grid13 .mix, #Grid14 .mix, #Grid15 .mix, 
#Grid16 .mix, #Grid17 .mix, #Grid18 .mix, #Grid19 .mix, #Grid20 .mix, 
#Grid21 .mix, #Grid22 .mix, #Grid23 .mix, #Grid24 .mix, #Grid25 .mix{
    display: none;
	opacity: 0;
}

#Grid1 ul li, #Grid2 ul li, #Grid3 ul li, #Grid4 ul li, #Grid5 ul li, 
#Grid6 ul li, #Grid7 ul li, #Grid8 ul li, #Grid9 ul li, #Grid10 ul li, 
#Grid11 ul li, #Grid12 ul li, #Grid13 ul li, #Grid14 ul li, #Grid15 ul li, 
#Grid16 ul li, #Grid17 ul li, #Grid18 ul li, #Grid19 ul li, #Grid20 ul li, 
#Grid21 ul li, #Grid22 ul li, #Grid23 ul li, #Grid24 ul li, #Grid25 ul li{
	margin:0;
	padding:0;
}

#Grid1 ul a, #Grid2 ul a, #Grid3 ul a, #Grid4 ul a, #Grid5 ul a, 
#Grid6 ul a, #Grid7 ul a, #Grid8 ul a, #Grid9 ul a, #Grid10 ul a, 
#Grid11 ul a, #Grid12 ul a, #Grid13 ul a, #Grid14 ul a, #Grid15 ul a, 
#Grid16 ul a, #Grid17 ul a, #Grid18 ul a, #Grid19 ul a, #Grid20 ul a, 
#Grid21 ul a, #Grid22 ul a, #Grid23 ul a, #Grid24 ul a, #Grid25 ul a{
	margin:0;
	padding:0;
}

#one{
	width:20px;
	height:20px;
	background-color:#888888;
	margin:0;
	padding:0;
}

#two{
	width:20px;
	height:20px;
	background-color:#666666;
	margin:0;
	padding:0;
}

#three{
	width:20px;
	height:20px;
	background-color:#444444;
	margin:0;
	padding:0;
}

#four{
	width:20px;
	height:20px;
	background-color:#222222;
	margin:0;
	padding:0;
}

#five{
	width:20px;
	height:20px;
	background-color:#000000;
	margin:0;
	padding:0;
}

#six{
	width:5px;
	height:5px;
	background-color:#999999;
	margin:0;
	padding:0;
}

#seven{
	width:5px;
	height:5px;
	background-color:#999999;
	margin:0;
	padding:0;
}

#eight{
	width:5px;
	height:5px;
	background-color:#999999;
	margin:0;
	padding:0;
}

#nine{
	width:5px;
	height:5px;
	background-color:#999999;
	margin:0;
	padding:0;
}

#ten{
	width:5px;
	height:5px;
	background-color:#999999;
	margin:0;
	padding:0;
}