:root {
  --gray: #1E2A38; /* orig #413f4f */
}

body {
  background-color: #80D190;
  background:url("terrazzo_solid.png");
}

.background {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-width: 100vw;
}

.check {
  width: 350px;
  height: 615px;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.34);
  margin: 16px 0;
}

h1 {
  font-family: "Old Standard TT", serif;
  font-variant: small-caps;
  text-align: center;
  font-size: 42px;
  color: var(--gray);
  margin: 10px 0 2px;
  letter-spacing: -1px;
}

.meta {
  margin: 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
}

.guest-receipt-meta {
  margin: 4px 16px 0 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

.meta-item {
  border-top: 1px solid var(--gray);
  border-left: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
}

.meta-item:nth-last-child(1) {
  border-right: 1px solid var(--gray);
}

.meta-item-label {
  font-size: 10px;
  text-align: center;
  font-family: arial;
  color: var(--gray);
  padding: 2px 0 18px;
}

.check-number, .button {
  color: #ec7899; /* orig #ff5d5d */
  font-family: "share tech mono", menlo;
  font-size: 24px;
  text-align: center;
  padding-top: 2px;
  opacity: 0.8;
}

.button {
 border: none;
  background-color: transparent;
}

.item-types {
  font-family: arial;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gray);
  margin: 4px 0 -1px;
}

.order-list {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr 1fr;
  grid-template-rows: repeat(18, 23px);
}

.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3),
.grid-item:nth-child(4) {
  border-top: 2px solid var(--gray);
}

.grid-item:nth-child(4n + 1) {
  border-bottom: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
}

.grid-item:nth-child(4n + 2) {
  border-bottom: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
}

.grid-item:nth-child(4n + 3) {
  border-bottom: 1px solid var(--gray);
  border-right: 1px solid var(--gray);
}

.grid-item:nth-child(4n) {
  border-bottom: 1px solid var(--gray);
}

.grid-item:nth-last-child(1),
.grid-item:nth-last-child(2),
.grid-item:nth-last-child(3),
.grid-item:nth-last-child(4) {
  border-bottom: 2px solid var(--gray);
}

.company-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 16px;
}

.small-caps {
  font-variant: small-caps;
}

.usa {
  font-family: arial;
  font-weight: bold;
  font-style: italic;
  color: var(--gray);
}

.perforation {
  border-top: 1px dashed #b0b5b8;
  margin: 8px 0;
}

.guest-receipt {
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  color: var(--gray);
  margin: 12px 16px 0 16px;
}

.order-list-container {
  background-color: #e5f5e8; /* orig #e3faf0, darker alt #d8f1dd */
  position: relative;
  padding: 4px 16px 2px 16px;
}

.writing {
  position: absolute;
  z-index: 2;
  width: 318px;
  font-family: arial;
  color: var(--gray);
  opacity: 0.8;
}

.tax {
  grid-column: 2/3;
  grid-row: 17/18;
  text-align: right;
  font-size: 12px;
  align-self: end;
  padding: 4px 6px;
}

.total {
  grid-column: 2/3;
  grid-row: 18/19;
  text-align: right;
  font-size: 13px;
  align-self: end;
  font-weight: bold;
  padding: 4px 6px;
}

.thank-you {
  grid-column: 2/3;
  grid-row: 18/19;
  text-align: left;
  font-size: 13px;
  align-self: end;
  font-weight: bold;
  padding: 4px 6px;
}

.ordered-item {
  font-family: "homemade apple";
  font-size: 24px;
}

.c {
  grid-column: 3/4;
  padding-top: 10px;
  transform: scale(1.02);
}

.c-price {
  grid-column: 4/5;
  padding-top: 6px;
  transform: scale(1.3) skewy(-3deg);
}

.smgf {
  grid-row: 3/4;
  grid-column: 2/4;
  text-align: right;
  padding-right: 18px;
  transform: skew(-5deg) scale(1.1);
}

.smgf-price {
  grid-row: 3/4;
  grid-column: 4/5;
  transform: scale(1.08) skewy(-3deg);
}

.tea {
  grid-row: 4/5;
  grid-column: 2/4;
  text-align: right;
  padding-right: 27px;
  padding-top: 9px;
}

.tea-price {
  grid-row: 4/5;
  grid-column: 4/5;
  padding-top: 10px;
  transform: scale(1.1) skewy(-2deg);
}

.relleno {
  grid-column: 2/3;
  grid-row: 6/7;
  padding-top: 4px;
  padding-left: 12px;
  transform: scale(1.2) skewy(-2deg) skewx(8deg) translatey(2px);
}

.relleno-price {
  grid-column: 3/5;
  grid-row: 6/7;
  padding-top: 4px;
  text-align: right;
  padding-right: 7px;
}

.green-ranch {
  grid-column: 2/4;
  grid-row: 8/9;
  padding-top: 4px;
  padding-left: 6px;
  transform: scale(1.08) skewy(-3deg);
}

.green-price {
  grid-column: 4/5;
  grid-row: 8/9;
  transform: scale(1.2) skewy(-7deg) skewx(-5deg);
}

.bisc {
  grid-column: 2/3;
  grid-row: 11/12;
  padding-top: 7px;
  padding-right: 3px;
  text-align: right;
}

.bisc-price {
  grid-column: 4/5;
  grid-row: 11/12;
  padding-top: 9px;
}

.tax-writing {
  grid-column: 4/5;
  grid-row: 17/18;
  transform: scale(1.3) skewy(-6deg) translateY(-5px);
}

.total-writing {
  grid-column: 4/5;
  grid-row: 18/19;
  transform: scale(1.5) skewy(-4deg) translateX(-12px);
}

a, a.visited {
  text-decoration: none;
  color: #ec7899; /* orig #ff5d5d */
}

a.active {
    color: #f19fb6;
}