body{margin:0px;padding:0px;background-image:url('bg.png');
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;


}

#promo{text-align:center;}
#itx1{padding:10px;margin-top:20px;}
#ipix1{margin-top:30px;}

#preboard{text-align:center;height:50px;background-color:white;font-size:35px;font-family: mono;}

#lumessage{text-align:center;width:100%;font-size:90px;margin-top:60px;font-family: mono;}

#tstArea{width:500px;margin:auto;}

@font-face {
    font-family: mono;
    src: url('monofonto.ttf'); 
	 
    }

#gameArea{width:650px; margin:auto;height:580px;background-color:#80c1c3;margin-top:50px;padding:3px;box-sizing:border-box;}
#gamePage{width:644px; height:574px;margin:auto; background-color:#80c1c3;}

#titlePage{width:644px; height:574px;margin:auto; background-color:#80c1c3;}


#itx1{font-family:calibri;font-size:20px;text-align:center;}
#ipix1{text-align:center;}
#ipix2{text-align:center;}

#block1{width:100%;height:290px;}
#block2{width:100%;height:130px;background-color:#568183;}

#titleText{font-size:140px;font-family:mono;text-align:center;color:white;padding-top:50px;}

#butangArea{padding-top:40px;width:400px;margin:auto;}

#butang1{cursor:pointer;color:white;background-color: #2ecc71;width:115px;float:left;text-align:center;padding:9px;font-family:calibri;}
#butang1:hover{opacity:.6;}

#butang2{cursor:pointer;color:white;background-color: #2ecc71;width:115px;float:right;text-align:center;padding:9px;font-family:calibri;}
#butang2:hover{opacity:.6;}


#butang3{float:left;cursor:pointer;color:white;background-color: #2ecc71;width:100px;text-align:center;padding:9px;font-family:calibri;margin-top:5px;}
#butang3:hover{opacity:.6;}

#butang3a{float:left;margin-left:30px;cursor:pointer;color:white;background-color: #ec644b;width:90px;text-align:center;padding:9px;font-family:calibri;margin-top:5px;}
#butang3a:hover{opacity:.6;}

#butang3b{float:right;cursor:pointer;color:white;background-color: #66b4d5;width:30px;text-align:center;padding:9px;font-family:calibri;margin-top:5px;}
#butang3b:hover{opacity:.6;}

#butang3d{margin:auto;cursor:pointer;color:white;background-color: #2ecc71;width:100px;text-align:center;padding:9px;font-family:calibri;margin-top:5px;}
#butang3d:hover{opacity:.6;}

 #butang4{color:white;background-color: #66b4d5;width:100px;margin:auto;text-align:center;padding:9px;font-family:calibri;margin-top:5px;cursor:pointer;}
#butang4:hover{opacity:.6;}



#board{margin:auto;background-color:#2081b6; width:280px;}

.line{height:70px;width:100%;}
.oline{height:92px;width:520px;margin:auto;background-color:#339BC7;border-radius:5px;padding:4px;margin-top:4px;}

.blank{background-color:#c1c2bd;margin:2px;float:left;width:66px;height:66px;font-family:mono;font-size:45px;color:#ececec;text-align:center;line-height:66px;}
.oblank{background-color:#f9bf3b;margin:2px;float:left;width:36px;height:42px;font-family:mono;font-size:30px;color:#ececec;text-align:center;cursor:pointer;line-height:42px;}


.clicko{cursor:pointer;}
 

.clickable{cursor:pointer;}

.oblank2{opacity:.5;}

.tileType1{background-color:#6c7a89;}
.tileType1x:hover{background-color:#95a5a6;}

.tileType2{background-color:#95a5a6;}

.tileType3{background-color:#f1d693}
.tileType4{background-color:#019875;}


#controlArea1{width:100%;height:30px;text-align:center;font-size:25px;font-family:monofonto;}
#controlArea2{width:344px;margin:auto;height:40px;  }


 


@media screen and (max-width:690px) {
#gameArea{width:98%;padding:0px; margin:auto;margin-top:30px;}
}


@media screen and (max-width:640px) {
#titlePage{width:100%; height:540px;}
#gamePage{width:100%; }
}



@media screen and (max-width:545px) {
.line{height:70px;width:100%;}
.oline{height:92px;width:442px;margin:auto;background-color:#339BC7;border-radius:5px;padding:4px;margin-top:4px;}


.oblank{background-color:#f9bf3b;margin:2px;float:left;width:30px;height:42px;font-family:mono;font-size:30px;color:#ececec;text-align:center;cursor:pointer;line-height:42px;}
}



@media screen and (max-width:510px) {
 #controlArea1{height:50px;}
#tstArea{width:300px;margin:auto;}
}

@media screen and (max-width:460px) {
 #titleText{font-size:100px;font-family:mono;text-align:center;color:white;padding-top:50px;}
#butangArea{padding-top:40px;width:300px;margin:auto;}
}


@media screen and (max-width:465px) {
 .oline{height:102px;width:306px;margin:auto;background-color:#339BC7;border-radius:5px;padding:2px;margin-top:4px;}
.oblank{background-color:#f9bf3b;margin:2px;float:left;width:30px;height:30px;font-family:mono;font-size:30px;color:#ececec;text-align:center;cursor:pointer;line-height:30px;}


}


@media screen and (max-width:400px) {
#ipix1x img{width:100%}
}







@media screen and (max-width:360px) {
 
#preboard{text-align:center;height:40px;background-color:white;font-size:30px;font-family: mono;}

#controlArea2{width:306px;margin:auto;height:40px;  }
#butang3{float:left;cursor:pointer;color:white;background-color: #2ecc71;width:100px;text-align:center;padding:9px;font-family:calibri;margin-top:5px;}
#butang3:hover{opacity:.6;}

#butang3a{float:left;margin-left:16px;cursor:pointer;color:white;background-color: #ec644b;width:90px;text-align:center;padding:9px;font-family:calibri;margin-top:5px;}
#butang3a:hover{opacity:.6;}

#butang3b{float:right; cursor:pointer;color:white;background-color: #66b4d5;width:30px;text-align:center;padding:9px;font-family:calibri;margin-top:5px;}
#butang3b:hover{opacity:.6;}
}