/*
 Fonts and other imports
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

/*
 General styles
*/

/* light/dark theme color definition */

:root {
  color-scheme: light dark;
  --color-nested-fade: light-dark(#000000, #ffffff);
  --color-odd-background: light-dark(#f5f5f5, #5f5f5f);
  --color-weekend-background: light-dark(#e0e0fb, #1b1b55);
  --color-background: light-dark(#eeeeee, #333333);
  --color-text-card: light-dark(#151515, #dddddd);
  --color-background-card: light-dark(#f0eded, #555252);
  --color-background-border: light-dark(#a01c1c, #c68f8f);
  --color-text-label: light-dark(#4d4d4d, #dddddd);
  --color-tooltip-label: #eeeeee;

  transition-duration: 200ms;
  transition-property: color, background-color;

  @media screen and (prefers-reduced-motion: reduce) {
    transition-duration: none;
  }
}
/*
 light/dark theme color assignment
*/

body {
  background-color: var(--color-background);
}

.vis-label.vis-nested-group.vis-group-level-1 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.05);
}

.vis-label.vis-nested-group.vis-group-level-2 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.10);
}

.vis-label.vis-nested-group.vis-group-level-3 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.15);
}

.vis-label.vis-nested-group.vis-group-level-4 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.20);
}

.vis-label.vis-nested-group.vis-group-level-5 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.25);
}

.vis-label.vis-nested-group.vis-group-level-6 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.30);
}

.vis-label.vis-nested-group.vis-group-level-7 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.35);
}

.vis-label.vis-nested-group.vis-group-level-8 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.40);
}

.vis-label.vis-nested-group.vis-group-level-9 {
  background-color: rgb(from var(--color-nested-fade) r g b / 0.45);
}

.vis-labelset .vis-label, .vis-time-axis .vis-text {
  color: var(--color-text-label);
}

/* footer left/right display */

footer {
  display: flex;
}

footer > * {
  flex-grow: 1;
}

footer > *:last-child {
  text-align: right;
}

/* footer dark theme toggle */

*[data-color-scheme="light"] .color-scheme-toggle::before {
content: '🌙';
}

.color-scheme-toggle::before {
content: '🔆';
}

.color-scheme-toggle {
  margin: 3px;
  height: 100%;
  aspect-ratio: 1 / 1;
}

/* general timeline styles */

#lets-go-timeline {
  border: 1px solid lightgray;
  font-family: "Lato", "Open Sans", sans-serif;
  max-height: calc(100vh - 4rem);
}

.has-title {
  text-decoration: underline dashed;
}

/* alternating column backgrounds */
 .vis-time-axis .vis-grid.vis-odd {
  background: var(--color-odd-background);
}

/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday, .vis-time-axis .vis-grid.vis-sunday {
  /*background: hsl(from var(--color-odd-background) h s calc(l - 20));*/
  background: var(--color-weekend-background);
}

/* short event fadeouts when shown in point mode, and make a tag shape */
.vis-item.vis-point:not(.vis-selected) .vis-item-content {
  --mask: linear-gradient(to right, 
      rgba(0,0,0, 1) -5%,   rgba(0,0,0, 1) 60%,
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) -5%
  ) 100% 50% / 100% 100% repeat-x;
  
  /*border: 1px #d8d8d8 dashed;*/
  -webkit-mask: var(--mask); 
  mask: var(--mask);
  mask-mode: alpha;
  
  --tag-length: 1em;
  
  clip-path: polygon(
    calc(0% + var(--tag-length)) 0%, /*top left*/
    100% 0%, /*top right*/
    100% 100%, /*bottom right*/
    calc(0% + var(--tag-length)) 100%, /*bottom left*/
    0% 50.0%); /*tag point*/
}

/* fill entire non-background event item with content */
.vis-item:not(.vis-background) .vis-item-content.template-item {
  width: 100%;
}

/* bump point items content a bit further because of the tag shape */
.vis-item.vis-point .vis-item-content {
  padding-left: 16px;
}

/* raid: raid type backgrounds */

.vis-item .vis-item-content.raid {
  background-position-x: left 4px;
  background-position-y: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-image: none;
  background-size: auto 80%;
  background-origin: padding-box;
  background-clip: border-box;
  padding-left: 32px;
}

/* vis points need the raid icons moved a bit further */
.vis-point > .vis-item-content.raid {
  background-position-x: left 8px;
  padding-left: 36px;
}

