body, html {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #ffffff;
}
.Title_Class {
filter: drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.500));
position: absolute;
left: 50%;
top: 12%;
overflow: visible;
width: 713px;
white-space: nowrap;
line-height: 29px;
margin-top: -2.4px;
text-align: center;
font-family: 'LucidaSansUnicode';
font-style: normal;
font-weight: normal;
font-size: 24px;
color: rgba(51,102,204,1);
transform: translate(-50%, 0%);
}
#container {
width: 560px;
height: 530px;
padding: 0;
position: absolute;
/* top: 8%; */
top: 18%;
left: 50%;
transform: translate(-48%, 0%);
}
.me {
position: relative;
background-size: 525px 525px;
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: .2s;
}
.full {
height: 525px;
width: 525px;
border-radius: 15px;
}
.me_0 {
height: 175px;
width: 175px;
background-position: -0px -0px;
}
.me_1 {
height: 175px;
width: 175px;
background-position: -175px -0px;
}
.me_2 {
height: 175px;
width: 175px;
background-position: -350px -0px;
}
.me_3 {
height: 175px;
width: 175px;
background-position: -0px -175px;
}
.me_4 {
height: 175px;
width: 175px;
background-position: -175px -175px;
}
.me_5 {
height: 175px;
width: 175px;
background-position: -350px -175px;
}
.me_6 {
height: 175px;
width: 175px;
background-position: -0px -350px;
}
.me_7 {
height: 175px;
width: 175px;
background-position: -175px -350px;
}
.me_8 {
height: 175px;
width: 175px;
background-position: -350px -350px;
}
/* .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 .5s ease;
animation-delay: .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: 150%;
position: absolute;
left: -80px;
}
.pre_img li {
display: inline-block;
list-style: none;
}
.pre_img li img {
width: 126px;
height: 126px;
position: relative;
padding: 5px;
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: 70%;
left: -30%;
transform: translate(-50%, -50%);
padding: 10px 45px;
}
.reset {
position: absolute;
margin: 0 auto;
padding: 10px 30px;
left: -30%;
transform: translate(-50%, -100px);
}
.OK {
padding: 8px 25px;
float: right;
cursor: pointer;
}
.button {
margin: 0px 10px 10px 0px;
text-align: left;
border-radius: 10px;
font-family: cursive;
font-size: 20px;
color: #FFF;
text-decoration: none;
background-color: rgba(40, 158, 55, 0.884);
border-bottom: 5px solid rgba(40, 158, 55, 0.884);
text-shadow: 0px -2px rgba(151, 151, 151, 0.884);
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 rgba(40, 158, 55, 0.884);
}
.rules {
position: absolute;
left: -55%;
top: 2%;
overflow: visible;
width: 300px;
height: 184px;
font-family: 'Lucida Sans Unicode';
font-size: 14px;
font-weight: 400;
transform: matrix(0.906,0,0,0.906,0,0);
color: rgba(0,0,0,1);
}
.info {
position: absolute;
background-size: 350px 499px;
background-repeat: no-repeat;
display: inline-block;
right: -65%;
top: 5%;
overflow: visible;
/* margin: 2.2px;
margin-top: -2px;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); */
transition: .2s;
}
.infobox {
height: 499px;
width: 350px;
/* border-radius: 15px; */
}
/* .i {
text-align: center;
font-family: cursive;
font-weight: 550;
color: #3d3d3d;
} */
.header{font-size:0;letter-spacing:0;word-spacing:0}
.header_full{width:100%;overflow:hidden}
.right_cell{margin:60px 0 0 0;float:right}
.logo_cell {
margin:0px 10px 25px 10px;float:center;
position: absolute;
left: 15%;
}
.lang_cell{
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
float:center;
margin:10px 240px 0 0;white-space:nowrap;
position: absolute;
right: 10%;
}
.lang_cell a{font-size:12px;color:#000}
.lang_cell a:hover{color:#5a75a3}
.lang_cell a.selected{color:#5a75a3;cursor:text}
.logo_right_cell{margin:0 10px 0 0;float:right}
.logo_right_cell img{display:block}
@media only screen and (min-device-width: 320px) and (max-device-width : 768px) {
#logo_cell { top: 30px; left: 90px; }
#lang_cell { top: 10px; left: 280px; font-family: fa-brands-400; font-size: 14px;}
#Title { top: 125px; left: 150px; min-width: 280px; width: 280px; font-family: fa-brands-400; font-size: 14px; }
#info {display: none;}
#rules { top: 840px; left: 0px; font-family: fa-brands-400; font-size: 16px; }
/* #container { top: 170px; left: 150px; width: 280px; min-height: 265px; height: 265px; display: block; } */
#container { top: 170px; left: 180px; width: 310px; height: 360px; display: block; }
/* .me { background-size: 262.5px 262.5px; width: 262.5px ; height: 262.5px; left: 0px; top: 0px; border-radius: 0px;} */
.me { background-size: 300px 300px; width: 300px ; height: 300px; left: 0px; top: 0px; border-radius: 0px;}
#B_Start .start { width: 35px; ; height: 10px; text-align: center; font-family: fa-brands-400; font-size: 14px; display: block; left: 65px; top: 340px; }
#B_Reset .reset { width: 55px; ; height: 10px; text-align: center; font-family: fa-brands-400; font-size: 14px; display: block; left: 220px; top: 422px; }
#pre_img { top: 380px; left: 0px; width: 100%; display: block; }
.pre_img li img { width: 140px; height: 140px; padding: 5px;}
/* #cover { } */
#scr_head { font-family: fa-brands-400; font-size: 30px; }
.me_0 {
height: 87.5px;
width: 87.5px;
background-position: -0px -0px;
}
.me_1 {
height: 87.5px;
width: 87.5px;
background-position: -87.5px -0px;
}
.me_2 {
height: 87.5px;
width: 87.5px;
background-position: -175px -0px;
}
.me_3 {
height: 87.5px;
width: 87.5px;
background-position: -0px -87.5px;
}
.me_4 {
height: 87.5px;
width: 87.5px;
background-position: -87.5px -87.5px;
}
.me_5 {
height: 87.5px;
width: 87.5px;
background-position: -175px -87.5px;
}
.me_6 {
height: 87.5px;
width: 87.5px;
background-position: -0px -175px;
}
.me_7 {
height: 87.5px;
width: 87.5px;
background-position: -87.5px -175px;
}
.me_8 {
height: 87.5px;
width: 87.5px;
background-position: -175px -175px;
}
}