:root {
  --lightest: #ffecf6;
  --light: #f2ccdd;
  --mid: #a54050;
  --mid2: #c57fa2;
  --dark: #64495c;
  --darker: #33243B;
  --darkest: #3c0308;
  --black: #240c1a;
}

body {
  background-color: var(--darker);
}

.container {
  transform: scaleX(.6);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

table, td {
  padding: 10px;
  font-size: 2rem;
  -webkit-text-stroke: .5px #000;
  border-collapse: collapse;
}

th {
  font-style: italic;
  vertical-align: bottom;
  font-size: 1.5rem;
  color: var(--light);
  text-shadow: 1px 1px black;
}

th.name, th.total {
  color: var(--mid2);
  font-size: 1rem;
}

td {
  text-shadow: 1px 1px gray;
  font-weight: bold;
  font-style: italic;
  border: 1px solid black;
  border-collapse: collapse;
  background-color: white;
  background: #F2CCDD;
  background: linear-gradient(0deg,rgba(242, 204, 221, 1) 0%, rgba(255, 236, 246, 1) 50%, rgba(242, 204, 221, 1) 100%);
  box-shadow: inset 1px 3px var(--lightest)
}

td, td.total {
  text-align: right;
  vertical-align: bottom;
}

td.name {
  background-color: var(--mid2);
  text-shadow: 1px 1px black;
  text-align: left;
  vertical-align: middle;
  transform: scaleX(1);
  border-radius: 5px 0 0 5px;
}

td.total {
  border-radius: 0 5px 5px 0;
}

td.name, td.total {
  color: white;
  background: #C57FA2;
  background: linear-gradient(0deg,rgba(197, 127, 162, 1) 0%, rgba(242, 204, 221, 1) 50%, rgba(197, 127, 162, 1) 100%);
  box-shadow: inset 1px 3px var(--light);
}

.bottom {
  box-shadow: 3px 3px 2px black;
}