html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-size: 18px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  background-color: #000;
  color: #fff;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
}

.row {
  height: 100%;
  width: 100%;
}

.row-athlete {
  display: grid;
  grid-template-columns: 1fr 1fr 6fr 6fr 1fr;
}
.row-athlete.event-logo-hidden {
  grid-template-columns: 1fr 6fr 6fr 1fr;
}
.row-athlete.team-name-hidden {
  grid-template-columns: 1fr 1fr 12fr 1fr;
}
.row-athlete.event-logo-hidden.team-name-hidden {
  grid-template-columns: 1fr 13fr 1fr;
}
.row-athlete * {
  display: flex;
  align-items: center;
  padding: 0 1vw;
  white-space: nowrap;
}

.athlete-place {
  display: flex;
  justify-content: center;
  padding-left: 0;
}

.athlete-team-logo {
  display: flex;
  justify-content: center;
  padding: 0;
}
.athlete-team-logo img {
  height: 30vh;
  width: auto;
  padding: 0;
  max-height: 2em;
}

.athlete-profile-pic {
  display: flex;
  justify-content: center;
  padding: 0;
}
.athlete-profile-pic img {
  height: 30vh;
  width: auto;
  padding: 0;
  max-height: 2em;
  border-radius: 50%;
}

.athlete-name {
  display: flex;
}

.athlete-team {
  display: flex;
}

.athlete-mark {
  display: flex;
}

.row-results {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2px;
}

.result {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}
.result * {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  white-space: nowrap;
}

.result:first-child {
  padding-left: 0;
}

.result-header,
.result-mark,
.result-footer {
  flex: 1;
}

.result-header {
  display: flex;
  background-color: #787878;
  color: #fff;
}

.result-mark {
  display: flex;
  background-color: #686868;
  color: #fff;
}

.result-footer {
  display: flex;
  background-color: #787878;
  color: #fff;
}

.row-event {
  display: flex;
}
.row-event * {
  display: flex;
  align-items: center;
}

.event-logo {
  display: flex;
  padding: 0;
}
.event-logo img {
  height: 100%;
  width: auto;
  padding: 0;
}

.event-name {
  width: 100%;
  padding-left: 1vw;
  text-overflow: clip;
  overflow: hidden;
  background-color: #0d47a1;
  color: #ffffff;
}

.highlight-result {
  background-color: #b6ffc2;
  color: #000;
}

.active-result {
  background-color: #7ed2ff;
  color: #000;
}

.foul-result {
  background-color: #ff9b9b;
  color: #000;
}

.bg-image {
  display: none;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
}