table {
  padding: 5px;
  overflow-x: auto;
  box-shadow: 3px 3px 6px -1px;
  border-radius: 5px;
}

thead {
  font-weight: bold;
  text-align: center;
  font-size: 1.4rem;
  font-family: "Work";
}

tbody {
  padding: 20px;
  font-family: "Noto";
}

tr,
th {
  padding: 8px 7px;
}

.table-full-width {
  width: 100%;
}

.table-fixed-width {
  overflow-x: auto;
}

.table-fixed-width tr {
  width: auto;
}
.table-fixed-width tr {
  width: auto;
}

.table-fixed-width td {
  min-width: 80px;
}

.table-border {
  border-collapse: collapse;
  padding: 10px;
}

.table-border tr,
.table-border th,
.table-border td {
  border: 1px solid #999;
  padding: 5px;
}

.table-violet-gradient {
  --start-color: #e44b9d;
  --end-color: #2e21ac;
}

.table-winter-gradient {
  --start-color: #6c9be8;
  --end-color: #c2e9fb;
}

.table-celestial-gradient {
  --start-color: #c33764;
  --end-color: #1d2671;
  color: #eef0f2;
}

.table-violet-gradient,
.table-winter-gradient,
.table-celestial-gradient {
  background: -webkit-linear-gradient(
    -70deg,
    var(--start-color),
    var(--end-color)
  );
}