:root {
  --font-base: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-primary: "Inter", "Roboto", "Open Sans", Helvetica, Arial, sans-serif;
  --font-monospace: "Courier New", Courier, monospace;
  --color-text: #333;
  --color-bg: #f4f4f4;
  --color-highlight-max: yellow;
  --color-highlight-min: pink;
  --color-safe: #5aea98;
  --color-primary: #3498db;
  --color-accent: #f39c12;
  --color-error: #e74c3c;
  --color-success: #2ecc71;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 600;
}

body {
  font-family: var(--font-base);
   font-family: var(--font-primary);
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

h1, h2, h3 {
  font-weight: var(--font-weight-bold);
}

p, span {
  font-weight: var(--font-weight-regular);
}


.wallet {
  display: flex;
  align-items: center;
  font-family: monospace;
  font-size: 1rem;
}

.wallet .balance {
  font-weight: bold;
  margin-right: 10px;
}

.wallet .balance--usd {
  font-size: 0.85rem;
  color: var(--color-text);
}

.max .balance {
  background-color: var(--color-highlight-max);
}

.min .balance {
  background-color: var(--color-highlight-min);
}

.code {
  font-family: var(--font-monospace);
  background-color: #f4f4f4;
  padding: 5px;
  border-radius: 3px;
}


.button-primary {
  background-color: var(--color-primary);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button-primary:hover {
  background-color: darken(var(--color-primary), 10%);
}

.button-primary {
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.button-primary:hover {
  background: linear-gradient(to right, var(--color-accent), var(--color-primary));
  transform: scale(1.05); /* Slight zoom effect */
}

header {
  /* background: linear-gradient(to bottom, var(--color-primary), var(--color-bg));  */
  color: var(--color-text);
  /* padding: var(--spacing-lg); */
  /* text-align: center; */
}

a {
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-accent);
}

button, .container, .wallet {
  transition: all 0.3s ease;
}


.container {
  /* padding: var(--spacing-md); */
}

.grid {
  gap: var(--spacing-sm);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-accent);
}

 

button:hover {
  background-color: var(--color-accent);
  transform: scale(1.05);
}

button {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
  background-color: var(--color-accent);
  transform: scale(1.05);
}

.card {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}


@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #1c1c1c;
        --color-text: #f4f4f4;
        --color-primary: #2980b9;
        --color-accent: #e67e22;
    }
}


/* ===========================
   CSS Variables and Defaults
=========================== */
:root {
  /* Font Families */
  --font-base: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-primary: "Inter", "Roboto", "Open Sans", Helvetica, Arial, sans-serif;
  --font-monospace: "Courier New", Courier, monospace;

  /* Colors */
  --color-text: #333;
  --color-bg: #f4f4f4;
  --color-highlight-max: yellow;
  --color-highlight-min: pink;
  --color-safe: #5aea98;
  --color-primary: #3498db;
  --color-accent: #f39c12;
  --color-error: #e74c3c;
  --color-success: #2ecc71;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 600;
}

/* Dark Mode */
/* @media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1c1c1c;
    --color-text: #f4f4f4;
    --color-primary: #2980b9;
    --color-accent: #e67e22;
  }
} */

/* ===========================
   Base Styles
=========================== */
body {
  font-family: var(--font-primary);
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: var(--spacing-md);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-accent);
}

.container {
  /* padding: var(--spacing-md); */
}

.grid {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ===========================
   Typography
=========================== */
h1, h2, h3 {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.0025em;
  /* text-transform: uppercase;*/ /* Optional: for a modern look */ 
}

p, span {
  font-weight: var(--font-weight-regular);
}

#total-usd-value p {
  line-height: 1.6;
}

#total-usd-value p span {
  font-weight: var(--font-weight-bold);
}

/* ===========================
   Wallet Styles
=========================== */
.wallet {
  display: flex;
  align-items: center;
  font-family: var(--font-monospace);
  font-size: 1rem;
}

.wallet .balance {
  font-weight: bold;
  margin-right: var(--spacing-sm);
}

.wallet .balance--usd {
  font-size: 0.85rem;
  color: var(--color-text);
}

.max .balance {
  background-color: var(--color-highlight-max);
}

.min .balance {
  background-color: var(--color-highlight-min);
}

/* ===========================
   Buttons
=========================== */
.button-primary {
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.button-primary:hover {
  background: linear-gradient(to right, var(--color-accent), var(--color-primary));
  transform: scale(1.05); /* Slight zoom effect */
}

button {
  /* background-color: var(--color-primary); */
  /* color: white; */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
  /* background-color: var(--color-accent); */
  background-color: var(--color-primary);
  transform: scale(1.05);
}

/* ===========================
   Cards
=========================== */
.card {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

/* ===========================
   Highlighted Sections
=========================== */
header {
  /* background: linear-gradient(to bottom, var(--color-primary), var(--color-bg)); */
  color: var(--color-text);
  /* padding: var(--spacing-lg); */
  /* text-align: center; */
}

/* ===========================
   Transitions
=========================== */
button, .container, .wallet {
  transition: all 0.3s ease;
}


/* ===========================
   Grids
=========================== */

/* Base Grid Styles */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ensures equal-width columns */
    gap: 8px; /* Adjust the gap between grid items */
}

/* Grid Items */
.grid-item {
    background-color: var(--color-bg); /* Optional: for better visualization */
    padding: 16px; /* Add consistent spacing inside grid items */
    /*text-align: center; *//* Center-align text */
    border: 1px solid #ddd; /* Optional: for visual distinction */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

.crypto.row .inner-container .grid-item{
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center; */
  height:auto;
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    .grid-4 {
        /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

  .inner-container.column.grid .grid-item {
    padding: 8px; /* Adjust padding for smaller screens */
    height: auto; /* Allow items to adjust their height */
    /* height:122px; */
  }

  .crypto.row .inner-container .grid-item{
    height: auto; /* Allow items to adjust their height */
    height:122px;
  }
  
}

@media (max-width: 480px) {
    .grid-4 {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
}