@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.factory-tracker {
  background-color: rgb(12, 12, 12);
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  justify-content: space-around;
  margin: 0 auto 0 0;
  position: relative;
  color: white;
  max-width: 1272px;
  padding: 8px;
  min-height: 2100px;

  .options {
    max-width: 848px;
  }

  button {
    color: white;
    border: none;
    padding: 4px;
  }

  h1 {
    color: white;
    font-size: 24px;
    margin: 36px 0 12px;
    font-weight: bold;
  }

  .reset-button {
    margin: 0 0 12px;
  }

  label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 500px;
    margin: 0 0 12px;

    span {
      margin: auto 0;
    }
  }

  input {
    width: 208px;
    padding: 4px;
    background-color: rgb(34, 34, 73);
    border-color: darkgray;
    color: white;
    font-size: 20px;
  }

  .type-buttons {
    display: flex;
    flex-wrap: wrap;
    max-width: 840px;
    margin-bottom: 8px;
  }

  .opponent-info {
    background-color: rgb(34, 34, 73);
    align-self: center;
    width: 360px;
    margin: 0 auto 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
    font-weight: bold;
    border-radius: 8px;

    p {
      align-self: center;
    }

    div {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 8px;
    }

    .info-move {
      padding: 4px 8px;
      font-weight: normal;
    }
  }

  @media screen and (min-width: 799px) {
    .opponent-info {
      margin-right: auto;
      margin-left: 194px;
    }
  }

  @media screen and (min-width: 1183px) {
    .opponent-info {
      margin-right: auto;
      margin-left: 388px;
    }
  }

  .info-move {
    border-radius: 4px;
    margin: 2px;
    width: 120px;
    text-align: center;
  }

  .info-style {
    margin: 3px;
    padding: 2px 0;
    font-weight: normal;
  }

  .pokemon-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 8px;
  }

  .pinned-list .pokemon {
    background-color: rgb(61, 34, 73);
  }

  .pokemon {
    background-color: rgb(34, 34, 73);
    padding: 8px;
    border-radius: 8px;
    margin: 4px;
    width: 100%;
    max-width: 360px;
    animation-name: appear;
    animation-duration: 0.5s;

    &.my-pokemon {
      background-color: rgb(39, 61, 72);
    }
    &.blacklisted {
      background-color: rgb(70, 0, 0);
    }

    .name {
      text-align: center;
      margin: 8px 0;
      position: relative;
      font-weight: bold;
    }
    .pin-button {
      position: absolute;
      background-color: unset;
      border: unset;
      color: white;
      right: 0px;
      padding: 0;
    }
    .blacklist-button {
      position: absolute;
      background-color: unset;
      border: unset;
      color: white;
      right: 24px;
      padding: 0;
    }
    .my-pokemon-button {
      position: absolute;
      background-color: unset;
      border: unset;
      color: white;
      right: 48px;
      padding: 0;
    }
  }

  .pokemon-contents {
    display: flex;
    flex-direction: row;

    div {
      width: 50%;

      p {
        padding: 6px 4px;
      }
    }
    .right {
      text-align: right;
    }
    .move {
      text-align: center;
      border: 1px solid black;
      border-radius: 4px;
      margin: 2px;
      padding: 8px 0;
    }
    .abilities {
      font-size: 13px;
      line-height: 16px;
    }
  }

  .move,
  .info-move {
    &.bug {
      background-color: rgb(83, 116, 80);
    }
    &.dark {
      background-color: rgb(37, 37, 37);
    }
    &.dragon {
      background-color: rgb(23, 16, 70);
    }
    &.electric {
      background-color: rgb(146, 129, 0);
    }
    &.fighting {
      background-color: rgb(81, 40, 2);
    }
    &.fire {
      background-color: rgb(108, 0, 0);
    }
    &.flying {
      background-color: rgb(91, 113, 134);
    }
    &.ghost {
      background-color: rgb(34, 26, 43);
    }
    &.grass {
      background-color: rgb(1, 55, 5);
    }
    &.ground {
      background-color: rgb(107, 93, 79);
    }
    &.ice {
      background-color: rgb(46, 83, 112);
    }
    &.normal {
      background-color: rgb(93, 93, 93);
    }
    &.poison {
      background-color: rgb(73, 9, 87);
    }
    &.psychic {
      background-color: rgb(120, 76, 121);
    }
    &.rock {
      background-color: rgb(121, 86, 38);
    }
    &.steel {
      background-color: rgb(61, 61, 61);
    }
    &.water {
      background-color: rgb(0, 28, 128);
    }
    &.curse {
      background-color: rgb(26, 77, 63);
    }
  }

  .home-button {
    position: absolute;
    color: white;
    top: 12px;
    left: 8px;
    text-underline-offset: 4px;
  }

  .spacer {
    height: 100%;
    margin: auto;
  }
}