.content {
  display: table;
  margin: 0 auto;
}

h1 {
  font-size: 1.75rem;
  margin-bottom: 0;
}

h2 {
  font-size: 1.1rem;
  font-weight: normal;
  color: #666;
  margin: 0.5rem auto;
  margin-top: 1rem;
  text-align: center;
}

.footer {
  display: flex;
  justify-content: space-between;
}

.footer a {
  font-size: 1rem;
  font-weight: normal;
  color: #666;
  margin-top: 0.25rem;
}

table {
  margin-bottom: 2rem;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-width: max-content;
}

td {
  padding: 1rem 1.2rem;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
}

tr td:nth-child(4) {
  /* don't wrap the score column */
  width: 1%;
  white-space: nowrap;
}

tr.win {
  background-color: #f3f3f3;
}

tr.win td:nth-child(4) {
  font-weight: bold;
}

tr.ot td:nth-child(4) {
  font-style: italic;
}

.tie {
  height: 36px;
  width: auto;
  aspect-ratio: 190 / 364;
}

.tie.blue {
  fill: #122982;
}

.tie.unluckyblue {
  fill: #2744b8
}

.tie.slate {
  fill: #5063a1;
}

.tie.lightblue {
  fill: #7185c9;
}

.tie.frost {
  fill: #EAF1FA;
  stroke: #79A5E2;
  stroke-width: 4px;

}

.tie.darkblue {
  fill: #14236b;
}

.tie.midnight {
  fill: #051f45;
}

.tie.black {
  fill: #040d17;
}

.tie.purplepaisley {
  fill: #3f1d5c;
}

.tie.silver {
  fill: #8f8f8f;
}

.tie.mauve {
  fill: #846094;
}

.tie.red {
  fill: #c92e2e;
}

.tie.maroon {
  fill: #660000;
}

.tie.brown {
  fill: #6b4333;
}

.tie.crazy {
  fill: none;
  background-image: url(../assets/crazytie.png);
  background-size: cover;
  background-position: center;
  -webkit-mask: url(../assets/cravate-r.svg) center / contain no-repeat;
  mask: url(../assets/cravate-r.svg) center / contain no-repeat;
}

.tie.crazy use {
  /* make crazy-tie clickable even though fill is set to none */
  pointer-events: all;
}

.tie.missing {
  fill: none;
  stroke: #aaaaaa;
  stroke-width: 8px;
  stroke-dasharray: 40px;
}

.tie.hidden {
  fill: none;
}

svg a {
  cursor: pointer;
}

svg.missing a,
svg.hidden a,
svg.nolink a {
  pointer-events: none;
  cursor: default;
}

td:last-child {
  border-right: 0;
}

tr:last-child td {
  border-bottom: 0;
}