body, html {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background-color: #c7c7c7;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#container {width: 835px; height: 400px; padding: 0; position: absolute; top: 8%; left: 50%; transform: translate(-48%, 0%);}

.me {position: relative; background-size: 800px 400px; background-repeat: no-repeat; display: inline-block; margin: 2.2px; margin-top: -0.5px; border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); transition: 0.2s;}

.full {height: 400px; width: 800px; border-radius: 15px;}

.me_0 {height: 133.33px; width: 133.33px; background-position: -0px -0px;}
.me_1 {height: 133.33px; width: 133.33px; background-position: -133.33px -0px;}
.me_2 {height: 133.33px; width: 133.33px; background-position: -266.66px -0px;}
.me_3 {height: 133.33px; width: 133.33px; background-position: -399.99px -0px;}
.me_4 {height: 133.33px; width: 133.33px; background-position: -533.32px -0px;}
.me_5 {height: 133.33px; width: 133.33px; background-position: -666.65px -0px;}
.me_6 {height: 133.33px; width: 133.33px; background-position: -0px -133.33px;}
.me_7 {height: 133.33px; width: 133.33px; background-position: -133.33px -133.33px;}
.me_8 {height: 133.33px; width: 133.33px; background-position: -266.66px -133.33px;}
.me_9 {height: 133.33px; width: 133.33px; background-position: -399.99px -133.33px;}
.me_10 {height: 133.33px; width: 133.33px; background-position: -533.32px -133.33px;}
.me_11 {height: 133.33px; width: 133.33px; background-position: -666.65px -133.33px;}
.me_12 {height: 133.33px; width: 133.33px; background-position: -0px -266.66px;}
.me_13 {height: 133.33px; width: 133.33px; background-position: -133.33px -266.66px;}
.me_14 {height: 133.33px; width: 133.33px; background-position: -266.66px -266.66px;}
.me_15 {height: 133.33px; width: 133.33px; background-position: -399.99px -266.66px;}
.me_16 {height: 133.33px; width: 133.33px; background-position: -533.32px -266.66px;}
.me_17 {height: 133.33px; width: 133.33px; background-position: -666.65px -266.66px;}

.prevent_click {pointer-events: none;}

.correct {border-radius: 0px; box-shadow: 0 0 0 transparent, 0 0 0 transparent; animation: corect 0.5s ease; animation-delay: 0.2s;}

@keyframes corect {
	0% {transform: scale(1); border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}
	50% {transform: scale(1.25); border-radius: 5px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);}
	100% {transform: scale(1); border-radius: 0px; box-shadow: 0 0 0 transparent, 0 0 0 transparent;}
}
.pre_img {margin-top: 10px; width: 100%; position: absolute; left: 20px;}
.pre_img li {display: inline-block; list-style: none;}
.pre_img li img {width: 150px; height: 75px; position: relative; cursor: pointer;}

.cover {display: none; position: absolute; background-color: rgba(0, 0, 0, 0.38); width: 100%; height: 100%; z-index: 9999;}

.score {margin: 13% auto; padding: 20px; background: #fff; border: 1px solid #666; width: 300px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); position: relative;}

#scr_head {text-align: center; font-weight: 600; font-size: 30px; font-family: cursive; color: #3d3d3d;}
#scr_time {text-align: center; font-weight: 600; font-size: 22px; font-family: cursive; color: #3d3d3d;}

#scr_moves {text-align: center; font-weight: 600; font-size: 22px; font-family: cursive; color: #3d3d3d;}

.start {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 18px 45px;}

.reset {position: absolute; margin: 0 auto; padding: 18px 45px; left: 50%; transform: translate(-50%, 120px);}

.OK {padding: 8px 25px; float: right; cursor: pointer;}

.button {margin: 0px 10px 10px 0px; border-radius: 10px; font-family: cursive; font-size: 25px; color: #FFF; text-decoration: none; background-color: #E74C3C; border-bottom: 5px solid #BD3E31; text-shadow: 0px -2px #BD3E31;
	z-index: 999; transition: all 0.1s; -webkit-transition: all 0.1s; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}

.button:active {border-bottom: 1px solid #BD3E31;}

.i {text-align: center; font-family: cursive; font-weight: 550; color: #3c3c3c;}