html {
  background-color: lightyellow;
}

.wrapper {
  display: grid;
  gap: 20px;
  grid-template-areas:
    'header'
    'content'
    'sidebar'
    'footer';
}

.main-head {
  grid-area: header;
}
.content {
  grid-area: content;
}
.side {
  grid-area: sidebar;
}
.main-footer {
  grid-area: footer;
}

@media (min-width: 900px) {
  .wrapper {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      'header  header'
      'content sidebar'
      'footer  footer';
  }
}

@media (min-width: 1300px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'header  header'
      'content sidebar'
      'footer  footer';
  }
}

#chessboard {
  border-color: black;
  border-style: solid;
  border-width: 2px;
  margin: 0 auto;
  border-collapse: collapse;
  width: 80%;
  background-color: #362413;
}

#chessboard td {
  width: 12%;
  position: relative;
}

#chessboard th {
  color: wheat;
}

#chessboard td:after {
  content: '';
  display: block;
  margin-top: 100%;
}

#chessboard tr:nth-child(even) td:nth-child(even),
tr:nth-child(odd) td:nth-child(odd) {
  background: wheat;
}

#chessboard td.available {
  background: rgb(116, 39, 39);
}

#chessboard td.available:hover {
  background: rgb(161, 39, 39);
}

#chessboard img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 95%;
}

h1 {
  text-align: center;
}