/* ==========================================
   VAULT MARKETPLACE
========================================== */


@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body{

    font-family:'Outfit',sans-serif;

    background:#111318;

    color:#F4F4F4;

    overflow-x:hidden;

}



a{

    text-decoration:none;

}



img{

    max-width:100%;

    display:block;

}





/* ==========================================
   BACKGROUND
========================================== */


.background-glow{

    position:fixed;

    width:650px;

    height:650px;

    right:-250px;

    top:100px;

    background:#D9A441;

    opacity:.12;

    filter:blur(180px);

    border-radius:50%;

    z-index:-1;

}







/* ==========================================
   CONTAINER
========================================== */


.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}







/* ==========================================
   NAVBAR
========================================== */


header{

    height:90px;

    background:#111318;

    border-bottom:1px solid #20242C;

}



nav{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img{

    height:58px;

}






nav ul{

    display:flex;

    gap:45px;

    list-style:none;

}



nav ul a{

    color:#B6BEC8;

    font-weight:500;

    transition:.25s;

}



nav ul a:hover,
nav ul a.active{

    color:white;

}







/* ACCOUNT */


.account{

    display:flex;

    align-items:center;

    gap:12px;

}



.login,
.register,
.nav-profile,
.logout{


    padding:12px 24px;

    border-radius:10px;

    font-weight:600;

}



.login,
.nav-profile,
.logout{

    color:white;

    border:1px solid #313741;

}



.login:hover,
.nav-profile:hover,
.logout:hover{

    border-color:#D9A441;

}



.register{

    background:#D9A441;

    color:#111;

}







/* ==========================================
   CONTENT
========================================== */


.market-container{


    width:90%;

    max-width:1300px;

    margin:auto;

    padding:70px 0;


}



.hero-title{


    margin-bottom:60px;


}



.hero-title h1{


    font-size:64px;

    font-weight:800;

}



.hero-title p{


    margin-top:20px;

    color:#9CA3AF;

    font-size:19px;

}







section{


    margin-bottom:80px;

}



section h2{


    font-size:32px;

    margin-bottom:30px;

}







/* ==========================================
   ITEM GRID
========================================== */


.market-grid{


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}







/* ==========================================
   MARKET CARDS
========================================== */


.market-card{


    background:#161b22;


    border:1px solid #30363d;


    border-radius:20px;


    padding:22px;


    transition:.25s;


}



.market-card:hover{


    transform:translateY(-5px);


    border-color:#D9A441;


}





.market-card img{


    width:100%;


    height:220px;


    object-fit:cover;


    border-radius:15px;


    margin-bottom:20px;


}





.market-card h3{


    font-size:22px;


    margin-bottom:12px;


}





.market-card p{


    color:#9CA3AF;


    margin:15px 0;


}





.market-card strong{


    display:block;


    color:#D9A441;


    font-size:18px;


    margin:15px 0;


}







/* ==========================================
   BUTTONS
========================================== */


.market-card button{


    width:100%;


    padding:14px;


    border:none;


    border-radius:12px;


    background:#D9A441;


    color:#111;


    font-weight:700;


    cursor:pointer;


    transition:.25s;


}



.market-card button:hover{


    transform:translateY(-2px);


    box-shadow:0 10px 25px rgba(217,164,65,.3);


}







/* ==========================================
   RARITY
========================================== */


.rarity{


    display:inline-block;


    padding:6px 15px;


    border-radius:50px;


    font-size:12px;


    font-weight:700;


}



.common{


    background:#30363d;

    color:#c9d1d9;


}



.rare{


    background:rgba(59,130,246,.15);

    color:#58a6ff;


}



.epic{


    background:rgba(168,85,247,.15);

    color:#c084fc;


}



.legendary{


    background:rgba(217,164,65,.15);

    color:#D9A441;


}



.mythic{


    background:rgba(248,81,73,.15);

    color:#ff7b72;


}







/* ==========================================
   COINS
========================================== */


.coin-grid{


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;


}



.coin-card{


    background:#161b22;


    border:1px solid #30363d;


    border-radius:20px;


    padding:35px;


    text-align:center;


    transition:.25s;


}



.coin-card:hover{


    border-color:#D9A441;


    transform:translateY(-5px);


}



.coin-card h3{


    font-size:28px;


}



.coin-card p{


    color:#D9A441;


    font-size:24px;


    font-weight:700;


    margin:20px 0;


}



.coin-card button{


    width:100%;


    padding:14px;


    background:#D9A441;


    border:none;


    border-radius:12px;


    font-weight:700;


    cursor:pointer;


}







/* ==========================================
   MOBILE
========================================== */


@media(max-width:1000px){


    nav ul{

        display:none;

    }


    .market-grid,
    .coin-grid{


        grid-template-columns:repeat(2,1fr);


    }



}





@media(max-width:600px){


    .market-grid,
    .coin-grid{


        grid-template-columns:1fr;


    }



    .hero-title h1{


        font-size:42px;


    }



}