html {
    overflow: hidden;
    background-image: url(../imgs/bg3.jpg);
    background-size: cover;
}

body {
    background-image: url(../imgs/circulopreto.png);
    background-size: initial;
    background-color: transparent;
    background-position: 45.4% -12%;
    background-repeat: no-repeat;

    position: relative;
    right: -50px;
}


#full {
    margin-left:auto;
    margin-right:auto;
    width:20%;
    margin-top:10%;
}


#jogo, #control{
    width: 522px;
    height: 522px;
    text-align: center;
    display: block;
    margin: 0 auto;
    position: relative;
    right: 100px;
    top: 60px;
}

.peca {

    width: 50%;
    height: 253px;
    margin: 0px;
}

#peca1{
    /* border-top-left-radius:100%;*/
    background-image: url("../imgs/peca1.png");
    background-size: cover;
}

#peca2{
    /*border-top-right-radius:100%;*/
    background-image: url("../imgs/peca2.png");
    background-size: cover;
}

#peca3{
    /*border-bottom-left-radius:100%;*/
    background-image: url("../imgs/peca3.png");
    background-size: cover;

}

#peca4{
    /*border-bottom-right-radius:100%;*/
    background-image: url("../imgs/peca4.png");
    background-size: cover;
}

.peca1unsel{}
.peca2unsel{}
.peca3unsel{height: 265px;}
.peca4unsel{height: 265px;}

.peca1sel{filter: brightness(200%);}
.peca2sel{filter: brightness(200%);}
.peca3sel{filter: brightness(200%); height: 265px;}
.peca4sel{filter: brightness(200%); height: 265px;}

.table1 {
    margin-top: 70px;
}