body {
    --color: cadetblue; 
    --color2: lightslategrey;
    user-select: none;
}

.board div div {
    width: 75px;
    height: 75px;
    border: 1px solid black;
    display: inline-block;
    margin: -2.5px;
    text-align: center;
    font-size: 50px;
    vertical-align: top;
}
.board div {
    z-index: -1;
}
#start {
    position: absolute;
    right: 30%;
    width: 605px;
    border: 3px solid black;
    height: 575.5px;
    padding: 10px;
    background-color: var(--color);
    border-radius: 10px;
}
#start #next {
    position: absolute;
    top: 42%;
    border: 3px solid black;
    width: 300px;
    text-align: center;
    left: 25%;
    background-color: var(--color);
    border-radius: 5px;
    font-family: sans-serif;
    height: 50px;
    color: black;
    font-size: 25px;
}
#start #next2 {
    position: absolute;
    top: 52.5%;
    border: 3px solid black;
    width: 250px;
    text-align: center;
    left: 29%;
    background-color: var(--color);
    border-radius: 5px;
    font-family: sans-serif;
    height: 30px;
    color: black;
    font-size: 20px;
}
#next div {
    position: absolute;
    left: 28%;
    top: 10px;
}
#next2 div {
    position: absolute;
    left: 33%;
    top: 4px;
}

.grid-b {
    background-color: var(--color2);
}
.grid-w {
    background-color: whitesmoke;
}
.board {
    position: absolute;
    right: 30%;
    width: 605px;
    border: 3px solid black;
    padding: 10px;
    z-index: -1;
    border-radius: 10px;
    background-color: var(--color);

}
#timer {
    position: absolute;
    left: 71%;
    width: 100px;
    height: 50px;
    text-align: center;
    border: 3px solid black;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 22px;
    background-color: var(--color);
    z-index: 1;
    top: 32%;
}
#timers {
    position: absolute;
    left: 71%;
    width: 100px;
    height: 50px;
    text-align: center;
    border: 3px solid black;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 22px;
    background-color: var(--color);
    z-index: -1;
    top: 32%;
}
#bclock {
    position: absolute;
    left: 71%;
    width: 100px;
    height: 50px;
    text-align: center;
    border: 3px solid black;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 22px;
    top: 3.5%;
}
#wclock {
    position: absolute;
    left: 71%;
    width: 100px;
    height: 50px;
    text-align: center;
    border: 3px solid black;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 22px;
    top: 69%;
}
#change {
    position: absolute;
    left: 71%;
    width: 100px;
    height: 50px;
    text-align: center;
    border: 3px solid black;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 22px;
    background-color: var(--color);
    top: 41%;
}
#end {
    position: absolute;
    right: 30%;
    width: 605px;
    border: 3px solid black;
    height: 575.5px;
    padding: 10px;
    background-color: var(--color);
    border-radius: 10px;
    z-index: -2;
    text-align: center;
}
#endw {
    position: absolute;
    top: 43%;
    color: white;
    font-size: 50px;
    font-family: sans-serif;
    left: 28%;
    visibility: hidden;
}
#endb {
    position: absolute;
    top: 43%;
    color: white;
    font-size: 50px;
    font-family: sans-serif;
    left: 29%;
    visibility: hidden;
}
#pause {
    position: absolute;
    top: 43%;
    color: white;
    font-size: 50px;
    font-family: sans-serif;
    left: 25%;
    visibility: hidden;
}
#colors {
    position: absolute;
    left: 23%;
}
#colors div {
    height: 30px;
    width: 30px;
    border: 3px solid black;
    top: 20px;
}
#color1 {
    background-color: lightslategrey;
}
#color2 {
    background-color: peru;
}
#color3 {
    background-color: pink;
}
#color4 {
    background-color: brown;
}
#undo {
    position: absolute;
    left: 23%;
    top: 25%;
}
#undo div {
    background-color: var(--color);
    font-size: 25px;
    font-family: sans-serif;
    text-align: center;
    height: 30px;
    width: 30px;
    border: 3px solid black;
    top: 70px;
}