:root {
  --color0: #3d1a2b;
  --color1: #5a2338;
  --color2: #7a2d48;
  --color3: #9d3959;
  --color4: #c2466d;
  --color5: #e85582;

  --solid-border: 2px solid var(--color5);
  --dashed-border: 2px dashed var(--color3);
}

body {
  font-family: "Segoe UI", sans-serif;
  background-color: #1c121b;
  color: #ffffff;
  padding: 2em;
}

#legend {
  display: flex;
  align-items: center;
  gap: 1em;
  font-weight: bold;
  font-size: 1.2em;
  color: #ffcde0;
  margin-bottom: 1em;
}

#legend-gradient {
  flex-grow: 1;
  height: 20px;
  border-radius: 10px;
  background-image: linear-gradient(
    90deg,
    var(--color0) 0% 17%,
    var(--color1) 17% 34%,
    var(--color2) 34% 50%,
    var(--color3) 50% 67%,
    var(--color4) 67% 83%,
    var(--color5) 83% 100%
  );
  box-shadow: 0 0 8px rgba(255, 182, 193, 0.3);
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-top: 1em;
  background-color: #2a1823;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(255, 102, 163, 0.25);
}

thead tr {
  background-color: #3a1e2d;
  color: #ffeef5;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
}

thead th {
  padding: 1em;
  font-weight: 600;
  border-bottom: 2px solid var(--color4);
}

th,
td {
  padding: 1em;
  text-align: center;
  color: #fff;
}

.time {
  background-color: #3e2433;
  font-weight: bold;
  color: #ffc1e3;
  border-right: 1px solid var(--color3);
}

.available-0 {
  background-color: var(--color0);
}

.available-1 {
  background-color: var(--color1);
}

.available-2 {
  background-color: var(--color2);
}

.available-3 {
  background-color: var(--color3);
}

.available-4 {
  background-color: var(--color4);
}

.available-5 {
  background-color: var(--color5);
}

.sharp td {
  border-bottom: var(--solid-border);
}

.half td {
  border-bottom: var(--dashed-border);
}

td,
.time {
  transition: background-color 0.3s ease;
}