#chessEasterEgg .modal-content {
    background: linear-gradient(-45deg,#1a1a1a,#333,#111,#222);
    background-size: 400% 400%;
    animation: 10s infinite gradientFlow;
    border: 2px solid gold;
    box-shadow: 0 0 30px #ffd70099
}

@keyframes gradientFlow {
    0%,100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

#board {
    height: 400px;
    width: 400px;
    margin: 0 auto
}

#chessMessage {
    font-weight: 700;
    color: red;
    margin-top: 10px
}

[class*=square-] {
    position: relative;
    overflow: visible
}

#board img {
    pointer-events: none;
    user-select: none
}

.move-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    height: 25%;
    background-color: rgba(180,180,180,.5);
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(.8);
    pointer-events: none;
    z-index: 5;
    animation: .3s ease-out forwards fadeDot
}

    .move-indicator.capture {
        background-color: rgba(255,60,60,.6)
    }

.king-check {
    box-shadow: 0 0 0 3px rgba(255,0,0,.7) inset !important;
    z-index: 4
}

@keyframes fadeDot {
    0% {
        opacity: 0;
        transform: translate(-50%,-50%) scale(.3)
    }

    100% {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1)
    }
}