body {
  margin: 0;
  font-family: "Noto Serif Display", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(22, 20, 24);
  color: #eee;
  user-select: none;
}

code {
  font-family: "Noto Serif Display", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #ffffff;
}

.box {
  color: #ffffff;
  padding: 20px;
  border: 2px solid #333;
  border-radius: 10px;
  max-width: 80%;
  width: 300px;
  position: sticky;
  top: 80%;
  transform: translateY(-50%);
  background-color: #4b4b4b;
  z-index: 1000;
}

select {
  color: #ffffff;
  width: 100%;
  padding: 10px;
  border: 1px solid #5a5959;
  border-radius: 5px;
  font-size: 16px;
  outline: none;
  background-color: #4b4950;
}

.bg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg h1  {
  font-size: 20vw;
  filter: opacity(0.5);
 
}
.bg h6{
  font-size: 3vw;
  filter: opacity(0.5);
}
.nft-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
}

.nft {
  user-select: none;
  width: 100%;
  max-width: 300px;
  margin: 1rem;
  border: 1px solid #ffffff22;
  background-color: #282c34;
  background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%);
  box-shadow: 0 7px 20px 5px #00000088;
  border-radius: .7rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
  transition: .5s all;
}

.nft .main {
  display: flex;
  flex-direction: column;
  width: 90%;
  padding: 1rem;
}

.nft .main .tokenImage {
  border-radius: .5rem;
  max-width: 100%;
  height: 250px;
  object-fit: cover;
}

.nft .main .description {
  margin: .5rem 0;
  color: #a89ec9;
}

.nft .main .tokenInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nft .main .tokenInfo .price {
  display: flex;
  align-items: center;
  color: #ee83e5;
  font-weight: 700;
}

.nft .main .tokenInfo .price ins {
  margin-left: -.3rem;
  margin-right: .5rem;
}

.nft .main .tokenInfo .duration {
  display: flex;
  align-items: center;
  color: #a89ec9;
  margin-right: .2rem;
}

.nft .main .tokenInfo .duration ins {
  margin: .5rem;
  margin-bottom: .4rem;
}

.nft:hover {
  border: 1px solid #ffffff44;
  box-shadow: 0 7px 50px 10px #000000aa;
  transform: scale(1.015);
  filter: brightness(1.3);
}

.nft:hover::before {
  filter: brightness(.5);
  top: -100%;
  left: 200%;
}

.nft::before {
  position: fixed;
  content: "";
  box-shadow: 0 0 100px 40px #ffffff08;
  top: -10%;
  left: -100%;
  transform: rotate(-45deg);
  height: 60rem;
  transition: .7s all;
}

@media (min-width: 600px) {
  .nft-container {
    gap: 1.5rem;
  }

  .nft {
    flex: 0 0 calc(50% - 1rem); /* Two items per row */
  }
}

@media (min-width: 900px) {
  .nft {
    flex: 0 0 calc(25% - 1rem); /* Four items per row */
  }
}
.nft {
  cursor: pointer;
  margin-bottom: 20px;
  /* Add any other styles you need */
}
.button {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #00000036;
  color: #fff;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
  cursor: pointer;
}
.button:hover {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #ffd90036;
  color: #fff;
  border: 1px solid rgb(255, 255, 255);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

  .content-container {
    display: flex;
    align-items: center;
  }

  .image-container {
    flex: 1;
    margin-right: 20px; /* Adjust margin as needed */
  }

  .text-container {
    flex: 1;
  }

  .button-container {
    display: block;
    margin-top: 10px; /* Adjust margin as needed */
  }
  .nftnew-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
  }
  
  .nftnew {
    user-select: none;
    width: 100%;
    max-width: 300px;
    margin: 1rem;
    border: 1px solid #ffffff22;
    background-color: #282c34;
    background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%);
    box-shadow: 0 7px 20px 5px #00000088;
    border-radius: .7rem;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow: hidden;
    transition: .5s all;
  }
  
  .nftnew .main {
    display: flex;
    flex-direction: column;
    width: 90%;
    padding: 1rem;
  }
  .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .button-container button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    backdrop-filter: blur(5px); /* Blur effect */
  }

  .button-small {
    background-color: rgba(51, 51, 51, 0.8); /* Semi-transparent background */
    flex: 1 1 100px; /* Flex-grow, flex-shrink, flex-basis */
    font-family: "Noto Serif Display", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  }

  .button-long {
    font-family: "Noto Serif Display", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings: "wdth" 100;
    background-color: rgba(112, 126, 114, 0.8); /* Semi-transparent background */
    flex: 2 1 200px; /* Flex-grow, flex-shrink, flex-basis */
  }

  @media (max-width: 600px) {
    .button-container {
      flex-direction: column;
    }

    .button-container button {
      width: 100%;
    }
  }
  .social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
.social-links a {
    text-decoration: none;
}
.social-links img {
    width: 40px;
    height: 40px;
}