/* ../components/SkillList.css */
.filterButton {
  background: rgb(214, 207, 231);
  border: none;
  box-shadow: 0 3px 0 rgb(180, 178, 192);
  color: rgb(121, 64, 22);
  padding: 0.8em;
  margin: 10px 5px;
  text-stroke: 1px rgb(121, 64, 22);
  -webkit-text-stroke: 1px rgb(121, 64, 22);
}
.filterButton.active {
  background: rgb(86, 171, 51);
  box-shadow: 0 3px 0 rgb(86, 171, 51);
  color: white;
  text-stroke: 1px white;
  -webkit-text-stroke: 1px white;
}
.iconFilterButton {
  all: unset;
  background-size: contain;
  filter: grayscale(1);
  height: 40px;
  margin: 5px;
  width: 40px;
}
.iconFilterButton.active {
  filter: none;
}
.skillList {
  columns: 4;
  font-size: 16px;
  list-style-type: none;
}
.skill {
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: 0 3px 0 rgb(180, 178, 192);
  box-sizing: border-box;
  height: 3em;
  margin: 10px;
  overflow: hidden;
  padding: 0.2em;
  width: 18em;
}
.skill.selected {
  box-shadow: none;
  filter: brightness(0.95);
}
.skillName {
  color: rgb(121, 64, 22);
  font: 1em/2.5em bold sans-serif;
  text-stroke: 1px rgb(121, 64, 22);
  -webkit-text-stroke: 1px rgb(121, 64, 22);
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
  vertical-align: middle;
}
.skillIcon {
  height: 2.2em;
  margin: -0.2em 8px 0 0;
  vertical-align: middle;
  width: 2.2em;
}
.skill-white {
  background: linear-gradient(90deg, rgb(255, 243, 247), rgb(181, 178, 198)) padding-box, linear-gradient(90deg, rgb(214, 207, 231), rgb(148, 150, 189)) border-box;
}
.skill-gold {
  background: linear-gradient(90deg, rgb(255, 255, 239), rgb(255, 190, 40)) padding-box, linear-gradient(90deg, rgb(255, 223, 115), rgb(255, 166, 16)) border-box;
}
.skill-pink {
  background: linear-gradient(90deg, rgb(255, 238, 239), rgb(255, 155, 211)) padding-box, linear-gradient(90deg, rgb(255, 142, 198), rgb(255, 89, 173)) border-box;
}
.skill-unique {
  background: linear-gradient(90deg, rgb(239, 255, 214), rgb(161, 201, 248), rgb(170, 170, 255), rgb(255, 186, 231)) padding-box, linear-gradient(90deg, rgb(197, 255, 190), rgb(189, 235, 255), rgb(195, 208, 255), rgb(255, 138, 222)) border-box;
}

/* ../components/RaceTrack.css */
.distanceMarker {
  font-weight: 600;
  paint-order: stroke;
  stroke: white;
  stroke-width: 2px;
}
.sectionText {
  dominant-baseline: central;
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: white;
  stroke-width: 2px;
  text-anchor: middle;
}
.racetrackName {
  color: rgb(121, 64, 22);
  font: 18px bold sans-serif;
  text-align: center;
  text-stroke: 1px rgb(121, 64, 22);
  -webkit-text-stroke: 1px rgb(121, 64, 22);
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
}
.mouseoverText {
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: white;
  stroke-width: 2px;
}