/* 
 * Thanks for css-gradieent
 * http://www.cssmatic.com/gradient-generator 
 */

/* The animation code | https://www.w3schools.com/css/css3_animations.asp */
@keyframes match {
  0% {
	  color: #444;
  }
  40% {
	  color: rgb(255, 255, 224);
  }
  60% {
	  box-shadow: 1px 1px 5px 3px rgba(255, 255, 224, .5);
  }
  100% {
	  color: #444;
  }
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-size: 14px;
	color: #444;
	user-select: none;
	overflow: hidden;
	font-family: monospace;
}

.wrap {
	width: 100%;
	height: 100%;
	display: flex;
	background: #f5f5f5;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	box-sizing: border-box;
}

.counter {
	width: 100%;
	text-align: center;
	font-size: 40px;
	position: absolute;
	box-sizing: border-box;
	top: 30px;
}

.start-bg {
	position: absolute;
	z-index: 99;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(245, 245, 245, .5);
	display: flex;
}

.start, .finish {
	width: 140px;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	margin: auto;
	cursor: default;
	background: #90EE90;
	background: linear-gradient(135deg, rgba(144,238,144,1) 0%, 
		        rgba(164,179,87,1) 100%); 
	box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, .5);
}

.start:hover {
	transition: .2s;
	background: #bbEEbb;
	background: linear-gradient(135deg, rgba(187,238,187,1) 0%, 
		        rgba(144,238,144,1) 100%);
	box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, .5);
}

.hidden {
	display: none;
}

.board {
	width: 770px;
	height: 770px;
	position: relative;
	z-index: 10;
}

.cell {
	width: 120px;
	height: 120px;
	margin: auto;
	background: #fff;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, .5);    /* https://css3gen.com/box-shadow/ */
	cursor: default;
	user-select: none;
	transition: .2s;
}

.n-cell {
	background: #FFFFE0;
	background: linear-gradient(135deg, rgba(255,255,224,1) 0%, rgba(187,238,187,1) 100%);
}

.n-cell:hover {
	box-shadow: 2px 2px 5px 1px rgba(50, 50, 50, .5);
	background: #FFFFE0;
	background: linear-gradient(135deg, rgba(255,255,240,1) 0%, rgba(200,240,200,1) 100%);
	color: #222;
}

.r-cell {
	background: #bbEEbb;
	background: linear-gradient(135deg, rgba(187,238,187,1) 0%, 
		        rgba(144,238,144,1) 100%);
}

/* The element to apply the animation to */
.correct {
	background: #90EE90;
	background: linear-gradient(135deg, rgba(144,238,144,1) 0%, 
		        rgba(164,179,87,1) 100%);    /* http://www.cssmatic.com/gradient-generator */
		        
  animation-name: match;
  animation-duration: .5s;
}

.first {
	z-index: 3;
	box-shadow: 2px 2px 5px 3px rgba(50, 50, 50, .5);
	transform: scale(1.05);
	background: #FFFFE0;
	background: linear-gradient(135deg, rgba(255,255,240,1) 0%, rgba(200,240,200,1) 100%);
	color: #222;
	/* background: linear-gradient(135deg, rgba(144,238,144,1) 0%, 
	          rgba(164,179,87,1) 100%); */    /* http://www.cssmatic.com/gradient-generator */
}

.first:hover {
	box-shadow: 5px 5px 5px 0px rgba(50, 50, 50, .5);
}

.second {
	z-index: 2;
	box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, .5);
}

.second:hover {
	box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, .5);
}


/* Net grid */

.c0 {
	top: 130px;
	left: 130px;
}

.c1 {
	top: 130px;
	left: 260px;
}

.c2 {
	top: 130px;
	left: 390px;
}

.c3 {
	top: 130px;
	left: 520px;
}

.c4 {
	top: 260px;
	left: 130px;
}

.c5 {
	top: 260px;
	left: 260px;
}

.c6 {
	top: 260px;
	left: 390px;
}

.c7 {
	top: 260px;
	left: 520px;
}

.c8 {
	top: 390px;
	left: 130px;
}

.c9 {
	top: 390px;
	left: 260px;
}

.c10 {
	top: 390px;
	left: 390px;
}

.c11 {
	top: 390px;
	left: 520px;
}

.c12 {
	top: 520px;
	left: 130px;
}

.c13 {
	top: 520px;
	left: 260px;
}

.c14 {
	top: 520px;
	left: 390px;
}

.c15 {
	top: 520px;
	left: 520px;
}

.r0 {	
	top: 0;
	left: 0;
}

