body {
  width: 100vw;
  max-width: 100vw;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: Helvetica, sans-serif;
  font-size: 20px;
}

x-row {
  display: flex;
  flex-direction: row;
}
x-col {
  display: flex;
  flex-direction: column;
}
x-rowcol {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 800px) {
  x-rowcol {
    flex-direction: column;
  }
}

h3,
h4,
h5 {
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

section.main-list {
  display: flex;
  flex-direction: column;
  margin: 1em;
}

section.main-list > header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
section.main-list > header > * {
  margin-top: 1em;
}

form.mainList {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  border-radius: 6px;
  background-color: whitesmoke;
  padding: 0.75em;
}
form.mainList > x-rowcol {
  margin-bottom: 0.5em;
}
form.mainList > x-rowcol > * {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
form.mainList input[type="checkbox"] {
  align-self: flex-start;
}

form.mainList #absoluteTimes ~ div.dates,
form.mainList #absoluteTimes ~ div.days {
  display: contents;
}
form.mainList #absoluteTimes:checked ~ div.days {
  display: none;
}
form.mainList #absoluteTimes:not(:checked) ~ div.dates {
  display: none;
}

form.mainList label {
  margin-top: 0.75em;
}
form.mainList input {
  margin-top: 0.25em;
  font-size: 20px;
  padding: 0.2em;
  border-radius: 4px;
  border: 1px solid black;
}

article.tournament,
section.view-event {
  border: 2px solid black;
  border-radius: 6px;
  padding: 0.5em;
  margin: 1em;
  background-color: lightgrey;
  display: flex;
  flex-direction: column;
}

article.event {
  border-left: 0.5em solid blueviolet;
  padding: 0.1em;
  padding-left: 0.25em;
  margin: 0.35em;
  display: flex;
  flex-direction: row;
}
article.event > div {
  display: flex;
  flex-direction: column;
  margin-right: 4em;
}

thead {
  font-weight: 600;
}

.rank {
  font-weight: 600;
}
.rank.a {
  color: darkgoldenrod;
}
.rank.b {
  color: red;
}
.rank.c {
  color: purple;
}
.rank.d {
  color: blue;
}
.rank.e {
  color: green;
}