.vis-item-content.raid.raid-5-star {
  background-image: url('./images/icons/raid.svg');
}

.vis-item-content.raid.raid-mega {
  background-image: url('./images/icons/mega.svg');
}

.vis-item-content.raid.raid-shadow {
  background-image: url('./images/icons/shadow.svg');
}

/* raid: boss image overflows */
.vis-item-visible-frame {
  text-align: right;
  height: 200%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}

.vis-item-visible-frame img {
  height: 64px;
}

/* timeline tooltips/popups */

#tooltip {
  /* required for floating-ui */
  position: absolute;
  width: max-content;
  top: 0;
  left: 0;

  /* other tooltip defaults */
  display: none;
  color: var(--color-tooltip-label);
  font-weight: bold;
  padding: 5px;
  border-radius: 4px;
  font-size: 90%;
  z-index: 9001;
}

#tooltip .arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px black;
}

#tooltip .content {
  position: relative;
}

#tooltip .more-details-link.leekduck a::before {
  content: '';
  background: url('./images/icons/leekduck.svg');
  color: var(--color-tooltip-label);
  height: 1.2em;
  width: 1.2em;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 3px;
  margin-right: 3px
}

#tooltip .more-details-link.leekduck a, #tooltip .more-details-link.leekduck a:visited {
  color: var(--color-tooltip-label);
}

.boss-detail {
  font-size: 140%;
}

.cp-prefix {
  font-size: 60%;
}

.boss-type {
  font-size: smaller;
  display: flex;
  flex-wrap: nowrap;
  column-gap: 3px;
}

.boss-type .type {
  background: darkgray;
  border-radius: 9001px;
  display: flex;
  flex-wrap: nowrap;
  column-gap: 4px;
  padding: 1px 6px;
}

.boss-type .type-icon {
  height: 1em;
  margin: auto;
}

.boss-type .type-label {
  --shadow-size: 0.07em;
  --shadow-color: light-dark(#ffffff00, #000000ff);
  line-height: 1.4em;
  text-shadow:
    var(--shadow-size) 0 var(--shadow-color),
    0 var(--shadow-size) var(--shadow-color),
    calc(-1 * var(--shadow-size)) 0 var(--shadow-color),
    0 calc(-1 * var(--shadow-size)) var(--shadow-color);
}

#tooltip .title {
  text-align: center;
}

/* individual timeline items */

.vis-item .vis-item-content {
  color: var(--color-tooltip-label);
  border-color: rgba(0, 0, 0, 0);
  background-clip:border-box;
  font-weight: bolder;
}

/* override season background colors with our own tint */
.vis-item.vis-background.season {
  background-color: hsl(from var(--color-season) h s l / 0.3);
}