.r1 {	
	top: 0;
	left: 130px;
}

.r2 {	
	top: 0;
	left: 260px;
}

.r3 {	
	top: 0;
	left: 390px;
}

.r4 {	
	top: 0;
	left: 520px;
}

.r5 {	
	top: 0;
	left: 650px;
}

.r6 {	
	top: 130px;
	left: 0;
}

.r7 {	
	top: 130px;
	left: 650px;
}

.r8 {	
	top: 260px;
	left: 0;
}

.r9 {	
	top: 260px;
	left: 650px;
}

.r10 {	
	top: 390px;
	left: 0;
}

.r11 {	
	top: 390px;
	left: 650px;
}

.r12 {	
	top: 520px;
	left: 0;
}

.r13 {	
	top: 520px;
	left: 650px;
}

.r14 {	
	top: 650px;
	left: 0;
}

.r15 {	
	top: 650px;
	left: 130px;
}

.r16 {	
	top: 650px;
	left: 260px;
}

.r17 {	
	top: 650px;
	left: 390px;
}

.r18 {	
	top: 650px;
	left: 520px;
}

.r19 {	
	top: 650px;
	left: 650px;
}
  
footer {
  font-size: 40px;
	position: absolute;
	bottom: 30px;
	box-sizing: border-box;
}

@media screen and (max-height: 880px) {
  .board {
  	width: 530px;
  	height: 530px;
  }
  
  .counter {
  	width: 100%;
  	text-align: center;
  	font-size: 30px;
  	position: absolute;
  	box-sizing: border-box;
  	top: 10px;
  }

  .cell {
  	width: 80px;
  	height: 80px;
  }
  /* Net grid */

  .c0 {
  	top: 90px;
  	left: 90px;
  }
  
  .c1 {
  	top: 90px;
  	left: 180px;
  }
  
  .c2 {
  	top: 90px;
  	left: 270px;
  }
  
  .c3 {
  	top: 90px;
  	left: 360px;
  }
  
  .c4 {
  	top: 180px;
  	left: 90px;
  }
  
  .c5 {
  	top: 180px;
  	left: 180px;
  }
  
  .c6 {
  	top: 180px;
  	left: 270px;
  }
  
  .c7 {
  	top: 180px;
  	left: 360px;
  }
  
  .c8 {
  	top: 270px;
  	left: 90px;
  }
  
  .c9 {
  	top: 270px;
  	left: 180px;
  }
  
  .c10 {
  	top: 270px;
  	left: 270px;
  }
  
  .c11 {
  	top: 270px;
  	left: 360px;
  }
  
  .c12 {
  	top: 360px;
  	left: 90px;
  }
  
  .c13 {
  	top: 360px;
  	left: 180px;
  }
  
  .c14 {
  	top: 360px;
  	left: 270px;
  }
  
  .c15 {
  	top: 360px;
  	left: 360px;
  }
  
  .r0 {	
  	top: 0;
  	left: 0;
  }
  
  .r1 {	
  	top: 0;
  	left: 90px;
  }
  
  .r2 {	
  	top: 0;
  	left: 180px;
  }
  
  .r3 {	
  	top: 0;
  	left: 270px;
  }
  
  .r4 {	
  	top: 0;
  	left: 360px;
  }
  
  .r5 {	
  	top: 0;
  	left: 450px;
  }
  
  .r6 {	
  	top: 90px;
  	left: 0;
  }
  
  .r7 {	
  	top: 90px;
  	left: 450px;
  }
  
  .r8 {	
  	top: 180px;
  	left: 0;
  }
  
  .r9 {	
  	top: 180px;
  	left: 450px;
  }
  
  .r10 {	
  	top: 270px;
  	left: 0;
  }
  
  .r11 {	
  	top: 270px;
  	left: 450px;
  }
  
  .r12 {	
  	top: 360px;
  	left: 0;
  }
  
  .r13 {	
  	top: 360px;
  	left: 450px;
  }
  
  .r14 {	
  	top: 450px;
  	left: 0;
  }
  
  .r15 {	
  	top: 450px;
  	left: 90px;
  }
  
  .r16 {	
  	top: 450px;
  	left: 180px;
  }
  
  .r17 {	
  	top: 450px;
  	left: 270px;
  }
  
  .r18 {	
  	top: 450px;
  	left: 360px;
  }
  
  .r19 {	
  	top: 450px;
  	left: 450px;
  }
  
  footer {
    font-size: 30px;
  	position: absolute;
  	bottom: 10px;
  	box-sizing: border-box;
  }
}