#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;
  }
}

#banner {
  width: 100%;
  height: 500px;

  .banner-img {
    width: 100%;
    height: 500px;
    background-image: url("assets/inicio/banner.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  & h3 {
    color: var(--secondary500);
  }

  & h1 {
    max-width: 60%;
    color: var(--light400);

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

  & a:not(.social) {
    padding: 12px 22px;
    border: double 2px transparent;
    color: white;
    background-image: linear-gradient(var(--dark1000), var(--dark1000)),
      linear-gradient(90deg, var(--secondary700) 0%, var(--secondary100) 90%);
    background-origin: border-box;
    background-clip: padding-box, border-box;

    &:hover {
      background-image: linear-gradient(black, black),
        linear-gradient(90deg, var(--primary700) 0%, var(--primary100) 90%);
    }
  }

  .social {
    width: 30px;
    height: 30px;

    &:hover {
      transform: scale(1.2);
    }
  }
}

#info {
  width: 100%;
  height: auto;

  & h3 {
    color: var(--secondary500);
  }
  & h2 {
    color: white;

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

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

  .right {
    text-align: right;
  }

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

  .classes {
    padding-top: 16px;
    & a {
      gap: 32px;
    }

    & img {
      width: 75px;
      border-radius: 100%;
      border: 2px solid var(--dark1000);
    }
  }
}

#cards {
  width: 100%;
  height: auto;

  .titles {
    & h3 {
      color: var(--secondary500);
    }
    & h2 {
      color: white;

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

  .discord {
    background: linear-gradient(
      90deg,
      #4735b7 0%,
      #654cff 60.62%,
      #7763f2 100%
    );

    & h3 {
      color: white;
    }

    & a {
      padding: 12px 24px;
      border-radius: 5px;
      background: #fff;
      color: black;

      &:hover {
        background: black;
        color: white;
      }
    }

    & img {
      width: 75px;
      height: 75px;
    }
  }

  .itens {
    .item {
      width: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      & h5 {
        color: var(--primary300);
      }

      & p {
        height: 100px;
        color: var(--dark100);
      }

      & a {
        padding: 12px 20px;
        border-radius: 5px;
        border: 1px solid var(--primary200);
        background: rgba(0, 0, 0, 0.5);
        color: white;

        &:hover {
          border: 1px solid var(--secondary500);
          background: black;
        }
      }
    }
    .item-1 {
      background-image: url("assets/inicio/item-1.svg");
    }

    .item-2 {
      background-image: url("assets/inicio/item-2.svg");
    }
  }

  .atts {
    & a:hover {
      transform: scale(1.05);
      transition: 1s;
    }
    .theme {
      display: flex;
      margin-top: -15px;
      margin-left: 15px;
      color: white;
      position: absolute;
      padding: 4px 10px;
      background-color: var(--primary700);
    }

    .data {
      display: flex;
      position: absolute;
      margin-top: 120px;
      margin-left: 360px;
      color: var(--secondary700);
    }

    .att {
      width: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      & h6 {
        color: white;
        padding-bottom: 8px;
      }

      & p {
        height: 50px;
        color: var(--dark300);
      }
    }
    .att-1 {
      background-image: url("assets/inicio/att-1.svg");
    }

    .att-2 {
      background-image: url("assets/inicio/att-2.svg");
    }

    .att-3 {
      background-image: url("assets/inicio/att-3.svg");
    }
  }
}

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

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

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