/* container early */
.early {
  width: 100%;
  background: url("../../assetsBlockchain/homepage/home-hero-gradient.jpg")
    no-repeat center bottom;
  background-size: cover;
  padding-top: 5rem;
}
.early > div {
  max-width: 62.5rem;
  margin: 0 auto;
  padding: 10.625rem 0px;
}
/* early content */
.early .content {
  max-width: 46.6875rem;
}

.early h1 {
  font-size: 3rem;
  line-height: 3.625rem;
  color: #fff;
  margin-bottom: 1.5rem;
}

.early h3 {
  color: #fff;
  margin-bottom: 2rem;

  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.125rem;
}

.early form {
  display: flex;
  gap: 1rem;

  min-height: 48px;
}

.early form input {
  color: #fff;
  width: 100%;
  max-width: 24.1875rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  padding: 0.75rem 1rem;
  line-height: 1.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: 0.5rem;
}

.early form input::placeholder {
  color: #fff;
  opacity: 1;
}

.early form button.signup {
  background: rgb(236, 245, 254);
  color: rgb(12, 108, 242);
  line-height: 1.25rem;
  font-size: 0.875rem;
  padding: 0.75rem 1.375rem;
  margin: 0;

  cursor: pointer;
  transition: 0.2s;
}

.early form button.signup:hover {
  background-color: rgb(223, 227, 235);
}

.big-container-coin {
  max-width: 62.5rem;
  margin: 0 auto;
}
/* container coin */
.container-coin {
  max-width: 62.5rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: -4.4rem;
  margin-bottom: 1.25rem;
  gap: 1.5rem;
}

.coin {
  padding: 1.25rem;
  background-color: #fff;
  flex: 1;
  border-radius: 0.5rem;
  display: block;

  box-shadow: rgba(103, 113, 133, 0.2) 0.75rem 1.5rem 4rem 0rem;
  transition: background-image 0.6s ease 0s;
}

.coin:hover {
  background: linear-gradient(rgb(255, 255, 255), rgb(240, 242, 247));
}

.coin > .coin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.coin-menu {
  display: flex;
  align-items: flex-start;
}

.coin-name {
  margin-top: 13px;
  margin-bottom: 0.25rem;
}

.coin-name > span {
  color: rgb(103, 113, 133);
  margin-left: 0.5rem;
}

.coin-menu > button {
  background-color: rgb(239, 236, 254);
  border-radius: 0.25rem;
  border: none;
  color: rgb(83, 34, 229);
  cursor: pointer;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: background-color 0.3s ease 0s;
}

.coin-menu > button:hover {
  background-color: rgb(222, 216, 253);
}

.coin-menu > button + button {
  background-color: rgb(230, 250, 236);
  color: rgb(0, 153, 76);
  margin-left: 8px;
}

.coin-menu > button + button:hover {
  background-color: rgb(209, 240, 219);
}
/* coin price */
.coin-price {
  margin-top: 0.5rem;
}

.coin-price > span {
  margin-left: 0.5rem;
}
.more {
  color: rgb(0, 178, 107);
}
.reduce {
  color: rgb(255, 68, 58);
}

.more-prices {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  transition: 0.2s;
}
.more-prices:hover {
  color: rgb(12, 108, 242);
}

.more-prices > svg {
  margin-left: 0.5rem;
}

/* responsive mobile */
@media (max-width: 426px) {
  .early .content {
    padding: 0px 1rem;
  }

  .early > div {
    padding: 7.5rem 0px 5rem;
  }

  .early h1 {
    font-size: 1.5rem;
    line-height: 1.8125rem;
  }
  .early h3 {
    font-size: 1.0625rem;
    line-height: 1.5rem;
  }

  .early form input {
    max-height: 44px;
  }

  .early form button.signup {
    padding: 0.625rem 0.875rem;
    max-height: 44px;
    white-space: nowrap;
  }

  .container-coin {
    max-width: 100%;
    padding: 0px 16px 76px;

    overflow-x: auto;
    margin-top: -2.7rem;
    margin-bottom: 0;
  }

  .coin {
    min-width: 252px;
  }
}