html {
  font-size: 1vw;
}

header {
  padding-top: 5em;
  position: sticky;
}
header h1 {
  font-family: "Kaisei Opti", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 10rem;

  letter-spacing: 0.5em;
  text-align: center;
}

main {
  padding: 1em 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 7rem;
  text-align: center;
}
main article {
  padding-top: 1em;
}
main article::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 1em;
  background-image: linear-gradient(to right, transparent, #ccc, transparent);
}
main article h3 {
  letter-spacing: .5em;
}
main article .ranks {
  padding-top: 1em;
}
main article .ranks ul {
  width: 80vw;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-around;
}
main article .ranks ul li {
  font-family: "Kaisei Decol", serif;
  font-weight: 700;
  font-style: normal;
  flex: 1 1 33%;
  writing-mode: vertical-rl;
}
main article .ranks ul li.rank-1st {
  order: 2;
  font-size: 1.1em;
}
main article .ranks ul li.rank-2nd {
  order: 1;
  font-size: .9em;
}
main article .ranks ul li.rank-3rd {
  order: 3;
  font-size: .7em;
}
main article .ranks ul li a::after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-inline-start: .3em;
}
main article .ranks ul li.rank-1st a::before {
  font-family: "Font Awesome 6 Free";
  content: "\f521";
}
main article .ranks ul li.rank-1st a::after {
  height: 6em;
  background-color: #ffd700;
}
main article .ranks ul li.rank-2nd a::after {
  height: 4em;
  background-color: #c0c0c0;
}
main article .ranks ul li.rank-3rd a::after {
  height: 3em;
  background-color: #cd7f32;
}
main article .ranks ul li a span {
  position: relative;
}
main article .ranks ul li a span i {
  position: absolute;
  bottom: 0;
  left: -.5em;
  transform: rotate(-15deg);
  z-index: -1;
  color: #0000006e;
}