/* Variables ───────────────────────────────────────────────────────────────────
*/

/* https://en.wikipedia.org/wiki/Shades_of_orange */
:root {
  --butterscotch: #e09540;
  --persian-orange: #d99058;
}

/* Pokémon – https://www.pokemon.com */
:root {
  --pokemon-background-color: #f2f2f2;
  --pokemon-type-bug-color: #729f3f;
  --pokemon-type-dragon-color: #53a4cf;
  --pokemon-type-dragon-color: #f16e57;
  --pokemon-type-electric-color: #eed535;
  --pokemon-type-fairy-color: #fdb9e9;
  --pokemon-type-fighting-color: #d56723;
  --pokemon-type-fire-color: #fd7d24;
  --pokemon-type-flying-color: #3dc7ef;
  --pokemon-type-flying-color: #bdb9b8;
  --pokemon-type-ghost-color: #7b62a3;
  --pokemon-type-grass-color: #9bcc50;
  --pokemon-type-ground-color: #f7de3f;
  --pokemon-type-ground-color: #ab9842;
  --pokemon-type-ice-color: #51c4e7;
  --pokemon-type-normal-color: #a4acaf;
  --pokemon-type-poison-color: #b97fc9;
  --pokemon-type-psychic-color: #f366b9;
  --pokemon-type-rock-color: #a38c21;
  --pokemon-type-steel-color: #9eb7b8;
  --pokemon-type-water-color: #4592c4;
}

/* Layout ──────────────────────────────────────────────────────────────────────
*/

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: sans-serif;
}

a {
  color: var(--persian-orange);
  text-decoration: none;
}

a:hover {
  color: var(--butterscotch);
  text-decoration: underline;
}

#header {
  display: flex;
  justify-content: space-between;
  color: white;
  background-color: var(--persian-orange);
}

#header nav ul {
  display: flex;
  list-style: none;
  margin: 0;
}

#header a, #header button {
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 20px;
}

#header button {
  height: 100%;
}

#header .drop-down .menu {
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  color: white;
  background-color: var(--persian-orange);
  border-collapse: collapse;
  border: 1px solid var(--butterscotch);
}

#header .drop-down:hover .menu, #header .drop-down button:focus + .menu {
  display: flex;
  flex-direction: column;
}

#header li:focus, #header li:hover, #header a:focus, #header a:hover {
  background-color: var(--butterscotch);
}

#header header {
  font-weight: bold;
}

#header header a {
  color: ghostwhite;
}

#splash {
  color: dimgray;
  background-color: var(--pokemon-background-color);
  text-align: center;
}

#splash figure {
  margin: 0;
  padding-bottom: 20px;
}

main {
  max-width: 60%;
  margin: 0 auto;
}

main > ul {
  list-style: none;
  padding-left: 0;
}

main > ul li::before {
  content: "–";
}

#next-steps {
  max-width: 60%;
  margin: 0 auto;
  text-align: center;
  font-size: 23px;
}

#next-steps p {
  color: var(--persian-orange);
  border-bottom: 1px solid var(--pokemon-background-color);
  padding-bottom: 20px;
}

#next-steps .icons {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

#next-steps .icons .text {
  display: block;
  margin: 20px;
  color: dimgray;
}

footer {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--pokemon-background-color);
}

footer ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
}

footer a {
  color: dimgray;
}

footer .icons i {
  font-size: 18px;
  padding: 5px;
}

/* Specific rules ──────────────────────────────────────────────────────────────
*/

.keys {
  white-space: nowrap;
}

.keys.top {
  vertical-align: top;
}

.krabby:hover kbd {
  box-shadow: 0 3px 1px -2px hsla(0, 0%, 0%, 0.2), 0 2px 2px 0 hsla(0, 0%, 0%, 0.14), 0 1px 5px 0 hsla(0, 0%, 0%, 0.12);
}

.krabby.may-require-install kbd {
  color: white;
  background-color: var(--butterscotch);
}

.krabby.require-install kbd {
  color: white;
  background-color: dimgray;
}

/* General rules ───────────────────────────────────────────────────────────────
*/

figure, img, video {
  max-width: 100%;
}

figcaption {
  font-style: italic;
  text-align: center;
  margin: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}

th, td {
  padding: 20px;
  border: 1px solid black;
}

td ul {
  padding-left: 0;
}

td li {
  list-style: none;
}

label {
  display: block;
}

button {
  font-family: inherit;
  font-size: inherit;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Style from GitHub */
code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-family: monospace;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}
kbd {
  display: inline-block;
  padding: 3px 5px;
  font-family: monospace;
  font-size: 11px;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #d1d5da;
}

/* Helpers ─────────────────────────────────────────────────────────────────────
*/

.skip-to-content {
  position: absolute;
  top: -100%;
  left: -100%;
  overflow: hidden;
}

.skip-to-content:focus {
  position: unset;
  top: unset;
  left: unset;
  overflow: unset;
}

i.big-circle {
  color: white;
  background-color: var(--persian-orange);
  border-radius: 50%;
  padding: 0.8em;
  width: 1em;
  font-size: 150%;
}

a i.big-circle:hover {
  background-color: var(--butterscotch);
}

.pokemon.type {
  text-align: center;
}

.pokemon.type a {
  color: white;
  text-decoration: none;
}

.pokemon.type.bug {
  background-color: var(--pokemon-type-bug-color);
}
.pokemon.type.dragon {
  background-color: var(--pokemon-type-dragon-color);
}
.pokemon.type.electric {
  background-color: var(--pokemon-type-electric-color);
}
.pokemon.type.fairy {
  background-color: var(--pokemon-type-fairy-color);
}
.pokemon.type.fighting {
  background-color: var(--pokemon-type-fighting-color);
}
.pokemon.type.fire {
  background-color: var(--pokemon-type-fire-color);
}
.pokemon.type.flying {
  background-color: var(--pokemon-type-flying-color);
}
.pokemon.type.ghost {
  background-color: var(--pokemon-type-ghost-color);
}
.pokemon.type.grass {
  background-color: var(--pokemon-type-grass-color);
}
.pokemon.type.ground {
  background-color: var(--pokemon-type-ground-color);
}
.pokemon.type.ice {
  background-color: var(--pokemon-type-ice-color);
}
.pokemon.type.normal {
  background-color: var(--pokemon-type-normal-color);
}
.pokemon.type.poison {
  background-color: var(--pokemon-type-poison-color);
}
.pokemon.type.psychic {
  background-color: var(--pokemon-type-psychic-color);
}
.pokemon.type.rock {
  background-color: var(--pokemon-type-rock-color);
}
.pokemon.type.steel {
  background-color: var(--pokemon-type-steel-color);
}
.pokemon.type.water {
  background-color: var(--pokemon-type-water-color);
}
