body {
  margin: 0;
  background-image: linear-gradient(#CBCC33, #996533);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, 5.5vmin);
  grid-template-rows: 11, 5.5vmin;
  grid-gap: 0 11vmin;
  position: relative;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}

.cell {
  width: 5.5vmin;
  height: 5.5vmin;
  border: 2px solid black;
  margin-top: -2px;
  position: relative;
}

.cell:nth-child(1)::after {
  content: '';
  background: linear-gradient(#97CA65, #6B9831);
  position: absolute;
  height: calc(60.5vmin + 2px * 10);
  width: 100%;
}

.cell:nth-child(2)::after {
  content: '';
  background: linear-gradient(#97CA65, #6B9831);
  position: absolute;
  height: calc(60.5vmin + 2px * 10);
  width: 100%;
}

.cell:nth-child(3)::after {
  content: '';
  background: linear-gradient(#97CA65, #6B9831);
  position: absolute;
  height: calc(60.5vmin + 2px * 10);
  width: 100%;
}

.cell:nth-child(4)::after {
  content: '';
  background: linear-gradient(#97CA65, #6B9831);
  position: absolute;
  height: calc(60.5vmin + 2px * 10);
  width: 100%;
}

.cell:nth-child(5)::after {
  content: '';
  background: linear-gradient(#97CA65, #6B9831);
  position: absolute;
  height: calc(60.5vmin + 2px * 10);
  width: 100%;
}

.cell:nth-child(6)::after {
  content: '';
  background: linear-gradient(#97CA65, #6B9831);
  position: absolute;
  height: calc(60.5vmin + 2px * 10);
  width: 100%;
}

.cell:nth-child(7)::after {
  content: '';
  background: linear-gradient(#97CA65, #6B9831);
  position: absolute;
  height: calc(60.5vmin + 2px * 10);
  width: 100%;
}

.cell:nth-child(8)::after {
  content: '';
  background: linear-gradient(#97CA65, #6B9831);
  position: absolute;
  height: calc(60.5vmin + 2px * 10);
  width: 100%;
}

.cell:nth-child(16n+1)::before {
  content: '';
  position: absolute;
  width: 0.6875vmin;
  height: 1.375vmin;
  background: transparent;
  left: calc(50% - 0.34375vmin - 1px);
  top: calc(50% - 0.6875vmin - 1px);
  box-shadow: calc(3.88905vmin + 0vmin) 0 0 0 black, calc(3.88905vmin + 0.6875vmin) 0 0 0 white, calc(-3.88905vmin - 0.34375vmin) 0 0 0 black, calc(-3.88905vmin + 0.34375vmin) 0 0 0 white, -0.275vmin calc(-3.88905vmin - 0.20625vmin) 0 0 white, 0.4125vmin calc(-3.88905vmin - 0.20625vmin) 0 0 black, -0.1375vmin calc(3.88905vmin + 0.20625vmin) 0 0 white, 0.55vmin calc(3.88905vmin + 0.20625vmin) 0 0 black;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.cell:nth-child(16n+2)::before {
  content: '';
  position: absolute;
  width: 0.6875vmin;
  height: 1.375vmin;
  background: transparent;
  left: calc(50% - 0.34375vmin - 1px);
  top: calc(50% - 0.6875vmin - 1px);
  box-shadow: calc(3.88905vmin + 0vmin) 0 0 0 black, calc(3.88905vmin + 0.6875vmin) 0 0 0 white, calc(-3.88905vmin - 0.34375vmin) 0 0 0 black, calc(-3.88905vmin + 0.34375vmin) 0 0 0 white, -0.275vmin calc(-3.88905vmin - 0.20625vmin) 0 0 white, 0.4125vmin calc(-3.88905vmin - 0.20625vmin) 0 0 black, -0.1375vmin calc(3.88905vmin + 0.20625vmin) 0 0 white, 0.55vmin calc(3.88905vmin + 0.20625vmin) 0 0 black;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.cell:nth-child(16n+3)::before {
  content: '';
  position: absolute;
  width: 0.6875vmin;
  height: 1.375vmin;
  background: transparent;
  left: calc(50% - 0.34375vmin - 1px);
  top: calc(50% - 0.6875vmin - 1px);
  box-shadow: calc(3.88905vmin + 0vmin) 0 0 0 black, calc(3.88905vmin + 0.6875vmin) 0 0 0 white, calc(-3.88905vmin - 0.34375vmin) 0 0 0 black, calc(-3.88905vmin + 0.34375vmin) 0 0 0 white, -0.275vmin calc(-3.88905vmin - 0.20625vmin) 0 0 white, 0.4125vmin calc(-3.88905vmin - 0.20625vmin) 0 0 black, -0.1375vmin calc(3.88905vmin + 0.20625vmin) 0 0 white, 0.55vmin calc(3.88905vmin + 0.20625vmin) 0 0 black;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.cell:nth-child(16n+4)::before {
  content: '';
  position: absolute;
  width: 0.6875vmin;
  height: 1.375vmin;
  background: transparent;
  left: calc(50% - 0.34375vmin - 1px);
  top: calc(50% - 0.6875vmin - 1px);
  box-shadow: calc(3.88905vmin + 0vmin) 0 0 0 black, calc(3.88905vmin + 0.6875vmin) 0 0 0 white, calc(-3.88905vmin - 0.34375vmin) 0 0 0 black, calc(-3.88905vmin + 0.34375vmin) 0 0 0 white, -0.275vmin calc(-3.88905vmin - 0.20625vmin) 0 0 white, 0.4125vmin calc(-3.88905vmin - 0.20625vmin) 0 0 black, -0.1375vmin calc(3.88905vmin + 0.20625vmin) 0 0 white, 0.55vmin calc(3.88905vmin + 0.20625vmin) 0 0 black;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.cell:nth-child(16n+5)::before {
  content: '';
  position: absolute;
  width: 0.6875vmin;
  height: 1.375vmin;
  background: transparent;
  left: calc(50% - 0.34375vmin - 1px);
  top: calc(50% - 0.6875vmin - 1px);
  box-shadow: calc(3.88905vmin + 0vmin) 0 0 0 black, calc(3.88905vmin + 0.6875vmin) 0 0 0 white, calc(-3.88905vmin - 0.34375vmin) 0 0 0 black, calc(-3.88905vmin + 0.34375vmin) 0 0 0 white, -0.275vmin calc(-3.88905vmin - 0.20625vmin) 0 0 white, 0.4125vmin calc(-3.88905vmin - 0.20625vmin) 0 0 black, -0.1375vmin calc(3.88905vmin + 0.20625vmin) 0 0 white, 0.55vmin calc(3.88905vmin + 0.20625vmin) 0 0 black;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.cell:nth-child(16n+6)::before {
  content: '';
  position: absolute;
  width: 0.6875vmin;
  height: 1.375vmin;
  background: transparent;
  left: calc(50% - 0.34375vmin - 1px);
  top: calc(50% - 0.6875vmin - 1px);
  box-shadow: calc(3.88905vmin + 0vmin) 0 0 0 black, calc(3.88905vmin + 0.6875vmin) 0 0 0 white, calc(-3.88905vmin - 0.34375vmin) 0 0 0 black, calc(-3.88905vmin + 0.34375vmin) 0 0 0 white, -0.275vmin calc(-3.88905vmin - 0.20625vmin) 0 0 white, 0.4125vmin calc(-3.88905vmin - 0.20625vmin) 0 0 black, -0.1375vmin calc(3.88905vmin + 0.20625vmin) 0 0 white, 0.55vmin calc(3.88905vmin + 0.20625vmin) 0 0 black;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.cell:nth-child(16n+7)::before {
  content: '';
  position: absolute;
  width: 0.6875vmin;
  height: 1.375vmin;
  background: transparent;
  left: calc(50% - 0.34375vmin - 1px);
  top: calc(50% - 0.6875vmin - 1px);
  box-shadow: calc(3.88905vmin + 0vmin) 0 0 0 black, calc(3.88905vmin + 0.6875vmin) 0 0 0 white, calc(-3.88905vmin - 0.34375vmin) 0 0 0 black, calc(-3.88905vmin + 0.34375vmin) 0 0 0 white, -0.275vmin calc(-3.88905vmin - 0.20625vmin) 0 0 white, 0.4125vmin calc(-3.88905vmin - 0.20625vmin) 0 0 black, -0.1375vmin calc(3.88905vmin + 0.20625vmin) 0 0 white, 0.55vmin calc(3.88905vmin + 0.20625vmin) 0 0 black;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.cell:nth-child(16n+8)::before {
  content: '';
  position: absolute;
  width: 0.6875vmin;
  height: 1.375vmin;
  background: transparent;
  left: calc(50% - 0.34375vmin - 1px);
  top: calc(50% - 0.6875vmin - 1px);
  box-shadow: calc(3.88905vmin + 0vmin) 0 0 0 black, calc(3.88905vmin + 0.6875vmin) 0 0 0 white, calc(-3.88905vmin - 0.34375vmin) 0 0 0 black, calc(-3.88905vmin + 0.34375vmin) 0 0 0 white, -0.275vmin calc(-3.88905vmin - 0.20625vmin) 0 0 white, 0.4125vmin calc(-3.88905vmin - 0.20625vmin) 0 0 black, -0.1375vmin calc(3.88905vmin + 0.20625vmin) 0 0 white, 0.55vmin calc(3.88905vmin + 0.20625vmin) 0 0 black;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: 1;
}

.cell:nth-child(16n+2) {
  border-right-color: white;
  border-top-color: white;
}
.cell:nth-child(16n+2)::before {
  left: calc(50% - 0.34375vmin);
  top: calc(50% - 0.6875vmin - 1px);
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.cell:nth-child(16n+1) {
  border-left-color: white;
  border-top-color: white;
}

.cell:nth-child(16n+10) {
  border-left-color: white;
}

.cell:nth-child(16n+9) {
  border-right-color: white;
}

.cell:nth-child(16n+4) {
  border-right-color: white;
  border-top-color: white;
}
.cell:nth-child(16n+4)::before {
  left: calc(50% - 0.34375vmin);
  top: calc(50% - 0.6875vmin - 1px);
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.cell:nth-child(16n+3) {
  border-left-color: white;
  border-top-color: white;
}

.cell:nth-child(16n+12) {
  border-left-color: white;
}

.cell:nth-child(16n+11) {
  border-right-color: white;
}

.cell:nth-child(16n+6) {
  border-right-color: white;
  border-top-color: white;
}
.cell:nth-child(16n+6)::before {
  left: calc(50% - 0.34375vmin);
  top: calc(50% - 0.6875vmin - 1px);
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.cell:nth-child(16n+5) {
  border-left-color: white;
  border-top-color: white;
}

.cell:nth-child(16n+14) {
  border-left-color: white;
}

.cell:nth-child(16n+13) {
  border-right-color: white;
}

.cell:nth-child(16n+8) {
  border-right-color: white;
  border-top-color: white;
}
.cell:nth-child(16n+8)::before {
  left: calc(50% - 0.34375vmin);
  top: calc(50% - 0.6875vmin - 1px);
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.cell:nth-child(16n+7) {
  border-left-color: white;
  border-top-color: white;
}

.cell:nth-child(16n+16) {
  border-left-color: white;
}

.cell:nth-child(16n+15) {
  border-right-color: white;
}