/*general*/
body {
            font-family: 'Comic Sans MS', sans-serif;
            background-color: black;
            color: white;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            padding-bottom: 60px;
            box-sizing: border-box;
        }
/* Forex table styling */
 .forex-table {
            width: 100%;
            color: ivory;
            border-collapse: collapse;
            margin: 5px 0;
            font-size: 0.8em;
        }

       /* .forex-table th,*/
        .forex-table td {
            padding: 12px;
            text-align: center;
            
        }
        /*.forex-table th{border-top-left-radius: 50px;border-top-right-radius: 50px;}*/
        /* Adjust SVG size for table headers */
 /* .forex-table th svg {*/
 /*   width: 80px;*/
 /*   height: 80px;*/
 /*   cursor: pointer;*/
 /* }*/

  /* Other styles from your octopus CSS remain as is */
  .octopus-head {
    fill: url(#headGradient);
    stroke: #007a99;
    stroke-width: 3;
    filter: url(#headShadow);
    transition: fill 0.5s ease;
  }
  .tentacle {
    fill: url(#tentacleGradient);
    stroke: #00dfff;
    stroke-width: 2;
    filter: url(#tentacleShadow);
    transition: fill 0.5s ease;
  }
  .sucker {
    fill: #00cfffaa;
    stroke: #007a99;
    stroke-width: 1;
    transition: fill 0.5s ease;
  }
  .eye-white {
    fill: #e6f2ff;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
    transition: fill 0.5s ease;
  }
  .eye-pupil {
    fill: #003344;
    transition: fill 0.5s ease;
  }
  .smoke {
    fill: black;
    opacity: 0.6;
    filter: blur(3px);
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
/*end*/
.forex-table td {
            border: none;
            border-radius: 0 12px 12px 12px;
        }

        .green-bg {
            background-color: green;
        }

        .red-bg {
            background-color: red;
        }

        .green-text {
            color: green;
        }

        .red-text {
            color: red;
        }

        .icon-up, .icon-down {
            animation: blink 1s infinite; /* Blinking effect */
        }

       /* .icon-up::before {
            content: '▲';
            color: green;
        }

        .icon-down::before {
            content: '▼';
            color: red;
        }

        .icon-dash::before {
            content: '—';
            color: ivory;
        }*/

        /* Blinking effect */
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .blinking-bg {
            animation: bg-blink 1s infinite; /* Blinking background effect */
        }

        @keyframes bg-blink {
            0%, 100% { background-color: transparent; }
            50% { background-color: rgba(0, 128, 0, 0.5); } /* Green background */
        }

        .red-blink {
            animation: red-bg-blink 1s infinite; /* Blinking red background effect */
        }

        @keyframes red-bg-blink {
            0%, 100% { background-color: transparent; }
            50% { background-color: rgba(255, 0, 0, 0.5); } /* Red background */
        }

        /* Styling for the real-time clock */
        .time-container {
            font-size: 1.2em;
            margin-top: 10px;
        }

        .flex-container {
            display: flex;
            justify-content: space-between;
            align-items: center;

            background-color: lightgray;
            padding: 10px;
        }

        .flex-container-ad {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
        }

        .content-60 {
            width: 60%;
            background-color: #1a1a1a;
            border-radius: 5px; /* Added border radius */
        }

        .content-40 {
            width: 40%;
            background-color: #333333;
            padding: 20px;
            border-radius: 5px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .fired-up {
            margin-right: 15px;
        }

        #table-body {
            text-align: center;
        }
/* Flex container styling for larger screens */
.flex-container-ad {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

/* Content sections */
.content-60 {
    width: 60%;
    background-color: #1a1a1a;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
}

.content-40 {
    width: 40%;
    background-color: #333333;
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Responsive styling for smaller devices */
@media (max-width: 768px) {
    .flex-container-ad {
        flex-direction: column; /* Stack sections vertically */
        gap: 10px; /* Reduce gap between sections */
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .content-60, .content-40 {
        width: 100%; /* Make both sections full width */
        margin: 0 auto; /* Centre the content */
    }

    .content-60 h1 {
        font-size: 1.5rem; /* Adjust font size for headings */
        text-align: center; /* Centre-align text */
    }

    .content-60 p {
        font-size: 0.9rem; /* Adjust font size for text */
        text-align: justify;
    }
}
/*frown with the brown*/
    .futuristic-container {
      background: linear-gradient(145deg, #111827, #1f2937);
      border: 1px solid #0ff;
      box-shadow: 0 0 12px #0ff;
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .dashboard-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      gap: 1rem;
      font-size: 1rem;
    }

    .token-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.25rem;
    }

    .token-title {
      font-size: 1.5rem;
      font-weight: bold;
    }

    .futuristic-time {
      font-size: 1.2rem;
      color: #39ff14;
      animation: glow 1.5s infinite alternate;
    }

    @keyframes glow {
      from { text-shadow: 0 0 5px #0ff; }
      to { text-shadow: 0 0 15px #0ff; }
    }

    .futuristic-table {
      width: 100%;
      border-collapse: collapse;
    }

    .futuristic-table th, .futuristic-table td {
      padding: 0.75rem;
      text-align: center;
      border-bottom: 1px solid #333;
    }

    .blinking-bg {
      background-color: rgba(0, 255, 0, 0.1);
    }

    .red-blink {
      background-color: rgba(255, 0, 0, 0.1);
    }

    .green-text {
      color: #39ff14;
    }

    .red-text {
      color: #ff3860;
    }

    .neutral {
      color: #999;
    }

    .icon-up::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('https://st2.depositphotos.com/2290789/5522/i/450/depositphotos_55227591-stock-photo-furious-bull.jpg');
    background-size: cover;
    background-position: center;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 50%;
}

.icon-down::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('https://th.bing.com/th/id/OIP.KzZ6DFcgOZPtcr5QDvxKeQHaHa?w=218&h=218&c=7&r=0&o=7&pid=1.7&rm=3');
    background-size: cover;
    background-position: center;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 50%;
}

    .icon-dash::before { content: "➖ "; }

    a {
      color: #0ff;
      text-decoration: underline;
    }


/*table specialism*/
/* Futuristic Table Base */

 /* .forex-table.futuristic-table th,*/
  .forex-table.futuristic-table td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    transition: all 0.3s ease-in-out;
  }

 /* .forex-table.futuristic-table thead {
    background: linear-gradient(90deg, #0ff 0%, #08f 100%);
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 10px rgba(0, 255, 255, 0.3);
  }*/

  /* Row Hover Effect */
  .forex-table.futuristic-table tbody tr {
    transition: all 0.25s ease;
    cursor: pointer;
  }

  .forex-table.futuristic-table tbody tr:hover {
    background: rgba(0, 255, 255, 0.1);
    transform: scale(1.01);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  }

  /* Glowing Text Colors */
  .green-text {
    color: #00ffcc;
    text-shadow: 0 0 5px #00ffcc;
  }

  .red-text {
    color: #ff4488;
    text-shadow: 0 0 5px #ff4488;
  }

  .neutral {
    color: #cccccc;
    text-shadow: 0 0 3px #888888;
  }

  /* Blinking Backgrounds */
  .blinking-bg {
    background-color: rgba(0, 255, 204, 0.08);
    animation: blinkGreen 1s infinite alternate;
  }

  .red-blink {
    background-color: rgba(255, 0, 102, 0.08);
    animation: blinkRed 1s infinite alternate;
  }

  @keyframes blinkGreen {
    from { background-color: rgba(0, 255, 204, 0.05); }
    to { background-color: rgba(0, 255, 204, 0.15); }
  }

  @keyframes blinkRed {
    from { background-color: rgba(255, 0, 102, 0.05); }
    to { background-color: rgba(255, 0, 102, 0.15); }
  }









 /* Optional typewriter flicker effect */
  .value,
  .change {
    transition: color 0.3s ease-in-out;
  }

  .dust-out {
    opacity: 0.3;
    filter: blur(1px);
    transition: all 0.3s ease;
  }   
 /*endiminus*/

/*clock design and congeries*/
   .dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* allows wrap on small screens */
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    gap: 14px;
    font-family: 'Comic Sans MS', sans-serif;
    color: #0ff;
  }

  .dashboard-top > div,
  .dashboard-top > a,
  .dashboard-top > span {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 0.85rem; /* Reduced text size */
  }

  .futuristic-time {
    font-size: 0.85rem; /* Smaller clock */
    padding: 3px 8px;
    border-radius: 6px;
    background-color: #111;
    color: #0ff;
    box-shadow: 0 0 4px #0ff;
    font-family: 'Comic Sans MS', sans-serif;
    letter-spacing: 1px;
     /* Prevent shaking */
  min-width: 80px; /* Enough for any HH:MM:SS */
  text-align: center;
  }

  #location-link {
    color: #0ff;
    text-decoration: none;
    font-size: 0.85rem;
  }

  #location-link:hover {
    color: #ff0;
  }
  
/*end clock design*/

/*dust fill*/
/* Particle Background Container */
.particles-bg {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #000;
  padding: 20px;
  border-radius: 12px;
}

/* Particle Dots (floating light particles) */
.particles-bg::before,
.particles-bg::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle, rgba(0,255,255,0.1) 2px, transparent 2px);
  background-size: 40px 40px;
  animation: move-particles 60s linear infinite;
  z-index: -1;
  opacity: 0.3;
}

.particles-bg::after {
  animation-direction: reverse;
  background-size: 60px 60px;
  opacity: 0.2;
}

/* Particle movement animation */
@keyframes move-particles {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 50%);
  }
}

