:root {
  --default-background-colour: #aaaaaa;
}

.html {

  height: 100%;
  width: 100%;

}

.hidden {

  display: none !important;

}

.routes {


}

.route-name {

  font-size: inherit;
  font-weight: bold;
  text-decoration: none;
  color: inherit;

}

.route-name:hover {

  text-decoration: underline;

}

.star {

  height: var(--route-title-height, 16px);
  aspect-ratio: 1 / 1;

}

.grade {

  font-size: inherit;

}

.symbol {

  height: var(--route-title-height, 16px);
  align-items: flex-start;

}

.route-description {

  font-size: var(--route-info-height, inherit);

}

.hold-list {

  font-size: var(--route-info-height, inherit);
  display: block;
  font-weight: var(--route-description-weight, inherit);

}

.FA {

  font-size: var(--route-info-height, inherit);

}

.wrapper-container {
  width: var(--width, 40%);
  float: var(--position, right);
  aspect-ratio: var(--aspectratio, 16 / 9);
  margin: 0 20px; 
}

@media (max-width: 1200px) {
  .wrapping-container {
    display: grid;
  }

  .wrapper-container {
    order: 1;
    width: 100% !important;
    margin: 0;
    margin-bottom: 20px;
  }
}

.display-button {

  float: right;

}

.chevron {

  /* This is to match the title size */
  margin-top: 6.5px;
  height: 35px;
  aspect-ratio: 1 / 1;

}

.page-title {

  font-size: 40px;
  margin: 25px 5px;

}

.page-text {

  font-size: 20px;
  margin: 5px 5px;

}