/* variables for event types, colors are from LeekDuck */
:root {
  --dot-darken: -15;
  --color-default-event: #dfe6e9;
  --color-community-day: #1660a9;
  --color-raid-day: #e74c3c;
  --color-raid-battles: #c0392b;
  --color-elite-raids: #a21416;
  --color-event: #27ae60;
  --color-season: #38ada9;
  --color-raid-hour: #c0392b;
  --color-research: #1abc9c;
  --color-research-day: #159e83;
  --color-timed-research: #1abc9c;
  --color-limited-research: #159e83;
  --color-pokéstop-showcase: #3ca392;
  --color-pokestop-showcase: #3ca392;
  --color-live-event: #d63031;
  --color-pokémon-go-fest: #153d94;
  --color-pokemon-go-fest: #153d94;
  --color-pokémon-go-tour: #1d3a74;
  --color-pokemon-go-tour: #1d3a74;
  --color-research-breakthrough: #795548;
  --color-special-research: #13a185;
  --color-global-challenge: #0a64b5;
  --color-go-rocket-takeover: #1e1e1e;
  --color-team-go-rocket: #1e1e1e;
  --color-giovanni-special-research: #1e272e;
  --color-safari-zone: #3d7141;
  --color-city-safari: #3d7141;
  --color-ticketed-event: #de3e9b;
  --color-ticketed: #de3e9b;
  --color-go-battle-league: #8e44ad;
  --color-pokémon-spotlight-hour: #e58e26;
  --color-pokemon-spotlight-hour: #e58e26;
  --color-bonus-hour: #40407a;
  --color-update: #2980b9;
  --color-raid-weekend: #6f1e51;
  --color-potential-ultra-unlock: #2c3e50;
  --color-location-specific: #284b92;
  --color-wild-area: #015b63;
  --color-max-battles: #811356;
  --color-max-mondays: #690342;
  --color-go-pass: #ddb22f;
}
.default-event:not(.vis-point), .vis-item.vis-point.default-event > .vis-item-content, .default-event + .vis-dot {
  background-color: var(--color-default-event);
  border-color: hsl(from var(--color-default-event) h s calc(l + var(--dot-darken)));
}
.community-day:not(.vis-point), .vis-item.vis-point.community-day > .vis-item-content, .community-day + .vis-dot {
  background-color: var(--color-community-day);
  border-color: hsl(from var(--color-community-day) h s calc(l + var(--dot-darken)));
}
.raid-day:not(.vis-point), .vis-item.vis-point.raid-day > .vis-item-content, .raid-day + .vis-dot {
  background-color: var(--color-raid-day);
  border-color: hsl(from var(--color-raid-day) h s calc(l + var(--dot-darken)));
}
.raid-battles:not(.vis-point), .vis-item.vis-point.raid-battles > .vis-item-content, .raid-battles + .vis-dot {
  background-color: var(--color-raid-battles);
  border-color: hsl(from var(--color-raid-battles) h s calc(l + var(--dot-darken)));
}
.elite-raids:not(.vis-point), .vis-item.vis-point.elite-raids > .vis-item-content, .elite-raids + .vis-dot {
  background-color: var(--color-elite-raids);
  border-color: hsl(from var(--color-elite-raids) h s calc(l + var(--dot-darken)));
}
.event:not(.vis-point), .vis-item.vis-point.event > .vis-item-content, .event + .vis-dot {
  background-color: var(--color-event);
  border-color: hsl(from var(--color-event) h s calc(l + var(--dot-darken)));
}
.season:not(.vis-point), .vis-item.vis-point.season > .vis-item-content, .season + .vis-dot {
  background-color: var(--color-season);
  border-color: hsl(from var(--color-season) h s calc(l + var(--dot-darken)));
}
.raid-hour:not(.vis-point), .vis-item.vis-point.raid-hour > .vis-item-content, .raid-hour + .vis-dot {
  background-color: var(--color-raid-hour);
  border-color: hsl(from var(--color-raid-hour) h s calc(l + var(--dot-darken)));
}
.research:not(.vis-point), .vis-item.vis-point.research > .vis-item-content, .research + .vis-dot {
  background-color: var(--color-research);
  border-color: hsl(from var(--color-research) h s calc(l + var(--dot-darken)));
}
.research-day:not(.vis-point), .vis-item.vis-point.research-day > .vis-item-content, .research-day + .vis-dot {
  background-color: var(--color-research-day);
  border-color: hsl(from var(--color-research-day) h s calc(l + var(--dot-darken)));
}
.timed-research:not(.vis-point), .vis-item.vis-point.timed-research > .vis-item-content, .timed-research + .vis-dot {
  background-color: var(--color-timed-research);
  border-color: hsl(from var(--color-timed-research) h s calc(l + var(--dot-darken)));
}
.limited-research:not(.vis-point), .vis-item.vis-point.limited-research > .vis-item-content, .limited-research + .vis-dot {
  background-color: var(--color-limited-research);
  border-color: hsl(from var(--color-limited-research) h s calc(l + var(--dot-darken)));
}
.pokéstop-showcase:not(.vis-point), .vis-item.vis-point.pokéstop-showcase > .vis-item-content, .pokéstop-showcase + .vis-dot, .pokestop-showcase:not(.vis-point), .vis-item.vis-point.pokestop-showcase > .vis-item-content, .pokestop-showcase + .vis-dot {
  background-color: var(--color-pokéstop-showcase);
  border-color: hsl(from var(--color-pokéstop-showcase) h s calc(l + var(--dot-darken)));
}
.live-event:not(.vis-point), .vis-item.vis-point.live-event > .vis-item-content, .live-event + .vis-dot {
  background-color: var(--color-live-event);
  border-color: hsl(from var(--color-live-event) h s calc(l + var(--dot-darken)));
}
.pokémon-go-fest:not(.vis-point), .vis-item.vis-point.pokémon-go-fest > .vis-item-content, .pokémon-go-fest + .vis-dot, .pokemon-go-fest:not(.vis-point), .vis-item.vis-point.pokemon-go-fest > .vis-item-content, .pokemon-go-fest + .vis-dot {
  background-color: var(--color-pokémon-go-fest);
  border-color: hsl(from var(--color-pokémon-go-fest) h s calc(l + var(--dot-darken)));
}
.pokémon-go-tour:not(.vis-point), .vis-item.vis-point.pokémon-go-tour > .vis-item-content, .pokémon-go-tour + .vis-dot, .pokemon-go-tour:not(.vis-point), .vis-item.vis-point.pokemon-go-tour > .vis-item-content, .pokemon-go-tour + .vis-dot {
  background-color: var(--color-pokémon-go-tour);
  border-color: hsl(from var(--color-pokémon-go-tour) h s calc(l + var(--dot-darken)));
}
.research-breakthrough:not(.vis-point), .vis-item.vis-point.research-breakthrough > .vis-item-content, .research-breakthrough + .vis-dot {
  background-color: var(--color-research-breakthrough);
  border-color: hsl(from var(--color-research-breakthrough) h s calc(l + var(--dot-darken)));
}
.special-research:not(.vis-point), .vis-item.vis-point.special-research > .vis-item-content, .special-research + .vis-dot {
  background-color: var(--color-special-research);
  border-color: hsl(from var(--color-special-research) h s calc(l + var(--dot-darken)));
}
.global-challenge:not(.vis-point), .vis-item.vis-point.global-challenge > .vis-item-content, .global-challenge + .vis-dot {
  background-color: var(--color-global-challenge);
  border-color: hsl(from var(--color-global-challenge) h s calc(l + var(--dot-darken)));
}
.go-rocket-takeover:not(.vis-point), .vis-item.vis-point.go-rocket-takeover > .vis-item-content, .go-rocket-takeover + .vis-dot {
  background-color: var(--color-go-rocket-takeover);
  border-color: hsl(from var(--color-go-rocket-takeover) h s calc(l + var(--dot-darken)));
}
.team-go-rocket:not(.vis-point), .vis-item.vis-point.team-go-rocket > .vis-item-content, .team-go-rocket + .vis-dot {
  background-color: var(--color-team-go-rocket);
  border-color: hsl(from var(--color-team-go-rocket) h s calc(l + var(--dot-darken)));
}
.giovanni-special-research:not(.vis-point), .vis-item.vis-point.giovanni-special-research > .vis-item-content, .giovanni-special-research + .vis-dot {
  background-color: var(--color-giovanni-special-research);
  border-color: hsl(from var(--color-giovanni-special-research) h s calc(l + var(--dot-darken)));
}
.safari-zone:not(.vis-point), .vis-item.vis-point.safari-zone > .vis-item-content, .safari-zone + .vis-dot {
  background-color: var(--color-safari-zone);
  border-color: hsl(from var(--color-safari-zone) h s calc(l + var(--dot-darken)));
}
.city-safari:not(.vis-point), .vis-item.vis-point.city-safari > .vis-item-content, .city-safari + .vis-dot {
  background-color: var(--color-city-safari);
  border-color: hsl(from var(--color-city-safari) h s calc(l + var(--dot-darken)));
}
.ticketed-event:not(.vis-point), .vis-item.vis-point.ticketed-event > .vis-item-content, .ticketed-event + .vis-dot {
  background-color: var(--color-ticketed-event);
  border-color: hsl(from var(--color-ticketed-event) h s calc(l + var(--dot-darken)));
}
.ticketed:not(.vis-point), .vis-item.vis-point.ticketed > .vis-item-content, .ticketed + .vis-dot {
  background-color: var(--color-ticketed);
  border-color: hsl(from var(--color-ticketed) h s calc(l + var(--dot-darken)));
}
.go-battle-league:not(.vis-point), .vis-item.vis-point.go-battle-league > .vis-item-content, .go-battle-league + .vis-dot {
  background-color: var(--color-go-battle-league);
  border-color: hsl(from var(--color-go-battle-league) h s calc(l + var(--dot-darken)));
}
.pokémon-spotlight-hour:not(.vis-point), .vis-item.vis-point.pokémon-spotlight-hour > .vis-item-content, .pokémon-spotlight-hour + .vis-dot, .pokemon-spotlight-hour:not(.vis-point), .vis-item.vis-point.pokemon-spotlight-hour > .vis-item-content, .pokemon-spotlight-hour + .vis-dot {
  background-color: var(--color-pokémon-spotlight-hour);
  border-color: hsl(from var(--color-pokémon-spotlight-hour) h s calc(l + var(--dot-darken)));
}
.bonus-hour:not(.vis-point), .vis-item.vis-point.bonus-hour > .vis-item-content, .bonus-hour + .vis-dot {
  background-color: var(--color-bonus-hour);
  border-color: hsl(from var(--color-bonus-hour) h s calc(l + var(--dot-darken)));
}
.update:not(.vis-point), .vis-item.vis-point.update > .vis-item-content, .update + .vis-dot {
  background-color: var(--color-update);
  border-color: hsl(from var(--color-update) h s calc(l + var(--dot-darken)));
}
.raid-weekend:not(.vis-point), .vis-item.vis-point.raid-weekend > .vis-item-content, .raid-weekend + .vis-dot {
  background-color: var(--color-raid-weekend);
  border-color: hsl(from var(--color-raid-weekend) h s calc(l + var(--dot-darken)));
}
.potential-ultra-unlock:not(.vis-point), .vis-item.vis-point.potential-ultra-unlock > .vis-item-content, .potential-ultra-unlock + .vis-dot {
  background-color: var(--color-potential-ultra-unlock);
  border-color: hsl(from var(--color-potential-ultra-unlock) h s calc(l + var(--dot-darken)));
}
.location-specific:not(.vis-point), .vis-item.vis-point.location-specific > .vis-item-content, .location-specific + .vis-dot {
  background-color: var(--color-location-specific);
  border-color: hsl(from var(--color-location-specific) h s calc(l + var(--dot-darken)));
}
.wild-area:not(.vis-point), .vis-item.vis-point.wild-area > .vis-item-content, .wild-area + .vis-dot {
  background-color: var(--color-wild-area);
  border-color: hsl(from var(--color-wild-area) h s calc(l + var(--dot-darken)));
}
.max-battles:not(.vis-point), .vis-item.vis-point.max-battles > .vis-item-content, .max-battles + .vis-dot {
  background-color: var(--color-max-battles);
  border-color: hsl(from var(--color-max-battles) h s calc(l + var(--dot-darken)));
}
.max-mondays:not(.vis-point), .vis-item.vis-point.max-mondays > .vis-item-content, .max-mondays + .vis-dot {
  background-color: var(--color-max-mondays);
  border-color: hsl(from var(--color-max-mondays) h s calc(l + var(--dot-darken)));
}
.go-pass:not(.vis-point), .vis-item.vis-point.go-pass > .vis-item-content, .go-pass + .vis-dot {
  background-color: var(--color-go-pass);
  border-color: hsl(from var(--color-go-pass) h s calc(l + var(--dot-darken)));
}

