@charset "UTF-8";
body{margin: 0%;padding: 0%; background-color:rgb(184, 184, 184);}
.cademe{
    position: fixed;
    top:10%;
    left: 30%;
    width:40%;
    border: 2px solid rgb(63, 62, 61); 
    background-image:linear-gradient(rgb(184, 184, 184),rgb(151, 145, 145));
    height:20%;
    font-size: 2.4vmax;
    text-align: center;
    padding-top: 5%;
    color:rgb(22, 20, 20);
    font-family: cursive;
    display: none;
}
.mesa{

    position: absolute;
    border: 3px solid rgb(112, 72, 25);
    border-radius: 10px;
    width: 70% ;
    height: 74%;
    top:13%;
    left: 15%;
}
.dropesquerdo{
    position: absolute;
    border: none;
    top:13%;
    z-index: 1;
    border-radius: 10px;
    left: 15%;
    width: 32% ;
    height:66%;
    background-color: transparent;
}
.dropdireito{
    position: absolute;
    border: none;
    background-color: transparent;
    border-radius: 10px;
    z-index: 1;
    left: 49%;
    top:13%;
    width: 36% ;
    height: 66%;
}
.emc, .emd ,.eme{
    position: absolute;
    background-size: 100% 100%;
    width: 1.5vmax;
    height: 2.5vmax;
    top: 50%;
}
.emc{
    left: 46%;
}
.eme{
    left: 43%; 
    transform: rotate(270deg); 
}
.emd{
    left: 49%;
    transform: rotate(90deg);
}
.pec{
    display:inline-block;
    border:0px;
    border-radius: 5%;
    background: no-repeat;
    background-image: url('pec/padr.png');
    background-size: 100% 100%;
}
.pec:hover{
    background-color: brown;
}

.jogador,.bot0,.bot1,.bot2,.cobrejo1{
    white-space:nowrap;
    overflow:hidden; 
    position: absolute;
}
.jogador{
    top:90%;
    width:50%;
    left: 33%;
    background-color: transparent;
}.jogador .pec{
    cursor: pointer;
    width:9% ;
    height: 4.5vmax;
}
.cobrejo1{
    width:100%;
    height:100%;
    z-index:1;
}
.mostrar, .cobrir{
    position: absolute;
    top: 0%;
    right:0% ;
    width:3vmax;
    height:2vmax;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
    background-size: 100% 100%; 
}
.mostrar{
    background-image: url('img/olhofech.png');
}
.cobrir{
    background-image: url('img/olhoabe.png');
}
.cobrejo1 button{
    cursor: pointer;
    position: absolute;
    left: 44%;
    top: 55%;
    width:8%;
    height:10%;
    border: none;
    background-color: transparent;
    background-image: url('img/recarre.png');
    border-radius: 100%;
    background-size: 100% 100%;
    display: none;
}
.bot0{  
    top: 19%;
    width:7.5%;
    left: 90%;
}
.bot0 .pec{
    display: block;
    transform: rotate(270deg); 
    margin-left: 13%;
    width: 70%;
    height: 5vmax;
}
.bot1{  
    bottom: 88%;
    width:50%;
    left: 33%;   
}
.bot1 .pec{
    width:9% ;
    height: 4.9vmax;
    transform: rotate(180deg); 
}
.bot2{  
    top:19%;
    width:7.5%;
    right: 90%;
       
}
.bot2 .pec{
    display: block;
    margin-left: 13%;
    width: 70%;
    height: 5vmax;    
    transform: rotate(90deg);
}
.passar{
    cursor: pointer;
    width:15%;
    position: absolute;
    bottom: 1%;
    background-color: rgb(24, 23, 23);
    border: none;
    color:whitesmoke;
    display:none;
    font-size: 2vmax;
}
footer{
    position: absolute;
    left: 33%;
    z-index: 1;
    bottom: 0%;
    display: none;
    border-top-left-radius: 60%;
    border-bottom-right-radius: 10%;
    color: rgb(245, 234, 234);
    font-size: 2.8vmax;
    text-align: center;
    background-color: rgb(54, 53, 53);
    width: 35%;
    height: 4.1vmax;
}
footer p{
    margin-top: 2.3%;
}
footer a{
    text-decoration: none;
    color: rgb(189, 189, 189);
}