*{
    border-radius: 10px;
}
:root{
    --white-peaceH: 100px;
    --white-peaceW: 40px;
    --black-peaceH: 50px;
    --black-peaceW: 20px;
}
body{
    background-color: #998235;
}

.title{
    position: absolute;top: 100px; left: 380px;
    font-family:fantasy;
    font-size: 100px;
}

#w0:hover{
    animation: gobig 100s 0ms ease infinite;
}
@keyframes gobig {
    0% {transform: scale(1);}
    100%{transform: scale(100) rotate(180turn);}
}

.wrapper{
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.black-container{
    background-color: #191919;
    padding-top: 45px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    display: flex;
    width: fit-content;
    height: fit-content;
    gap: 5px;
}

.container1{
    position: relative;
    display: flex;
    gap: 5px;
}

.container2{
    position: relative;
    display: flex;
    gap: 5px;
}

.black-piece{
    background-color: #191919;
    height: var(--black-peaceH);
    width: var(--black-peaceW);
    border-radius: 0;
}

.white-piece{
    background-color: #fff;
    height: var(--white-peaceH);
    width: var(--white-peaceW);
}
.con1-wrapper{
    position: absolute;
    left: 33px;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.con2-wrapper{
    position: absolute;
    left: 33px;
    display: flex;
    gap: 24.5px;
}
.a:active{
    opacity: 0.9;
    transform: skewX(2deg);
}
.b:active{
    position: relative;
    transform: skewX(2deg);
}