/* Pulse effect for table rows */
.forex-table tbody tr {
  animation: pulseRow 4s ease-in-out infinite;
  transition: background 0.3s;
}

@keyframes pulseRow {
  0%, 100% {
    background-color: rgba(0, 255, 255, 0.03);
  }
  50% {
    background-color: rgba(0, 255, 255, 0.08);
  }
}

/* Optional: Hover override for pulse rows */
.forex-table tbody tr:hover {
  background-color: rgba(0, 255, 255, 0.15);
  animation: none;
}

/*end of dust fill*/

/*map design*/
 #map-container {
    width: 100%;
    height: 250px;
    margin-top: 20px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(145deg, #0f0f2f, #1f1f3f);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.2),
                0 0 30px rgba(0, 255, 255, 0.3),
                inset 0 0 8px rgba(0, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease-in-out;
  }

  #map-container:hover {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4),
                0 0 60px rgba(0, 255, 255, 0.5),
                inset 0 0 12px rgba(0, 255, 255, 0.25);
    transform: scale(1.01);
  }

  #live-map {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(10%) contrast(1.2) brightness(1.1) saturate(1.4);
    border-radius: 16px;
  }


/* Reveal label on octopus hover */
.octo-container:hover + .octo-label {
  opacity: 1;
}

/* Shake/vibrate the octopus SVG itself on hover */
.octo-container:hover svg {
  animation: vibrate 0.3s infinite alternate;
}

/* ========== SVG Overflow ========== */
svg {
  overflow: visible;
}


#currency-table thead th {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  vertical-align: middle;
}

.octo-container,
.octo-label {
  margin: 0;
  padding: 0;
  line-height: 1;
}