#header {
  width: 100%;
  height: auto;
  background: linear-gradient(
    180deg,
    rgba(0, 42, 82, 0.3) 0%,
    rgba(20, 20, 20, 0) 72.59%
  );

  .logo-img {
    width: 150px;
    height: 89px;
    transition: 1s;

    &:hover {
      scale: 1.1;
    }
  }

  & li {
    cursor: pointer;

    .item {
      color: white;
    }

    &:hover {
      .item {
        color: var(--primary100);
      }
    }
  }
  .active a {
    color: var(--primary100);

    &:hover {
      color: var(--primary200);
    }
  }

  .img-nav {
    width: 20px;
    height: 20px;
  }

  .btn {
    padding: 12px 22px;
    border: double 1.5px transparent;
    border-radius: 4px;
    background-image: linear-gradient(var(--dark900), var(--dark900)),
      linear-gradient(
        160deg,
        var(--secondary700) 0%,
        var(--secondary100) 50%,
        var(--secondary700) 100%
      );
    background-origin: border-box;
    background-clip: padding-box, border-box;

    &:hover {
      background-image: linear-gradient(var(--dark1000), var(--dark1000)),
        linear-gradient(
          160deg,
          var(--secondary100) 0%,
          var(--secondary800) 50%,
          var(--secondary100) 100%
        );

      & span {
        color: var(--secondary200);
      }
    }

    & span {
      color: var(--light200);
    }
  }

  .right a {
    color: var(--primary100);

    &:hover {
      color: var(--primary300);
      scale: 1.03;
    }
  }

  .menu-btn {
    width: 0px;
    height: 0px;
    cursor: pointer;
  }
  .menu-btn img {
    width: 100%;
    height: 100%;
  }

  .navbar-cel ul {
    background-color: var(--dark900);
  }
  .navbar-cel ul li {
    padding: 0;
  }
}

#location {
  & a {
    color: var(--dark300);
    cursor: pointer;
  }
  & a:last-child {
    color: var(--light600);

    &:hover {
      color: var(--primary100);
    }
  }

  & span {
    color: var(--dark200);
  }

  .contain {
    border-top: 1px solid var(--dark800);
    border-bottom: 1px solid var(--dark800);
    padding: 8px;
  }
}

#banner {
  .img {
    width: 100%;
    height: auto;
    & img {
      width: 100%;
      height: auto;
    }
  }
}

#title {
  color: white;

  & p {
    color: var(--secondary300);
  }
}

#balls {
  .ball {
    border-radius: 50%;
    border: 5px solid var(--dark1000);
    width: 125px;
    height: 125px;

    & img {
      filter: grayscale(100%);
    }
    & img.actived {
      filter: grayscale(0);
    }

    &:hover {
      transition: 1s;
      transform: scale(1.1);
      cursor: pointer;

      & img {
        transition: 0.5s;
        transform: scale(1.1);
      }
    }
  }
}

#classes {
  .archer-info {
    display: flex;
    --animate-duration: 3s;
  }

  .priest-info,
  .warrior-info,
  .mage-info {
    display: none;
    --animate-duration: 3s;
  }

  .class {
    .txt {
      & h2 {
        color: var(--primary400);
      }
      & h6 {
        color: var(--light200);
      }
      & p {
        color: var(--dark300);
      }
      .transf {
        width: 100%;
        height: 80px;
        background-image: url(../assets/classes/classes-trans.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
    }

    .img {
      width: 100%;
      height: auto;

      & img {
        width: 100%;
        height: auto;
      }
    }

    .info {
      & h6 {
        color: var(--secondary500);
      }

      & h3 {
        color: white;
      }

      & p {
        color: var(--dark200);
        max-width: 356px;
      }

      .itens {
        .img {
          width: 35px;
          height: 35px;
          display: flex;
        }
        .svg-icon {
          width: 100%;
          height: auto;
          fill: green;
        }
        .svg-star {
          width: 15px;
          height: 15px;
          fill: black;
        }
        .svg-star.active {
          fill: green;
        }
      }
      .i-archer {
        .svg-icon {
          fill: green;
        }
        .svg-star.active {
          fill: green;
        }
      }
      .i-priest {
        .svg-icon {
          fill: cyan;
        }
        .svg-star.active {
          fill: cyan;
        }
      }
      .i-warrior {
        .svg-icon {
          fill: red;
        }
        .svg-star.active {
          fill: red;
        }
      }
      .i-mage {
        .svg-icon {
          fill: purple;
        }
        .svg-star.active {
          fill: purple;
        }
      }
    }
  }
}

#footer {
  width: 100%;
  height: auto;
  background-color: var(--dark1000);

  & p {
    text-align: center;
    color: white;

    & span {
      color: var(--primary400);
    }
  }
}

/* XXL */
@media (max-width: 1399.98px) {
  #classes {
    .class {
      .txt {
        & h6:first-of-type {
          top: 50px;
          left: 0;
          position: absolute;
        }
        & h6 {
          top: 50px;
          left: 240px;
          position: absolute;
        }
      }
      .transf {
        position: relative;
      }
    }
  }
}

/* XL */
@media (max-width: 1199.98px) {
  #classes {
    .class {
      .txt {
        & h6:first-of-type {
          top: 25px;
        }
        & h6 {
          top: 25px;
          left: 140px;
        }
      }
    }
  }
}

/* LG */
@media (max-width: 991.98px) {
  #balls {
    .ball {
      border: 3px solid var(--dark1000);
      width: 100px;
      height: 100px;
    }
  }

  #classes {
    .class {
      .txt {
        & h6:first-of-type {
          top: 50px;
          left: 0;
        }
        & h6 {
          top: 50px;
          left: 230px;
        }
        & p {
          color: var(--dark200);
          text-align: center;
          padding-bottom: 64px;
        }
      }
      .transf {
        position: relative;
        margin-bottom: 16px;
      }
    }
  }
}

/* MD */
@media (max-width: 767.98px) {
  #classes {
    .class {
      .txt {
        & h6:first-of-type {
          top: 30px;
        }
        & h6 {
          top: 30px;
          left: 170px;
        }
        & p {
          padding-bottom: 32px;
        }
      }
      .transf {
        margin-bottom: 16px;
      }
      .info {
        & p {
          text-align: center;
          max-width: none;
        }
      }
    }
  }
}

/* SM */
@media (max-width: 575.98px) {
  #balls {
    .ball {
      border: 1px solid var(--dark1000);
      width: 50px;
      height: 50px;
    }
  }

  #classes {
    .class {
      .info {
        .itens {
          .img {
            width: 20px;
            height: 20px;
          }
          .svg-icon {
            width: 100%;
          }
          .svg-star {
            width: 10px;
            height: 10px;
          }
        }
      }
    }
  }
}