*{
margin: 0;
padding: 0;
}
body{
background: #ddd;
}
#board{
width: 600px;
height: 600px;
border:3px #333 solid;
}
#board div div{
float: left;
width: 75px;
height: 75px;
box-sizing:border-box;
border: #000 solid .01cm;
}
#board .even div:nth-child(even){
background: #ccd;
}
#board .even div:nth-child(odd){
background: rgb(112,112,112);/*621700*/
}
#board .odd div:nth-child(even){
background: rgb(112,112,112);/*621700*/
}
#board .odd div:nth-child(odd){
background: #ccd;
}
.animate{
animation: rotateBoard 1s ease-out;
animation-fill-mode: both;
}
@keyframes rotateBoard {
0% {
transform: rotateZ(0);
}
100%{
transform: rotateZ(-180deg);
}
}
.forward{
transform: rotateZ(-180deg);
}
.backward{
transform: rotateZ(0);
}
.animate-backward{
animation: rotateBoardBackward 1s ease-out;
animation-fill-mode: both;
}
@keyframes rotateBoardBackward {
0% {
transform: rotateZ(-180deg);
}
100%{
transform: rotateZ(0);
}
}
img{
width: 75px;
height: 75px;
}
.allowed{
opacity: .8;
background: radial-gradient(#333,#222 )!important;
/*-webkit-box-shadow: inset 1px -4px 92px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 1px -4px 92px 0px rgba(0,0,0,0.75);
box-shadow: inset 1px -4px 92px 0px rgba(0,0,0,0.75);*/
border:1px solid black !important;
}
.clicked-square{
background: radial-gradient(#333,#222 )!important;
border:1px solid black !important;
}
#sematary img{
transform: rotateZ(0);
}
#whiteSematary{
position: absolute;
top: 0;
left: 610px;
width: 180px;
}
#blackSematary{
position: absolute;
top: 0;
left: -190px;
width: 180px;
}
#blackSematary div{
overflow-y: auto;
margin-bottom: 2px;
}
#blackSematary img{
float: right;
}
#sematary img{
width: 60px;
height: 60px;
}
#endscene{
position: relative;
display: none;
opacity: 0;
z-index: 1;
}
.overlay{
position: fixed;
width: 100%;
height: 100%;
background: #000;
opacity: .5;
}
#endscene p{
position: fixed;
color:#fff;
z-index: 2;
width: 100%;
text-align: center;
margin-top: 40vh;
font-size: 40px;
}
.show{
display: block !important;
animation: showMessage 1s ease-out;
animation-fill-mode: both;
}
@keyframes showMessage {
0% {
opacity: 0;
}
100%{
opacity: 1;
}
}
#turn{
text-align: center;
font-size: 18px;
}
.winning-sign:first-letter{
text-transform: uppercase;
}
.flip-board{
padding: 10px 20px;
border-radius: 5px !important;
outline: 0;
background: #7f979e;
color: white;
border: 0;
}