div.tooltip {
  position: absolute;
  text-align: left;
  width:fit-content;
  height: fit-content;
  padding: 4px;
  font: 12px sans-serif;
  background-color: #323232;
  color: #fff;
  border: 1px solid black;
  border-radius: 4px;
  pointer-events: none;
}

.firstcharacter {
  float: left;
  font-size: 3rem;
  line-height: 40px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

span.num {
  font-size: 2rem;
}

.color-bar-tooltip > span {
  font-weight: medium;
  text-transform: capitalize;
  font-size: 14px;
}

.history {
  animation: fade-in 1s ease-in-out;
}

.progress {
  animation: fade-in 1s ease-in;
}

.section {
  padding: 1rem;
}

.animated-li {
  animation: fade-in 1.7s ease-in-out;
}

footer {
  position: absolute;
  padding-left: 1em;
  bottom: 4em;
  color: gray;
}

.subtitle {
  animation: fade-in-2 2s alternate infinite ease-in-out;
  color: #888888;
}

.card-container {
  animation: fade-in 1s ease-in;
}

.country-pop, .pop-warning, .pop-output {
  animation: fade-in 1s ease-in;
  max-width: 60vw;
}

#hist, #hist-ok, #hist-line, #contest-name {
  animation: fade-in 1s ease-in-out;
}

.hidden {
  display: none;
}

li {
  max-width: 60vw;
}

p {
  max-width: 40vw;
}

g, text, title {
  font-family:  var(--bs-font-sans-serif);
}

@keyframes slide-in {
  from {
    margin-top: 40%;
  }

  to {
    margin-top: 0%;
  }
}

@keyframes fade-in {
  from {
    opacity: 0.2;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in-2 {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}