Chess board

by Simon Hi

HTML

<div>
  <div class="black">&#9820;</div>
  <div class="black">&#9822;</div>
  <div class="black">&#9821;</div>
  <div class="black">&#9819;</div>
  <div class="black">&#9818;</div>
  <div class="black">&#9821;</div>
  <div class="black">&#9822;</div>
  <div class="black">&#9820;</div>
  <div class="black">&#9823;</div>
  <div class="black">&#9823;</div>
  <div class="black">&#9823;</div>
  <div class="black">&#9823;</div>
  <div class="black">&#9823;</div>
  <div class="black">&#9823;</div>
  <div class="black">&#9823;</div>
  <div class="black">&#9823;</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="white">&#9823;</div>
  <div class="white">&#9823;</div>
  <div class="white">&#9823;</div>
  <div class="white">&#9823;</div>
  <div class="white">&#9823;</div>
  <div class="white">&#9823;</div>
  <div class="white">&#9823;</div>
  <div class="white">&#9823;</div>
  <div class="white">&#9820;</div>
  <div class="white">&#9822;</div>
  <div class="white">&#9821;</div>
  <div class="white">&#9819;</div>
  <div class="white">&#9818;</div>
  <div class="white">&#9821;</div>
  <div class="white">&#9822;</div>
  <div class="white">&#9820;</div>
</div>

CSS

body {
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body>div {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 88vmin;
  font-size: 9vmin;
  background: repeating-conic-gradient(#1117 0 25%, #eee7 0 50%) 0 0 / 25% 25%;
}

div>div {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.black {
  color: #000;
  -webkit-text-fill-color: #000;
  -webkit-text-stroke-width: max(0.1vmin, 0.5px);
  -webkit-text-stroke-color: #000;
}

.white {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke-width: max(0.1vmin, 0.5px);
  -webkit-text-stroke-color: #000;
}