:root {
  --main-color: #f1f3f6;
  --shadow-color: rgba(55, 84, 170, 0.15);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--main-color);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

table.neumorphic {
  width: max-content;
  table-layout: auto;
  border-spacing: 0;
  border-radius: 18px;
  background: var(--main-color);
  color: #212121;
  text-align: center;
  overflow: hidden;
  box-shadow:
    9px 9px 16px rgba(55, 84, 170, 0.18),
    -9px -9px 16px rgba(255, 255, 255, 0.82);
}
table.neumorphic thead {
  box-shadow: 5px 5px 10px var(--shadow-color);
}
table.neumorphic th {
  padding: 10px 22px;
  white-space: nowrap;
}

table.neumorphic > tbody > tr > td {
  padding: 12px 22px;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
}

table.neumorphic tr td:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5000px;
  width: 10000px;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.98);
  box-shadow:
    0 0 0 rgba(55, 84, 170, 0),
    0 0 0 rgba(255, 255, 255, 0);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

table.neumorphic tr.is-row-active td:first-child::before {
  opacity: 0.78;
  transform: scale(1);
  box-shadow:
    7px 7px 14px rgba(55, 84, 170, 0.22),
    -7px -7px 14px rgba(255, 255, 255, 0.9);
}

table.neumorphic td::after {
  content: "";
  position: absolute;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.98);
  box-shadow:
    0 0 0 rgba(55, 84, 170, 0),
    0 0 0 rgba(255, 255, 255, 0);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

table.neumorphic td.is-column-active::after {
  opacity: 0.45;
  transform: scale(1);
  box-shadow:
    5px 5px 10px var(--shadow-color),
    -5px -5px 10px rgba(255, 255, 255, 0.78);
}