body{background: #060c21;}
    .content{height: 90%; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center;}
    .yazı2{font-size: 18px; color: #F2F2F2;}
    .media{width: 50px; width: 50px; border-radius: 50%; position: absolute; right: 5px; top:3px ;  }
    .header{display: flex; justify-content: center; flex-wrap: wrap; background-image: linear-gradient(135deg, #686D76, #6565656f,#686D76); color: #F2F2F2; min-width: 300px; font-size: 18px; font-weight: bolder; padding: 20px;}
    .marka{display: flex; flex: 1 1 250px; justify-content: center; align-items: center; min-width: 300px;}
    .menu{display: flex; flex: 2 2 300px;  justify-content: center; align-items: center; min-width: 300px; column-gap: 15px;}
    .menu li {list-style: none; margin-left: 10px; }
    .menu li a {text-decoration: none; font-size:larger ; color: #F2F2F2;}
    .footer{background-image: linear-gradient(135deg, #686D76, #6565656f,#686D76); font-weight: bolder; padding: 30px; display: flex; justify-content: space-around;flex-wrap: wrap; gap:10px; margin:0px 50px; border-radius: 7px;
      position: relative;
      z-index: 2;}
    .footerMenu{padding: 10px; color:#F2F2F2; }
    .footerMenu li {list-style: none;padding: 8px; color:#F2F2F2; }
    .footerMenu li a {text-decoration: none;color:#F2F2F2; }
    .footerBox{flex:1 1 40%; min-width: 300px; max-width: 300px; color:#F2F2F2; }
    .footerBox h2{border-bottom: 1px solid #F2F2F2;}
.conti{height: 90%; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center;}
   
      .box{
        border-radius: 5px; margin: 5px; padding: 20px; position: relative; max-width: 40%; min-width: 250px; color: #fff; position: relative; margin: 10px; background: #060c21; box-sizing: border-box; border-radius: 5px; transition: 0.5s all linear;}
      .box::before{z-index: -1;}
      .box::after{z-index: -2; filter: blur(10px);}
      .box::before,
      .box::after{content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: #fff; background: linear-gradient(0deg, #2196f3, #060c21, #F00000); border-radius: 5px;}
      .text{font-family: sans-serif;
       
        z-index: 2;}

      

      .box2{
        border-radius: 5px; margin: 5px; padding: 10px; position: relative; max-width: 90%; min-width: 250px; color: #fff; position: relative; margin: 10px; background: #060c21; box-sizing: border-box; border-radius: 5px; transition: 0.5s all linear;}
      .box2::before{z-index: -1;}
      .box2::after{z-index: -2; filter: blur(10px);}
      .box2::before,
      .box2::after{content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: #fff; background: linear-gradient(0deg, #2196f3, #060c21, #F00000); border-radius: 5px;}
      .text{font-family: sans-serif;
      
        z-index: 2;}
      
      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
          "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
          sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: rgb(22, 20, 24);
        color: #eee;
        user-select: none;
      }
      
      code {
        font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
          monospace;
          position: relative;
    z-index: 2;
      }
      
      .nft{
        user-select:none;
        max-width: 300px;
        margin: 5rem auto;
        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;
        position: relative;
    z-index: 2;
        hr{
          width: 100%;
          border: none;
          border-bottom: 1px solid #88888855;
          margin-top: 0;
          position: relative;
    z-index: 2;
        }
        ins{
          text-decoration: none;
        }
        .main{
          display: flex;
          flex-direction: column;
          width: 90%;
          padding: 1rem;
          position: relative;
    z-index: 2;

          .tokenImage{
            border-radius: .5rem;
            max-width: 100%;
            height: 250px;
            object-fit: cover;
          }
          .description{
            margin: .5rem 0;
            color: #a89ec9;
          }
          .tokenInfo{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .price{
              display: flex;
              align-items: center;
              color: #ee83e5;
              font-weight: 700;
              ins{
                margin-left: -.3rem;
                margin-right: .5rem;
              }
            }
            .duration{
              display: flex;
              align-items: center;
              color: #a89ec9;
              margin-right: .2rem;
              ins{
                margin: .5rem;
                margin-bottom: .4rem;
              }
            }
          }
          .creator{
            display: flex;
            align-items: center;
            margin-top: .2rem;
            margin-bottom: -.3rem;
            ins{
              color: #a89ec9;
              text-decoration: none;
            }
            .wrapper{
              display: flex;
              align-items: center;
              border: 1px solid #ffffff22;
              padding: .3rem;
              margin: 0;
              margin-right: .5rem;
              border-radius: 100%;
              box-shadow: inset 0 0 0 4px #000000aa;
              img{
                border-radius: 100%;
                border: 1px solid #ffffff22;
                width: 2rem;
                height: 2rem;
                object-fit: cover;
                margin: 0;
              }
            }
          }
        }
        ::before{
          position: fixed;
          content: "";
          box-shadow: 0 0 100px 40px #ffffff08;
          top: -10%;
          left: -100%;
          transform: rotate(-45deg);
          height: 60rem;
          transition: .7s all;
        }
        &:hover{
          border: 1px solid #ffffff44;
          box-shadow: 0 7px 50px 10px #000000aa;
          transform: scale(1.015);
          filter: brightness(1.3);
          ::before{
            filter: brightness(.5);
            top: -100%;
            left: 200%;
          }
        }
      }
      
      .bg{
     
    z-index: 1;
        position: fixed;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 65%);
        h1{
          font-size: 20rem;
          filter: opacity(0.5);
        }
      }