/* ! colors subject to change */
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap');

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  background: radial-gradient(
      ellipse at 100% 100%,
      hsl(220, 95%, 95%),
      transparent
    ),
    repeating-linear-gradient(
        to bottom,
        hsl(220, 95%, 50%) 0px,
        hsl(220, 95%, 50%) 3px,
        hsl(220, 95%, 70%) 3px,
        hsl(220, 95%, 75%) 6px
      )
      #303e61;
  color: hsl(0, 0%, 5%);
  font-family: 'IBM Plex Mono', monospace;
  /* center in the viewport */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* display the controls and table in a row */
section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 3rem;
  background: hsla(0, 0%, 100%, 0.5);
}

/* display the buttons in a column, at the top of the row */
div {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  margin-bottom: 1rem;
  /* rotate the container to direct the input elements toward the table to the right */
  transform: rotate(45deg);
}
/* separate the buttons vertically */
div > * + * {
  margin-top: 1rem;
}
/* rotate the labels backwards to avoid rotating the icons */
label {
  transform: rotate(-45deg);
  /* include the labels as circles with a fixed width and height */
  width: 65px;
  height: 65px;
  padding: 1rem;
  border-radius: 50%;
  color: hsl(0, 0%, 5%);
  border: 4px solid currentColor;
  background: hsl(0, 0%, 100%);
}
/* by default reduce the scale and opacity of the graphic nested in each label
set the original values when the connected input of type radio is checked
*/
label input + svg {
  opacity: 0.5;
  transform: scale(0.8);
  transition: all 0.25s ease-in-out;
}
label input:checked + svg {
  opacity: 1;
  transform: scale(1);
}
/* position the input of type radio on top of the svg graphic */
label input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
label svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* collapse the borders */
table {
  border-collapse: collapse;
}

/* remove the borders for the cells representing the "hints" */
tr:first-of-type td,
tr td:first-of-type {
  border: none;
  /* align the cells toward the rest of the table */
  text-align: right;
  vertical-align: bottom;
  /* reset the width to have the cell expand to cover the span's size */
  width: initial;
  height: initial;
}
/* slightly separate the span elements included in the first column */
tr td:first-of-type span {
  margin-right: 0.5rem;
}
/* position the span elements included in the first row atop one another */
tr:first-of-type td span {
  display: block;
  text-align: center;
  margin-bottom: 0.5rem;
}
/* style the span elements */
tr td span {
  font-weight: 700;
  font-size: 1.25rem;
}

/* include a solid border for the rest of the table */
td {
  /* have each cell occupy a fixed width and height */
  width: 45px;
  height: 45px;
  border: 1px solid hsl(0, 0%, 70%);
}
/* change the background of selected buttons */
table td:nth-of-type(odd) button {
  background: hsl(0, 0%, 100%);
}
table td:nth-of-type(even) button {
  background: hsl(0, 0%, 96%);
}
table tr:nth-last-of-type(odd) td:nth-last-of-type(odd) button {
  background: hsl(0, 0%, 98%);
}
table tr:nth-last-of-type(odd) td:nth-last-of-type(even) button {
  background: hsl(0, 0%, 94%);
}

/* have the nested button, or svg element, occupy the available width and height */
td button {
  display: block;
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 100%);
  border: none;
}
td svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* for smaller viewports the table starts to be more brittle */
@media (max-width: 550px) {
  /* display the controls atop the table */
  section {
    flex-direction: column;
  }
  /* display the controls in a row */
  div {
    transform: rotate(0);
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
  }
  /* remove the space included between the controls */
  div > * + * {
    margin-top: 0;
  }
  label {
    transform: rotate(0);
    width: 60px;
    height: 60px;
  }
  /* reduce the size of the buttons and span elements */
  td button {
    width: 40px;
    height: 40px;
  }
  tr td span {
    font-size: 1rem;
  }
}
