body {
  margin: 1em;
  font-family: Helvetica, Arial, sans-serif;
  background-color: #e09999;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
  grid-gap: 1em;
}

.button, .display {
  background-color: #ffc8c8;
  outline: 2px solid #935656;
  outline-offset: -2px;
  color: black;
  padding: 1em .5em;
  text-align: center;
  grid-column: auto / span 1;
  display: none;
}

.button {
  background-color: #99e0ad;
  outline-color: #47935d;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  display: block;
}

.button:hover {
  outline-width: 4px;
  outline-offset: -4px;
}

.button:active {
  outline-width: 6px;
  outline-offset: -6px;
}

#title-display {
  grid-column: 1 / 5;
  display: block;
}

#kiss-button {
  grid-column: auto / span 3;
  font-size: 2.5em;
  padding: .25em .5em;
}

#stats-display {
  grid-column: 4 / 5;
  grid-row: auto / span 3;
  display: block;
}

.title-text {
  font-size: 1.5em;
  font-weight: bold;
  display: block;
  padding-bottom: .25em;
}

.small-title-text {
  font-weight: bold;
  display: block;
}

.subtitle-text {
  font-size: .85em;
  display: block;
}

a:link, a:visited, a:hover, a:active {
  color: #935656;
  text-decoration: none;
  font-weight: bold;
}

a:hover, a:active {
  color: white;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
}

.stats-tr {
  border-top: 1px solid #935656;
  height: 1.65em;
}

.stats-tr:first-child {
  border-top-color: #93565600;
}

.td-left {
  text-align: left;
  font-weight: bold;
}

.td-right {
  text-align: right;
}

.td-center {
  text-align: center;
}

#reset-button {
  display: block;
  text-align: center;
  margin-top: .75em;
}