body {
  font-family: 'Exo', sans-serif;
  font-weight: 500;
}

.logo-home {
  margin: 0 auto;
  display: flex;
  padding: 40px 0px;
}

.text-home {
  width: 300px;
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.text-home-header {
  font-family: 'Exo', sans-serif;
  font-weight: 800;
  font-style: regular;
  font-size: 150%;
  color: #4e6fd6;
}

.logo {
  height: 50px;
  margin: 40px 0px 30px 0px;
}

.user-title {
  font-family: 'Exo', sans-serif;
  font-weight: 800;
  font-style: regular;
  font-size: 3em;
  color: #4e6fd6;
  margin-bottom: 10px;
}

.fa-youtube, .fa-twitter, .fa-twitch, .fa-id-card, .fa-discord, .fa-book, .fa-patreon, .fa-instagram {
  letter-spacing: 7px;
  transition: color 0.5s ease;
  color: #cccccc;
  font-size: 1.5em;
}

.fa-book {
  color: #cd5254;
}

.fa-instagram:hover {
  color: #c32aa3;
}

.fa-youtube:hover {
  color: #ff0000;
}

.fa-twitter:hover {
  color: #1da1f2;
}

.fa-twitch:hover {
  color: #9146ff;
}

.fa-discord:hover {
  color: #7289da;
}

.fa-id-card:hover {
  color: #4e6fd6;
}

.fa-book:hover {
  color: #4e6fd6;
}

.fa-patreon:hover {
  color: #f96854;
}

.slots {
  margin-top: -4px;
  font-size: 0;
}

.icons:link,
.icons:visited,
.icons:hover,
.icons:active {
  transition: color 0.5s ease;
  color: #cccccc;
}

.slots:hover {
  cursor: pointer;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.team-card {
  width: 312px;
  border-radius: 10px;
  margin: 10px;
}

body {
  background-color: #f2f2f2;
}

.teams-video {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

.team-header {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 5px 10px 5px 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.team-copy {
  display: flex;
}

.team-copy-text {
  font-family: 'Exo', sans-serif;
  font-weight: 800;
  font-style: regular;
  font-size: 1em;
  text-transform: uppercase;
  color: #4e6fd6;
}

.team-header-text {
  font-family: 'Exo', sans-serif;
  font-weight: 800;
  font-style: regular;
  font-size: 1em;
  text-transform: uppercase;
  text-align: left;
  color: #4e6fd6;
}

.fa-copy {
  color: #4e6fd6;
  font-size: 1em;
  font-family: 'Exo', sans-serif;
  font-weight: 800;
  font-style: regular;
}

.fa-copy:hover {
  cursor: pointer;
}

.team-pkmn-name {
  font-family: 'Exo', sans-serif;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.slots-expand {
  display: none;
}

.team-pkmn-info-main {
  display: flex;
  background-color: #fff;
  justify-content: left;
  align-items: center;
  padding: 10px 0px 10px 10px;
  box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.1) inset;
}

.team-pkmn-lv {
  font-family: 'Exo', sans-serif;
  font-size: 0.6em;
  font-weight: 500;
  padding: 5px;
  border-radius: 5px;
}

.team-id-text {
  font-style: italic;
  font-family: 'Exo', sans-serif;
  font-size: 0.8em;
  font-weight: 500;
  float: left;
  color: #8c8c8c;
}

.team-header-format {
  display: flex;
  align-items: baseline;
}

.team-pkmn-lv::before {
  content: "LV ";
}

.fa-caret-square-up {
  color: #cccccc;
}

.divider {
  width: 5px;
  height: auto;
  display: inline-block;
}

.noshow {
  display: none;
}

.team-pkmn-move1-name-bug,
.team-pkmn-move2-name-bug,
.team-pkmn-move3-name-bug,
.team-pkmn-move4-name-bug {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #AFC836;
}

.fa-bug {
  font-size: 0.8em;
  color: #AFC836;
}

.team-pkmn-move1-name-dark,
.team-pkmn-move2-name-dark,
.team-pkmn-move3-name-dark,
.team-pkmn-move4-name-dark {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #6E7587;
}

.fa-moon {
  font-size: 0.8em;
  color: #6E7587;
}

.team-pkmn-move1-name-dragon,
.team-pkmn-move2-name-dragon,
.team-pkmn-move3-name-dragon,
.team-pkmn-move4-name-dragon {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #0180C7;
}

.fa-dragon {
  font-size: 0.8em;
  color: #0180C7;
}

.team-pkmn-move1-name-electric,
.team-pkmn-move2-name-electric,
.team-pkmn-move3-name-electric,
.team-pkmn-move4-name-electric {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #FBE273;
}

.fa-bolt {
  font-size: 0.8em;
  color: #FBE273;
}

.team-pkmn-move1-name-fairy,
.team-pkmn-move2-name-fairy,
.team-pkmn-move3-name-fairy,
.team-pkmn-move4-name-fairy {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #F3A7E7;
}

.fa-sun {
  font-size: 0.8em;
  color: #F3A7E7;
}

.team-pkmn-move1-name-fighting,
.team-pkmn-move2-name-fighting,
.team-pkmn-move3-name-fighting,
.team-pkmn-move4-name-fighting {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #E74347;
}

.fa-fist-raised {
  font-size: 0.8em;
  color: #E74347;
}

.team-pkmn-move1-name-fire,
.team-pkmn-move2-name-fire,
.team-pkmn-move3-name-fire,
.team-pkmn-move4-name-fire {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #FBAE46;
}

.fa-fire-alt {
  font-size: 0.8em;
  color: #FBAE46;
}

.team-pkmn-move1-name-flying,
.team-pkmn-move2-name-flying,
.team-pkmn-move3-name-flying,
.team-pkmn-move4-name-flying {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #A6C2F2;
}

.fa-feather-alt {
  font-size: 0.8em;
  color: #A6C2F2;
}

.team-pkmn-move1-name-ghost,
.team-pkmn-move2-name-ghost,
.team-pkmn-move3-name-ghost,
.team-pkmn-move4-name-ghost {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #7773D4;
}

.fa-ghost {
  font-size: 0.8em;
  color: #7773D4;
}

.team-pkmn-move1-name-grass,
.team-pkmn-move2-name-grass,
.team-pkmn-move3-name-grass,
.team-pkmn-move4-name-grass {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #5AC178;
}

.fa-leaf {
  font-size: 0.8em;
  color: #5AC178;
}

.team-pkmn-move1-name-ground,
.team-pkmn-move2-name-ground,
.team-pkmn-move3-name-ground,
.team-pkmn-move4-name-ground {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #D29463;
}

.fa-mountain {
  font-size: 0.8em;
  color: #D29463;
}

.team-pkmn-move1-name-ice,
.team-pkmn-move2-name-ice,
.team-pkmn-move3-name-ice,
.team-pkmn-move4-name-ice {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #8CDDD4;
}

.fa-icicles {
  font-size: 0.8em;
  color: #8CDDD4;
}

.team-pkmn-move1-name-normal,
.team-pkmn-move2-name-normal,
.team-pkmn-move3-name-normal,
.team-pkmn-move4-name-normal {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #A3A49E;
}

.fa-circle {
  font-size: 0.8em;
  color: #A3A49E;
}

.team-pkmn-move1-name-poison,
.team-pkmn-move2-name-poison,
.team-pkmn-move3-name-poison,
.team-pkmn-move4-name-poison {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #C261D4;
}

.fa-skull {
  font-size: 0.8em;
  color: #C261D4;
}

.team-pkmn-move1-name-psychic,
.team-pkmn-move2-name-psychic,
.team-pkmn-move3-name-psychic,
.team-pkmn-move4-name-psychic {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #FE9F92;
}

.fa-eye {
  font-size: 0.8em;
  color: #FE9F92;
}

.team-pkmn-move1-name-rock,
.team-pkmn-move2-name-rock,
.team-pkmn-move3-name-rock,
.team-pkmn-move4-name-rock {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #D7CD90;
}

.fa-cube {
  font-size: 0.8em;
  color: #D7CD90;
}

.team-pkmn-move1-name-steel,
.team-pkmn-move2-name-steel,
.team-pkmn-move3-name-steel,
.team-pkmn-move4-name-steel {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #58A6AA;
}

.fa-cog {
  font-size: 0.8em;
  color: #58A6AA;
}

.team-pkmn-move1-name-water,
.team-pkmn-move2-name-water,
.team-pkmn-move3-name-water,
.team-pkmn-move4-name-water {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #6CBDE4;
}

.fa-tint {
  font-size: 0.8em;
  color: #6CBDE4;
}

.team-pkmn-move1-name-blank,
.team-pkmn-move2-name-blank,
.team-pkmn-move3-name-blank,
.team-pkmn-move4-name-blank {
  padding: 5px 0px 5px 0px;
  border-bottom: 2px solid #f2f2f2;
}

.team-pkmn-item {
  font-size: 0.8em;
  font-family: 'Exo', sans-serif;
  font-weight: 500;
  display: flex;
  justify-content: left;
  padding: 0px 0px 5px 10px;
  background-color: #f4f6fc;
}

.team-pkmn-item-icon {
  width: 24px;
  height: 24px;
}

.team-pkmn-info-attr {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 0px 0px 10px;
  justify-content: left;
  flex-direction: row;
  font-size: 0.8em;
  font-family: 'Exo', sans-serif;
  font-weight: 500;
  align-items: center;
  box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.1) inset;
  background-color: #f4f6fc;
}

.fa-dot-circle {
  color: #bfbfbf;
  font-size: 0.8em;
}

.team-pkmn-ability, .team-pkmn-nature {
  display: flex;
  align-items: center;
}

.team-pkmn-ability-name, .team-pkmn-nature-name {
  padding: 5px;
}

.team-pkmn-item-name {
  padding: 5px 0px 5px 5px;
}

.team-pkmn-moves {
  font-size: 0.8em;
  font-family: 'Exo', sans-serif;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  padding: 5px 10px 15px 10px;
  background-color: #fff;
  column-gap: 10px;
  text-transform: capitalize;
}

.team-pkmn-move1,
.team-pkmn-move2,
.team-pkmn-move3,
.team-pkmn-move4 {
  display: grid;
  grid-template-columns: 141px;
  column-gap: 10px;
}

.team-pkmn-spread {
  padding: 5px 10px 5px 10px;
  text-align: left;
  font-size: 0.8em;
  font-family: 'Exo', sans-serif;
  font-weight: 500;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.1) inset;
  background-color: #f4f6fc;
}

.team-pkmn-spread-hp-text,
.team-pkmn-spread-atk-text,
.team-pkmn-spread-def-text,
.team-pkmn-spread-spatk-text,
.team-pkmn-spread-spdef-text,
.team-pkmn-spread-speed-text {
  font-size: 0.8em;
  font-weight: 800;
  margin-bottom: 3px;
}

.team-footer {
  display: grid;
  grid-template-columns: 25px 1fr;
  font-family: 'Exo', sans-serif;
  font-weight: 800;
  font-style: regular;
  font-size: 0.8em;
  background-color: #fff;
  padding: 5px 0px 5px 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

.team-footer-credits {
  text-align: left;
  padding-left: 5px;
  place-self: center start;
}

.team-footer-user {
  font-size: 0.8em;
  font-weight: 500;
}

.user-icon {
  border-radius: 50%;
}