table.moods {
  caption {
    text-align: center;
  }
  th,
  td {
    font-size: 11px;
    padding: 0;
    vertical-align: middle;
  }
  td + td {
    border-left: 1px solid #efefef;
  }

  td:hover {
    line-height: 0.8;
    background-color: lightcyan;
    width: 98%;
    height: 98%;
  }

  tbody tr:nth-child(2n) {
    background: none;
    button {
      background: none;
    }
  }
  td {
    border-bottom: 1px solid #efefef;
  }

  tr.r10 td {
    div,
    form.del button {
      background-color: rgba(0, 255, 0, 0.8); /* Pure green - Excellent */
    }
  }
  tr.r9 td {
    div,
    form.del button {
      background-color: rgba(51, 255, 0, 0.8); /* Green-yellow */
    }
  }
  tr.r8 td {
    div,
    form.del button {
      background-color: rgba(102, 255, 0, 0.8); /* Yellow-green */
    }
  }

  tr.r7 td {
    div,
    form.del button {
      background-color: rgba(153, 255, 0, 0.8); /* More yellow */
    }
  }

  tr.r6 td {
    div,
    form.del button {
      background-color: rgba(204, 255, 0, 0.8); /* Yellow */
    }
  }

  tr.r5 td {
    div,
    form.del button {
      background-color: rgba(255, 204, 0, 0.8); /* Yellow-orange */
    }
  }

  tr.r4 td {
    div,
    form.del button {
      background-color: rgba(255, 153, 0, 0.8); /* Orange */
    }
  }

  tr.r3 td {
    div,
    form.del button {
      background-color: rgba(255, 102, 0, 0.8); /* Orange-red */
    }
  }

  tr.r2 td {
    div,
    form.del button {
      background-color: rgba(255, 51, 0, 0.8); /* Red-orange */
    }
  }

  tr.r1 td {
    div,
    form.del button {
      background-color: rgba(255, 0, 0, 0.8); /* Pure red - Terrible */
    }
  }

  button {
    height: 90%;
    width: 90%;
    margin: 2px;
  }
}

@media screen and (max-width: 414px) {
  table.moods {
    button {
      height: 32px;
    }
  }
}