main {
  .top-bar {
    display: flex;
    flex-direction: column-reverse;

    &__nav {
      font-size: 75%;
      width: 100%;
    }

    a.top-bar__countdown {
      background-image: linear-gradient(rgba-color($primary, 0.9), rgba-color($primary, 0.8)), url("https://ecom.nyc3.cdn.digitaloceanspaces.com/storefront/game/bg.png");
      font-weight: var(--font-bold);
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .banner {
    overflow: hidden;
    img {
      transition: all 10s;
    }
  }
  .banner:hover img {
    transform: scale(1.3);
  }

  .header {
    border-bottom: none;
    height: 100px;

    &__nav a {
      color: $secondary;
      font-weight: var(--font-bold);

      &:hover {
        border-bottom-color: $gray-600;
        color: $primary;
        background-color: transparent;
      }
    }
  }

  #search-input {
    border: solid 1px $gray-200;
  }

  #cart-button {
    i:before {
      content: "";
      display: inline-block;
      background-color: $secondary;
      width: 36px;
      height: 36px;
      -webkit-mask: url("https://ecom.nyc3.cdn.digitaloceanspaces.com/storefront/game/bag.png") no-repeat 50% 50%;
      mask: url("https://ecom.nyc3.cdn.digitaloceanspaces.com/storefront/game/bag.png") no-repeat 50% 50%;
      -webkit-mask-size: cover;
      mask-size: cover;
    }

    @media (hover: hover) {
      i:hover:before {
        background-color: $primary;
        filter: drop-shadow(24px 11px 16px #000000);
      }
    }
  }

  #user-button {
    i:before {
      content: "";
      display: inline-block;
      background-color: $secondary;
      width: 36px;
      height: 36px;
      -webkit-mask: url("https://ecom.nyc3.cdn.digitaloceanspaces.com/storefront/game/user.svg") no-repeat 50% 50%;
      mask: url("https://ecom.nyc3.cdn.digitaloceanspaces.com/storefront/game/user.svg") no-repeat 50% 50%;
      -webkit-mask-size: cover;
      mask-size: cover;
    }

    @media (hover: hover) {
      i:hover:before {
        background-color: $primary;
      }
    }
  }

  .info-bar {
    height: 100px;
    &__item {
      font-weight: var(--font-bold);
      font-size: 90%;
    }
  }

  #content {
    background-image: linear-gradient(rgba-color($white, 0.9), rgba-color($white, 1)), url("https://ecom.nyc3.cdn.digitaloceanspaces.com/storefront/game/bg.png");
  }

  .footer {
    background-image: linear-gradient(rgba-color($light, 0.8), rgba-color($white, 1)), url("https://ecom.nyc3.cdn.digitaloceanspaces.com/storefront/game/bg-simple.svg");
  }
}