* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.cuadro {
  width: 500px;
  height: 500px;
  background: black;
  border: 5px solid #eae9f6;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), inset 10px 0 400px black;
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr 2fr 1fr 1fr 0.6fr;
  grid-template-rows: 1fr 2fr 2fr 1fr 1fr 0.5fr 0.5fr;
  gap: 5px;
  position: relative;
}

.rojo {
  background: #cf2d05;
}

.amarillo {
  background: #f2cf49;
}

.azul {
  background: #192e6d;
}

.negro {
  background: black;
}

.celeste {
  background: #dde5f0;
}

.blanco {
  background: white;
}

.rojo1 {
  grid-column: 2/5;
  grid-row: 2/4;
}

.rojo2 {
  grid-column: 7/8;
  grid-row: 5/8;
}

.amarillo1 {
  grid-column: 5/7;
  grid-row: 1/2;
}

.amarillo2 {
  grid-column: 5/7;
  grid-row: 2/3;
}

.amarillo3 {
  grid-column: 1/2;
  grid-row: 5/8;
}

.negro1 {
  grid-column: 2/4;
  grid-row: 4/6;
}

.negro2 {
  grid-column: 4/5;
  grid-row: 6/7;
}

.azul {
  grid-column: 5/7;
  grid-row: 5/7;
}

.celeste1 {
  grid-column: 1/3;
  grid-row: 1/2;
}

.celeste2 {
  grid-column: 1/2;
  grid-row: 3/5;
}

.celeste3 {
  grid-column: 7/8;
  grid-row: 1/5;
}

.celeste4 {
  grid-column: 4/5;
  grid-row: 4/5;
}

.celeste5 {
  grid-column: 4/5;
  grid-row: 5/6;
}

.celeste6 {
  grid-column: 5/6;
  grid-row: 3/4;
}

.blanco1 {
  grid-column: 3/5;
  grid-row: 1/2;
}

.blanco2 {
  grid-column: 1/2;
  grid-row: 2/3;
}

.blanco3 {
  grid-column: 2/4;
  grid-row: 6/8;
}

.blanco4 {
  grid-column: 4/7;
  grid-row: 7/8;
}

.blanco5 {
  grid-column: 5/7;
  grid-row: 4/5;
}

.blanco6 {
  grid-column: 6/7;
  grid-row: 3/4;
}

.firma {
  position: absolute;
  width: 60%;
  height: 20px;
  bottom: 0;
  left: 40%;
  font-size: 0.7em;
  font-family: "Architects Daughter", cursive;
  color: #898276;
}