/* Pokemon lists, as seen on LeekDuck */

.pkmn-list-flex {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  padding-inline-start:0;
  margin-top:0;
  padding-bottom:1em;
}

.pkmn-list-item {
  display:inline-block;
  margin:6px;
  /*width:calc(50% - 12px);*/
  text-align:center;
  font-size:smaller;
  position:relative;
  max-width: 200px;
  color: var(--color-text-card);
  background: var(--color-background-card);
  border-radius: 6px;
  border: 3px solid var(--color-background-border);
  padding: 1.25em 10px 0 10px;
}

.pkmn-list-item .pkmn-name {
  margin-top: 0.25em;
  margin-bottom: 10px;
}

.pkmn-list-item .pkmn-list-img img:not(.shiny-icon) {
  position: relative;
  margin-top: -35%;
  margin-bottom: -10%;
}

.pkmn-list-item .shiny-icon {
  position: fixed;
  height: 1.25em;
  transform: translate(-125%, 25%);
}

.pkmn-list-img {
  border-radius: 12px;
  background: #f0f8ff;
  border: 1px solid #ddd;
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(184, 184, 208, 0.15) 100%);
}

.pkmn-list-img img {
  height: auto;
  max-width: 128px;
}
.pkmn-list-img.unknown {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(184, 184, 208, 0.15) 100%);
}
.pkmn-list-img.bug {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(168, 184, 32, 0.15) 100%)
}
.pkmn-list-img.dark {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(162, 146, 136, 0.15) 100%)
}
.pkmn-list-img.dragon {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(112, 56, 248, 0.15) 100%)
}
.pkmn-list-img.electric {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(248, 208, 48, 0.15) 100%)
}
.pkmn-list-img.fairy {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(238, 153, 172, 0.15) 100%)
}
.pkmn-list-img.fighting {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(192, 48, 40, 0.15) 100%)
}
.pkmn-list-img.fire {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(240, 128, 48, 0.15) 100%)
}
.pkmn-list-img.flying {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(168, 144, 240, 0.15) 100%)
}
.pkmn-list-img.ghost {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(112, 88, 152, 0.15) 100%)
}
.pkmn-list-img.grass {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(120, 200, 80, 0.15) 100%)
}
.pkmn-list-img.ground {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(224, 192, 104, 0.15) 100%)
}
.pkmn-list-img.ice {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(152, 216, 216, 0.15) 100%)
}
.pkmn-list-img.normal {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(168, 168, 120, 0.15) 100%)
}
.pkmn-list-img.poison {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(160, 64, 160, 0.15) 100%)
}
.pkmn-list-img.psychic {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(248, 88, 136, 0.15) 100%)
}
.pkmn-list-img.rock {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(184, 160, 56, 0.15) 100%)
}
.pkmn-list-img.steel {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(184, 184, 208, 0.15) 100%)
}
.pkmn-list-img.water {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(104, 144, 240, 0.15) 100%)
}
.pkmn-list-img.egg2km {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(106, 176, 76, 0.15) 100%)
}
.pkmn-list-img.egg5km {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(240, 147, 43, 0.15) 100%)
}
.pkmn-list-img.egg7km {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(190, 46, 221, 0.15) 100%)
}
.pkmn-list-img.egg10km {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(72, 52, 212, 0.15) 100%)
}
.pkmn-list-img.egg12km {
  background: radial-gradient(ellipse closest-side at center center, rgb(255, 255, 255) 0, rgba(235, 77, 75, 0.15) 100%)
}

