@charset "UTF-8";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Outfit", sans-serif;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: #0d192c;
}

/* Card */
.card {
  width: 93%;
  max-width: 350px;
  background-color: #15263f;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 15px;
}

/* NFT image */
.nft-image-info img {
  width: 100%;
  border-radius: 15px;
}
.nft-image-info {
  /* TODO: 怎麼在 hover image 時會出現一個半透明遮罩 + icon？ */
}

/* NFT info */
.nft-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nft-info .title a {
  text-decoration: none;
  font: 600 22px/1.5 "Outfit";
  color: #ffffff;
}
.nft-info .title a:hover {
  color: #00fff8;
}
.nft-info .description {
  font: 300 18px/1.45 "Outfit";
  color: #8bacd9;
}

/* NFT price info */
.nft-price-info {
  display: flex;
  justify-content: space-between;
}
.nft-price-info .price {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 16px/1.25 "Outfit";
  color: #00fff8;
}
.nft-price-info .left-days {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 16px/1.25 "Outfit";
  color: #8bacd9;
}

/* Divider */
.divider {
  height: 1px;
  background-color: #2e405a;
}

/* Author */
.author-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.author-info .image {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 1px solid #ffffff;
}
.author-info .description {
  font: 400 16px/1.25 "Outfit";
  color: #8bacd9;
}
.author-info .description a {
  text-decoration: none;
  color: #ffffff;
  margin-left: 8px;
}
.author-info .description a:hover {
  color: #00fff8;
}

/*# sourceMappingURL=style.css.map */