main{display:flex;flex-direction:row}body{margin:0%;background-color:#ede6d6}header{display:flex;align-items:center;justify-content:center;background-color:#b58863;height:100px;width:100%}header>span{color:#fffdd0;font-family:Inter;font-weight:400;font-size:25px}header>img{height:80px;width:80px}.boardElement{position:absolute;left:50%;transform:translate(-50%);display:grid;grid-template-columns:repeat(8,auto);background-color:#f0d9b5;margin:65px auto auto;width:600px;height:600px}.squareElement{position:relative;width:75px;height:75px;margin:0;padding:0}.pieceImg{position:absolute;width:75px;height:75px;left:0;top:0}.smallPieceImg{position:relative;width:20px;height:20px;left:0;top:0;margin-right:-10px}.lightCircle{position:absolute;height:20px;width:20px;background-color:#666;opacity:50%;border-radius:50%;left:27.5px;top:27.5px}.sqRowLabel{position:absolute;height:8px;width:8px;font-family:Inter;font-weight:400;margin:0%;left:3px;top:3px}.sqColLabel{position:absolute;height:8px;width:8px;font-family:Inter;font-weight:400;margin:0%;left:65px;top:55px}.mateLabel{position:absolute;height:20px;width:20px;left:50px;top:4px;border-radius:50%;color:#e63946;font-family:Inter;font-weight:500;font-size:16px;text-align:center}.winningMessage,.startGame,.chooseColor{font-family:Inter;font-size:5rem;font-weight:400;display:flex;position:fixed;inset:0;background-color:#000c;justify-content:center;align-items:center;color:#f0d9b5;flex-direction:column}.winningMessage button,.startGame button,.chooseColor button{font-family:Inter;font-weight:400;font-size:3rem;background-color:#b58863;border:1px solid black;padding:.25rem .5rem;cursor:pointer;color:#f0d9b5;border-radius:5px;margin-bottom:5px}.winningMessage button:hover,.startGame button:hover,.chooseColor button:hover{background-color:#f0d9b5;color:#b58863;border-color:1px solid white}.restartButton{position:absolute;left:78.5%;top:64%;width:100px;height:30px;align-items:center;justify-content:center}.restartButton button{all:unset;align-items:center;justify-content:center;background-color:#b58863;font-family:Inter;border-radius:5%;font-weight:400;font-size:18px;color:#fff;text-align:center}.restartButton button:hover{background-color:#fff;color:#b58863;border-color:1px solid white}.flipElement{position:absolute;left:75%;top:52%;display:flex;flex-direction:column;width:200px;height:75px;align-items:center}.flipButton{width:80px;height:40px;background-color:#fff;border:solid #B58863;border-radius:40px;position:relative;cursor:pointer;transition:background-color .3s ease}.flipButton.on{background-color:#fffdd0}.flipCircle{width:35px;height:35px;background-color:#d6b588;border-radius:50%;position:absolute;top:3px;left:3px;transition:left .3s ease;margin-left:2px}.flipButton.on .flipCircle{background-color:#b58863;left:38px}.flipText,.replayText{font-family:Inter;color:#b58863;font-weight:600}.turnDisplay{position:absolute;left:75%;top:38%;display:flex;flex-direction:row;width:200px;height:75px;align-items:center;justify-content:center;background-color:#b58863;border-radius:2%}.turnDisplay>span{font-family:Inter;font-weight:500}.turnSq{position:relative;width:55px;height:55px;padding:0;border-radius:20%;margin-right:10px}.movePanel{position:absolute;left:10%;top:30%;display:flex;flex-direction:column;width:200px;height:300px;align-items:center;background-color:#b58863;border-radius:2%;font-family:Inter;font-weight:500;color:#fff;overflow:auto}.movePanel>span{font-size:20px;padding-top:25px}.moveTexts{display:grid;grid-template-columns:repeat(3,auto);width:80%}.moveTexts>p{padding:3px;margin:auto;white-space:normal}.replayPanel{position:absolute;left:10%;top:70%;display:flex;flex-direction:column;width:200px;height:150px;align-items:center}.replayButtons{display:flex;flex-direction:row;width:150px;height:75px;align-items:center;justify-content:center;background-color:#b58863;font-family:Inter;border-radius:20px;font-weight:500;font-size:35px;color:#fff}.replayButtons>button{all:unset;background-color:#b58863;width:60px;height:60px;cursor:pointer;text-align:center}.replayButtons>span{font-weight:300}.howToPlay{position:absolute;left:7%;top:88%;align-items:center;justify-content:center;font-family:Inter;font-size:15px}.howToPlay>a{color:#b58863;text-decoration:none}.whiteTag,.blackTag{position:absolute;background-color:#b58863;height:40px;width:600px;left:435px;display:flex;flex-direction:row;align-items:center;font-family:Inter;border-radius:2%}.whiteSq,.blackSq{position:relative;width:30px;height:30px;padding:0;border-radius:20%;margin-left:10px;margin-right:10px}.whiteTag>span,.blackTag>span{margin-right:10px}