body {
    /* background: rgb(59, 98, 143); */
    background:url("../img/dicechess.webp") 100%;
    color: whitesmoke;
    font-family: Roboto;
    padding:0px 30px;
}

header {
    text-align: center;
    max-width: 600px;
    margin: auto;
}

main, header{
    padding:1px 0px 0px 0px;
    border-radius: 10px;
    background-color:rgba(0, 0, 0, 0.65);

}

h2,h4 {
    margin:10px;
}

.piece-417db {
    position: relative;
    bottom: 5px;
}

#controls{
    position:absolute;
    right:2%;
}

#controls>div{
    display:flex;
    flex-direction: column;
    max-width:250px;
}

button{
    padding:8px;
    border-radius:5px;
    background:white;
    border:1px solid black;
    color:black;
    font-family: Roboto;
    font-weight: 400;
}

button:disabled{
    background:darkgray;
    text-decoration: line-through;
}

#controls>div>button{
    margin:5px;
}

#chessBoard {
    transition: 3s all;
    max-width: min(450px, 80%);
    max-height: min(450px, 80%);
    margin: auto;
    padding:auto;
    display:block;
}

.black-3c85d{
    background: rgba(100, 60, 20, 0.75);
    border-radius:20%;
    transition:1s all;
}

.white-1e1d7{
    background:rgba(255, 210, 167, 0.75);
    border-radius:10%;
    transition:1s all;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.white-1e1d7:hover, .black-3c85d:hover {
    /* transform:rotate(360deg); */
    transform: scale(1.5);
}



#chessBoard > * > * {
    margin: auto;
}


#chessBoard.active {
    box-shadow: 0px 0px 144px -25px white;
}

#chessBoard.bad {
    box-shadow: 0px 0px 144px -25px red;
}

#chessBoard.good {
    box-shadow: 0px 0px 144px -25px green;
}


#chessBoard {
    position: relative;
    transition: 2.5s all;
    background: radial-gradient(rgba(255,255,255,0.5), rgba(0,0,0,0.0));
}

#chessBoard::before, #chessBoard::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    opacity: 0;
    transition: opacity 2.5s;
    z-index:-100;
}

#chessBoard.bad::before {
    background: radial-gradient(rgba(255,100,100,0.75), rgba(0,0,0,0.4));
    opacity: 1;
    z-index:-100;
}

#chessBoard.good::after {
    background: radial-gradient(rgba(100,255,100,0.75), rgba(0,0,0,0.4));
    opacity: 1;
    z-index:-100;
}
  










header input {
    width: 20em;
}



#toMove {
    margin-bottom: 0px;
    margin-top:0px;
    text-align:center;
}


/* Dice Styles */

.dice * {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}


.dice {
    align-items: center;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    grid-template-rows: auto;
    justify-items: center;
    padding: 2rem;
    perspective: 600px;

    max-width:400px;
    margin: auto;
    transform: scale(0.5);
    transform-origin:top;
}

.die-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 6rem;
    list-style-type: none;
    transform-style: preserve-3d;
    width: 6rem;
}

.even-roll {
    transition: transform 1.5s ease-out;
}

.odd-roll {
    transition: transform 1.25s ease-out;
}

.die-item {
    background-color: #fefefe;
    box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
        inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-areas:
        "one two three"
        "four five six"
        "seven eight nine";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    padding: 1rem;
    width: 100%;
}

.dot {
    align-self: center;
    background-color: #676767;
    border-radius: 50%;
    box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);
    display: block;
    height: 1.25rem;
    justify-self: center;
    width: 1.25rem;
}

.even-roll[data-roll="1"] {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}

.even-roll[data-roll="2"] {
    transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}

.even-roll[data-roll="3"] {
    transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}

.even-roll[data-roll="4"] {
    transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}

.even-roll[data-roll="5"] {
    transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}

.even-roll[data-roll="6"] {
    transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}

.odd-roll[data-roll="1"] {
    transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}

.odd-roll[data-roll="2"] {
    transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}

.odd-roll[data-roll="3"] {
    transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
}

.odd-roll[data-roll="4"] {
    transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
}

.odd-roll[data-roll="5"] {
    transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
}

.odd-roll[data-roll="6"] {
    transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}

[data-side="1"] {
    transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
}

[data-side="2"] {
    transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
}

[data-side="3"] {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
}

[data-side="4"] {
    transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
}

[data-side="5"] {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
}

[data-side="6"] {
    transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
}

[data-side="1"] .dot:nth-of-type(1) {
    grid-area: five;
}

[data-side="2"] .dot:nth-of-type(1) {
    grid-area: one;
}

[data-side="2"] .dot:nth-of-type(2) {
    grid-area: nine;
}

[data-side="3"] .dot:nth-of-type(1) {
    grid-area: one;
}

[data-side="3"] .dot:nth-of-type(2) {
    grid-area: five;
}

[data-side="3"] .dot:nth-of-type(3) {
    grid-area: nine;
}

[data-side="4"] .dot:nth-of-type(1) {
    grid-area: one;
}

[data-side="4"] .dot:nth-of-type(2) {
    grid-area: three;
}

[data-side="4"] .dot:nth-of-type(3) {
    grid-area: seven;
}

[data-side="4"] .dot:nth-of-type(4) {
    grid-area: nine;
}

[data-side="5"] .dot:nth-of-type(1) {
    grid-area: one;
}

[data-side="5"] .dot:nth-of-type(2) {
    grid-area: three;
}

[data-side="5"] .dot:nth-of-type(3) {
    grid-area: five;
}

[data-side="5"] .dot:nth-of-type(4) {
    grid-area: seven;
}

[data-side="5"] .dot:nth-of-type(5) {
    grid-area: nine;
}

[data-side="6"] .dot:nth-of-type(1) {
    grid-area: one;
}

[data-side="6"] .dot:nth-of-type(2) {
    grid-area: three;
}

[data-side="6"] .dot:nth-of-type(3) {
    grid-area: four;
}

[data-side="6"] .dot:nth-of-type(4) {
    grid-area: six;
}

[data-side="6"] .dot:nth-of-type(5) {
    grid-area: seven;
}

[data-side="6"] .dot:nth-of-type(6) {
    grid-area: nine;
}



@media (min-width: 900px) {
    .dice {
        perspective: 1300px;
    }
}