/* 'mon type colors, also from LeekDuck */

:root {
  --color-boss-type-alpha: 1.0
}

.boss-type .type.-Bug {
  background-color:rgba(198, 209, 110, var(--color-boss-type-alpha))
}
.boss-type .type.-type-bug {
  background-color:rgba(198, 209, 110, var(--color-boss-type-alpha))
}
.boss-type .type.type-bug {
  background-color:rgba(198, 209, 110, var(--color-boss-type-alpha))
}
.boss-type .type.-Dark {
  background-color:rgba(162, 146, 136, var(--color-boss-type-alpha))
}
.boss-type .type.-type-dark {
  background-color:rgba(162, 146, 136, var(--color-boss-type-alpha))
}
.boss-type .type.type-dark {
  background-color:rgba(162, 146, 136, var(--color-boss-type-alpha))
}
.boss-type .type.-Dragon {
  background-color:rgba(162, 125, 250, var(--color-boss-type-alpha))
}
.boss-type .type.-type-dragon {
  background-color:rgba(162, 125, 250, var(--color-boss-type-alpha))
}
.boss-type .type.type-dragon {
  background-color:rgba(162, 125, 250, var(--color-boss-type-alpha))
}
.boss-type .type.-Electric {
  background-color:rgba(250, 224, 120, var(--color-boss-type-alpha))
}
.boss-type .type.-type-electric {
  background-color:rgba(250, 224, 120, var(--color-boss-type-alpha))
}
.boss-type .type.type-electric {
  background-color:rgba(250, 224, 120, var(--color-boss-type-alpha))
}
.boss-type .type.-Fairy {
  background-color:rgba(244, 189, 201, var(--color-boss-type-alpha))
}
.boss-type .type.-type-fairy {
  background-color:rgba(244, 189, 201, var(--color-boss-type-alpha))
}
.boss-type .type.type-fairy {
  background-color:rgba(244, 189, 201, var(--color-boss-type-alpha))
}
.boss-type .type.-Fighting {
  background-color:rgba(214, 120, 115, var(--color-boss-type-alpha))
}
.boss-type .type.-type-fighting {
  background-color:rgba(214, 120, 115, var(--color-boss-type-alpha))
}
.boss-type .type.type-fighting {
  background-color:rgba(214, 120, 115, var(--color-boss-type-alpha))
}
.boss-type .type.-Fire {
  background-color:rgba(245, 172, 120, var(--color-boss-type-alpha))
}
.boss-type .type.-type-fire {
  background-color:rgba(245, 172, 120, var(--color-boss-type-alpha))
}
.boss-type .type.type-fire {
  background-color:rgba(245, 172, 120, var(--color-boss-type-alpha))
}
.boss-type .type.-Flying {
  background-color:rgba(198, 183, 245, var(--color-boss-type-alpha))
}
.boss-type .type.-type-flying {
  background-color:rgba(198, 183, 245, var(--color-boss-type-alpha))
}
.boss-type .type.type-flying {
  background-color:rgba(198, 183, 245, var(--color-boss-type-alpha))
}
.boss-type .type.-Ghost {
  background-color:rgba(162, 146, 188, var(--color-boss-type-alpha))
}
.boss-type .type.-type-ghost {
  background-color:rgba(162, 146, 188, var(--color-boss-type-alpha))
}
.boss-type .type.type-ghost {
  background-color:rgba(162, 146, 188, var(--color-boss-type-alpha))
}
.boss-type .type.-Grass {
  background-color:rgba(167, 219, 141, var(--color-boss-type-alpha))
}
.boss-type .type.-type-grass {
  background-color:rgba(167, 219, 141, var(--color-boss-type-alpha))
}
.boss-type .type.type-grass {
  background-color:rgba(167, 219, 141, var(--color-boss-type-alpha))
}
.boss-type .type.-Ground {
  background-color:rgba(235, 214, 157, var(--color-boss-type-alpha))
}
.boss-type .type.-type-ground {
  background-color:rgba(235, 214, 157, var(--color-boss-type-alpha))
}
.boss-type .type.type-ground {
  background-color:rgba(235, 214, 157, var(--color-boss-type-alpha))
}
.boss-type .type.-Ice {
  background-color:rgba(188, 230, 230, var(--color-boss-type-alpha))
}
.boss-type .type.-type-ice {
  background-color:rgba(188, 230, 230, var(--color-boss-type-alpha))
}
.boss-type .type.type-ice {
  background-color:rgba(188, 230, 230, var(--color-boss-type-alpha))
}
.boss-type .type.-Normal {
  background-color:rgba(198, 198, 167, var(--color-boss-type-alpha))
}
.boss-type .type.-type-normal {
  background-color:rgba(198, 198, 167, var(--color-boss-type-alpha))
}
.boss-type .type.type-normal {
  background-color:rgba(198, 198, 167, var(--color-boss-type-alpha))
}
.boss-type .type.-Poison {
  background-color:rgba(193, 131, 193, var(--color-boss-type-alpha))
}
.boss-type .type.-type-poison {
  background-color:rgba(193, 131, 193, var(--color-boss-type-alpha))
}
.boss-type .type.type-poison {
  background-color:rgba(193, 131, 193, var(--color-boss-type-alpha))
}
.boss-type .type.-Psychic {
  background-color:rgba(250, 146, 178, var(--color-boss-type-alpha))
}
.boss-type .type.-type-psychic {
  background-color:rgba(250, 146, 178, var(--color-boss-type-alpha))
}
.boss-type .type.type-psychic {
  background-color:rgba(250, 146, 178, var(--color-boss-type-alpha))
}
.boss-type .type.-Rock {
  background-color:rgba(209, 193, 125, var(--color-boss-type-alpha))
}
.boss-type .type.-type-rock {
  background-color:rgba(209, 193, 125, var(--color-boss-type-alpha))
}
.boss-type .type.type-rock {
  background-color:rgba(209, 193, 125, var(--color-boss-type-alpha))
}
.boss-type .type.-Steel {
  background-color:rgba(209, 209, 224, var(--color-boss-type-alpha))
}
.boss-type .type.-type-steel {
  background-color:rgba(209, 209, 224, var(--color-boss-type-alpha))
}
.boss-type .type.type-steel {
  background-color:rgba(209, 209, 224, var(--color-boss-type-alpha))
}
.boss-type .type.-Water {
  background-color:rgba(157, 183, 245, var(--color-boss-type-alpha))
}
.boss-type .type.-type-water {
  background-color:rgba(157, 183, 245, var(--color-boss-type-alpha))
}
.boss-type .type.type-water {
  background-color:rgba(157, 183, 245, var(--color-boss-type-alpha))
}