*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --squareLen: min(10vw, 10vh);
    --halfSquareLen: calc(var(--squareLen)/2);
}

body {
    margin: 0;
    /* background-color: #edebe9; */
    background-image: linear-gradient(to top,#edebe9,rgb(170, 144, 255));
    font-family: Arial, Helvetica, sans-serif;
}

.boardTimerFlexbox {
    display: flex;
    align-items: center;
}

.timerWrapper {
    background-color: whitesmoke;
    padding: calc(var(--squareLen) * 0.1);
    border: grey solid calc(var(--squareLen) * 0.05);
}

.timer {
    display: flex;
    background-color: white;
    border: grey solid calc(var(--squareLen) * 0.05);
    margin: calc(var(--squareLen) * 0.05);
    height: var(--squareLen);
    width: calc(var(--squareLen) * 4);
    justify-content: center;
    align-items: center;
    font-size: calc(var(--squareLen) * 0.7);
}

.timer.green {
    background-color: rgb(67, 225, 67);
}

.timerWrapper button {
    border: none;
    margin: calc(var(--squareLen) * 0.05);
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--squareLen) * 0.5);
    height: calc(var(--squareLen) * 0.6);
    width: calc(var(--squareLen) * 4);
}

.timerWrapper button:hover {
    background-color: rgb(130, 190, 40);
}

.timerWrapper select {
    border: none;
    margin: calc(var(--squareLen) * 0.05);
    background-color: rgb(225, 225, 225);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--squareLen) * 0.5);
    height: calc(var(--squareLen) * 0.6);
    width: calc(var(--squareLen) * 4);
}

.timerWrapper .scoreDisplay {
    border: none;
    margin: calc(var(--squareLen) * 0.05);
    background-color: rgb(225, 225, 225);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--squareLen) * 0.5);
    height: calc(var(--squareLen) * 0.6);
    width: calc(var(--squareLen) * 4);
}

.timerWrapper input {
    border: none;
    margin: calc(var(--squareLen) * 0.05);
    background-color: rgb(255, 251, 168);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--squareLen) * 0.5);
    height: calc(var(--squareLen) * 0.6);
    width: calc(var(--squareLen) * 4);
}





.board {
    margin: 0% calc(var(--squareLen) * 0.5);
    display: grid;    
    grid-template-columns: repeat(8, var(--squareLen));
}

.square {
    margin: 0px;
    padding-bottom: 100%;
    background-color: #f4dcb4;
    position: relative;
}

.square:nth-child(n+1):nth-child(-n+8):nth-child(2n),
.square:nth-child(n+9):nth-child(-n+16):nth-child(2n+1),
.square:nth-child(n+17):nth-child(-n+24):nth-child(2n),
.square:nth-child(n+25):nth-child(-n+32):nth-child(2n+1),
.square:nth-child(n+33):nth-child(-n+40):nth-child(2n),
.square:nth-child(n+41):nth-child(-n+48):nth-child(2n+1),
.square:nth-child(n+49):nth-child(-n+56):nth-child(2n),
.square:nth-child(n+57):nth-child(-n+64):nth-child(2n+1)
{
    background-color: #b48c64;
}

.square img {
    position: absolute;
    width: calc(var(--squareLen)*0.90);
    height: calc(var(--squareLen)*0.90);
    margin: calc(var(--halfSquareLen));
    transform: translate(-50%, -50%);
    border: none;
}

.square img.smallImage {
    opacity: 0.7;
    position: absolute;
    z-index: 10;
    width: calc(var(--squareLen)/2);
    height: calc(var(--squareLen)/2);
    margin: calc(var(--halfSquareLen)/2);
    transform: translate(50%, 50%);
    border: none;
}

.square.selected {
    background-color: #d0d46c;
}

.square.selected:nth-child(n+1):nth-child(-n+8):nth-child(2n),
.square.selected:nth-child(n+9):nth-child(-n+16):nth-child(2n+1),
.square.selected:nth-child(n+17):nth-child(-n+24):nth-child(2n),
.square.selected:nth-child(n+25):nth-child(-n+32):nth-child(2n+1),
.square.selected:nth-child(n+33):nth-child(-n+40):nth-child(2n),
.square.selected:nth-child(n+41):nth-child(-n+48):nth-child(2n+1),
.square.selected:nth-child(n+49):nth-child(-n+56):nth-child(2n),
.square.selected:nth-child(n+57):nth-child(-n+64):nth-child(2n+1) {
    background-color: #b0a43c;
}

.square.magicSquare {
    background-color: #ffe604 !important;
}

/* Threat indicators */
.square.whiteThreat {
    z-index: 100;
    box-shadow: inset 0px 0px calc(var(--squareLen)/60) calc(var(--squareLen)/60) rgb(21, 0, 255);
}

.square.blackThreat {
    z-index: 100;
    box-shadow: inset 0px 0px calc(var(--squareLen)/60) calc(var(--squareLen)/60) rgb(255, 0, 0);
}

.square.whiteThreat.blackThreat {
    z-index: 100;
    box-shadow: inset 0px 0px calc(var(--squareLen)/30) calc(var(--squareLen)/30) rgb(66, 0, 74);
}

/* buttons and stuff */
.displayFlexbox {
    display: flex;
    margin: calc(var(--squareLen) * 0.1);
    justify-content: flex-start;
    align-items: stretch;
}

.displayFlexbox div {
    align-self: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: calc(var(--squareLen) * 0.3);
    margin-left: calc(var(--squareLen) * 0.1);
    margin-right: calc(var(--squareLen) * 0.1);
}

.displayFlexbox button {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    width: var(--squareLen);
    margin: 0 calc(var(--squareLen) * 0.3);
    font-size: calc(var(--squareLen) * 0.2);
    background-color: rgb(114, 213, 180);
}

.displayFlexbox button:hover {
    opacity: 0.7;
}




/* Overriding classes */
.hide {
    display: none;
}