* {
    padding: 0 ;
    margin: 0 ;
    box-sizing: border-box ;
    user-select: none ;
    outline: none ;
}

:root {
    --queen-white : url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-4%20-12%2056%2062%22%3E%3Cpath%20stroke%3D%22%23888%22%20stroke-width%3D%224px%22%20stroke-miterlimit%3D%220%22%20fill%3D%22none%22%20d%3D%22M2%202%20l12%2024%20l10%20-24%20l10%2024%20l12%20-24%20l-4%2042%20l-36%200%20z%22%20%2F%3E%3C%2Fsvg%3E");
    --queen-black : url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-4%20-12%2056%2062%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%224px%22%20stroke-miterlimit%3D%220%22%20fill%3D%22none%22%20d%3D%22M2%202%20l12%2024%20l10%20-24%20l10%2024%20l12%20-24%20l-4%2042%20l-36%200%20z%22%20%2F%3E%3C%2Fsvg%3E");
}

html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}

.wrapper {
    position: absolute ;
    top: 0 ;
    left: 0 ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
    flex-direction: column ;
    width: 100%;
    height: 100% ;
    color: #FFFFFF ;
    flex-direction: column ;
}

.background {
    position: absolute ;
    top : 0 ;
    left: 0 ;
    width : 100% ;
    height: 100% ;
    background-color: white;
    z-index: -1 ;
}

  .title {
    margin-bottom: 1rem ;
    font-size: 1.5rem ;
    background-color: #BB96FF ;
    animation: hueRotate 20s linear infinite;
}  

.title span {
    color: #000 ;
    mix-blend-mode: overlay ;
}

/* -- CSS for Board -- */

.board {
    --boardSize : 8 ;
    display: grid ;
    width : 60vmin;
    height: 60vmin;
    background-color:burlywood ;
    /* animation: hueRotate 20s linear infinite; */
    grid-template-columns: repeat(var(--boardSize),1fr);
    grid-template-rows   : repeat(var(--boardSize),1fr);
    padding: 2px ;
}

.board .grid {
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    mix-blend-mode: overlay ;
}

.board .block {
    mix-blend-mode : overlay ;
}

.board .black {
    background-color: black ;
}

.board .black-queen {
    background-image: var(--queen-black);
    background-repeat: no-repeat ;
    background-position: center ;
    background-size: 50% ;
}

.board .white-queen {
    background-image: var(--queen-white);
    background-repeat: no-repeat ;
    background-position: center ;
    background-size: 50% ;
}

.controls {
    position: relative ;
    width : 75vmin ;
    margin-top: 1rem ;
    display: flex ;
    background-color: #BB96FF ;
    animation: hueRotate 20s linear infinite;
}

.controls .left {
    flex: 1 ;
    display: flex ;
    justify-content: flex-start;
}

.controls .right {
    flex: 1 ;
    display: flex ; 
    justify-content: flex-end ;
}

.controls .right input {
    float: right ;
}

.controls .left input {
    float: left ;
}


.controls .field label {
    display: block ;
    font-size: large;
    color: #000 ;
   /* mix-blend-mode: overlay ; */
}

.controls .field input {
    width : 4rem ;
    height: 2.5rem ;
    text-align: center ;
    background-color: transparent ;
    color: #000 ;
    mix-blend-mode: overlay ;
    border: 0 ;
    font-size: 1.5rem ;
    font-weight: 700 ;
}

@media (max-width:600px){
    .controls {
        font-size: 0.75rem ;
    }
}

/* -- Animations -- */

@keyframes hueRotate {
    0%   { filter: hue-rotate(0deg);   }
    100% { filter: hue-rotate(360deg); }
}