/* -------------------- */
/* RESET & FOUNDATION  */
/* -------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 🔑 Entire site scales from here */
  font-size: clamp(14px, 1.2vw, 18px);
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: rgba(8, 19, 42, 1);
  color: #222;
  line-height: 1.6;
}

/* -------------------- */
/* NAVIGATION           */
/* -------------------- */

.menu {
  display: flex;
  width: 100%;
  background: rgba(8, 19, 42, 1);
}

.menu-btn {
  flex: 1 1 min(160px, 25%);
  padding: clamp(0.6rem, 2vw, 1rem);
  font-size: clamp(0.5rem, 2vw, 1rem);
  border: none ;
  background: rgba(0,0,0,0) ;
  color: white;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

@media (hover: hover) {
  .menu-btn:hover {
    background: #0056b3;
  }
}

/* -------------------- */
/* MAIN CONTENT         */
/* -------------------- */

.container {
  max-width: 75rem;
  width: 80%;
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 3rem);
}

.cardd {
  background: rgba(8, 19, 42, 1);
  color: rgba(8, 19, 42, 1);
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  text-align: center;
}

/* -------------------- */
/* TYPOGRAPHY           */
/* -------------------- */

h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

p {
  max-width: 65ch;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

/* -------------------- */
/* IMAGE                */
/* -------------------- */

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: clamp(0.5rem, 1vw, 1rem);
}

/* ⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡⚡*/


.king {
  font-size: 250%;
  color: green;
}
.king_asset {
border: 3px solid #39ff01;
color:  rgba(8, 19, 42, 1) ;
padding: 1%;

font-size: 150% ;
border-radius: 250px;
box-shadow:0 0 2vh rgba(57,255,1,0.2),
             0 0 4vh rgba(57,255,1,0.2),
             0 0 7vh rgba(57,255,1,0.2);     
             
  
}


.pawn {
  font-size: 250%;
  color: red;
}
.pawn_asset {
border: 3px solid rgba(255, 50, 36, 1);
color:  rgba(8, 19, 42, 1) ;
padding: 1%;

font-size: 140% ;
border-radius: 250px;
box-shadow:0 0 2vh rgba(255,57,1,0.2),
             0 0 4vh rgba(255,57,1,0.2),
             0 0 7vh rgba(255,57,1,0.2);     
             
  
}



.container{
margin-top:20px;
}

.card{
background:#2c2c3c;
margin-bottom:20px;
border:none;
}

.coin-img{
width:30px;
height:30px;
}

.gain{
color:#4caf50;
font-weight:bold;
}

.loss{
color:#f44336;
font-weight:bold;
}

h3{
margin-top:25px;
margin-bottom:15px;
}

  .scrollable-div {
    
   /* padding: 40px;
      width: 400px;
      color: white;
      font-size: 18px;
      border-radius: 15px;
*/
    background: rgba(255, 255, 255, 0);
    border: 0.8px solid rgba(255, 255, 255, 0);
    
    width: 100%;          
    max-height: 92vh;          
    padding: 10px;
    text-align: center;
    overflow-y: auto;          

  
  }
  .trending {
    background: rgba(26, 36, 72, 1);
  }




.market-row{
  display:flex;
  gap:20px;
}

.kingg, .pawnn{
  flex:1;
  padding:20px;
  border-radius:10px;
  background:#111;
  color:white;
}

.kingg{
  border:2px solid gold;
}

.pawnn{
  border:2px solid crimson;
}