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

 :root{
    --primary-color: #4750EA;
 }

 body {
     font-family: Poppins, sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
     min-height: 100vh;
     justify-content: center;
     position: relative;
     font-family: Poppins, sans-serif;
     padding: 20px;
     margin: 0;
  background: radial-gradient(circle at top, #101510, #09091f);
  color: #ffffffa8;
 }
 

 section {
     width: 100%;
     background-color: #1a1a1a;
     /* border-radius: 20px; */
     max-width: 1100px;
     padding: 30px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     margin-top: 20px;
 }

 /* Base lucide icon wrapper */
 .icon-sm,
 .icon-md,
 .icon-lg {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 /* Small icon */
 .icon-sm {
     width: 14px;
     height: 14px;
 }

 .icon-sm svg {
     width: 100%;
     height: 100%;
     stroke-width: 1.45;
 }

 /* Medium icon (default UI size) */
 .icon-md {
     width: 24px;
     height: 24px;
 }

 .icon-md svg {
     width: 100%;
     height: 100%;
     stroke-width: 1.5;
 }

 /* Large icon */
 .icon-lg {
     width: 50px;
     height: 50px;
 }

 .icon-lg svg {
     width: 100%;
     height: 100%;
     stroke-width: 1.45;
 }


 a {
     text-decoration: none;
     color: inherit;
 }

 nav {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    background-color: #1a1a1a;
 }

 nav > div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    align-items: center;
 }

 nav .navlink{
    font-size: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
 }

 nav .navlink.active{
    color: var(--primary-color);
 }

 .crypto-card {
     max-width: 1200px;
     width: 100%;
     margin: 40px auto;
     /* padding: 0 20px; */
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* background: #000; */
 }

 .crypto-header {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .crypto-balance-price {
     display: flex;
     gap: 5px;
     font-size: 0.7rem;
     align-items: center;
     justify-content: center;
 }

 .crypto-image {
     width: 50px;
     border-radius: 1000px;
 }

 .negative {
     color: red;
     font-size: 0.6rem;
 }

 .positive {
     color: green;
     font-size: 0.6rem;
 }

 .loader {
     border: 4px solid #eee;
     border-top: 4px solid #3498db;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
     margin: 40px auto;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .menu {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     justify-content: center;
     align-items: center;
     width: 100%;
     column-gap: 20px;
     row-gap: 50px;
     padding: 30px 0 20px 0;
 }

 .menu .menu-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .menu .menu-item div {
     background-color: #222;
     padding: 10px;
     border-radius: 1100px;
 }

 .menu .menu-item p {
     font-size: 0.75rem;
 }

 .loader.hidden {
     display: none;
 }

 .charts-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 10px;
     width: 100%;
     margin: 40px auto;
 }

 .chart-card {
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     position: relative;
     max-height: 190px;
     /* max-width: 340px; */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     overflow: hidden;
 }

 .chart-card#btcCard {
     background: linear-gradient(135deg, rgba(247, 147, 26, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(247, 147, 26, 0.3);
 }

 .chart-card#ethCard {
     background: linear-gradient(135deg, rgba(98, 126, 234, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(98, 126, 234, 0.3);
 }

 .chart-card#ltcCard {
     background: linear-gradient(135deg, rgba(52, 93, 157, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(52, 93, 157, 0.3);
 }

 .chart-content {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     /* gap: 6px; */
 }

 .chart-info {
     padding: 15px 24px 0 24px;
     /* color: white; */
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     text-align: center;
 }

 .coin-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 16px;
 }

 .coin-header div {
     display: flex;
     align-items: start;
     justify-self: start;
     flex-direction: column;
     gap: -5px;
 }

 .coin-icon {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .coin-header h4 {
     font-size: 0.75rem;
     margin: 0;
 }

 .coin-header p {
     font-size: 0.55rem;
     opacity: 0.8;
     margin: 0;
 }

 .price-info {
     display: flex;
     flex-direction: column;
     gap: 4px;
     align-items: end;
 }

 .price-info .price {
     font-size: 0.65rem;
     font-weight: 700;
     margin: 0;
 }

 .price-info .change {
     font-size: 0.5rem;
     margin: 0;
     opacity: 0.9;
 }

 .card-chart {
     width: 100%;
     max-height: 100px;
 }

 .chart-loader {
     border: 4px solid #f3f3f3;
     border-top: 4px solid #3498db;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .chart-loader.hidden {
     display: none;
 }

 .tokens-container {
     width: 100%;
     margin: 40px auto;
     padding: 0 20px;
 }

 .token-label {
     /* padding: 0 20px; */
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.7rem;
     transform: translateY(20px);
 }

 @media (max-width: 1024px) {
     .charts-grid {
         grid-template-columns: 1fr 1fr;
     }

    }
    
    @media (max-width: 768px) {
     .menu {
         grid-template-columns: 1fr 1fr 1fr;
     }
     .charts-grid {
         grid-template-columns: 1fr;
     }

     .chart-content {
         flex-direction: column;
     }

     .card-chart {
         max-width: 100%;
     }
 }