body {
  background-image: url('../img/background.jpeg');
  background-position: center;
  padding: 0.8em;
}

#header {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;

  > * {
    justify-self: center;
  }

  prev-button { background: url('../img/cat-left.png') no-repeat center center; }
  next-button { background: url('../img/cat-right.png') no-repeat center center; }
  prev-button, next-button {
    height: 3em;
    width: 3em;
    display: block;
    background-size: contain;
  }
}

#time-table {
  font-size: 0.9em;
  margin-top: 1em;
  width: 100%;
  box-shadow: 5px 10px 8px #888888;
  border-color:rgba(100, 100, 100, 0.25);

  th, td {
    vertical-align: middle;
    height: 3.2em;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  th {
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
  }

  td {
    border-color:rgba(100, 100, 100, 0.25);
    overflow-wrap: break-word;
    padding: 0.3em;

    &.warn { background-color: #ff8c00; }
    &.empty { background-color: red; }
  }

  td:first-child {
    font-size: 1em;
    padding-left: 0.5em;
  }

  &.blue { background-color: #c2e0e5; }
  &.blue thead { background-color: #01ffff; }
  &.blue tbody tr:nth-last-child(-n+2) { background-color: #7ed0e7; }

  &.green { background-color: #d8ead2; }
  &.green thead { background-color: #01ff01; }
  &.green tbody tr:nth-last-child(-n+2) { background-color: #b8d7ab; }

  &.orange { background-color: #f9ca9c; }
  &.orange thead { background-color: #fe9900; }
  &.orange tbody tr:nth-last-child(-n+2) { background-color: #f7b16b; }

  &.pink { background-color: #ffbde9; }
  &.pink thead { background-color: #f871d7; }
  &.pink tbody tr:nth-last-child(-n+2) { background-color: #ff88cb; }

  &.purple { background-color: #dad2ea; }
  &.purple thead { background-color: #ab8aff; }
  &.purple tbody tr:nth-last-child(-n+2) { background-color: #b2a5d3; }

  &.yellow { background-color: #ffe59a; }
  &.yellow thead { background-color: #ffff01; }
  &.yellow tbody tr:nth-last-child(-n+2) { background-color: #fed966; }

  &.red { background-color: #eb999b; }
  &.red thead { background-color: #fe0000; }
  &.red tbody tr:nth-last-child(-n+2) { background-color: #e06665; }
}