/* This is a custom CSS file for the website. */

.text-background-pata-rounded-corner {
            background-color: rgb(210, 210, 210); /* Background color */
            color: black;              /* Text color */
            padding: 5px;             /* Space around text */
            display: inline-block;     /* Prevents background from spanning full width */
            border-radius: 5px;        /* Rounded corners (optional) */
    }



a.active {
        background-color: white; /* Background color */
        color: black;
        padding: 5px;             /* Space around text */
        display: inline-block;
        border-radius: 5px;        /* Rounded corners (optional) */
}

a.active:hover {
        color: black!important;
        background-color: #ffa500; 
        padding: 5px;
        display: inline-block;
        border-radius: 5px; 
}


/* General styles for the body (lines 1-20) */

body {
  /* Base dark gradient background */
  background:
    radial-gradient(ellipse at 70% 30%, #223047 0%, transparent 60%),
    radial-gradient(ellipse at 30% 80%, #232d37 0%, transparent 80%),
    linear-gradient(115deg, #14171f 0%, #191c24 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Overlay SVG circuit/network pattern */
body::before {
  content: '';
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  opacity: 0.15;
  background: url('data:image/svg+xml;utf8,<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"><g stroke="cyan" stroke-width="1.5" opacity="0.4"><polyline points="80,200 250,300 350,150 600,400 800,100" fill="none"/><polyline points="300,700 500,800 650,600 900,950" fill="none"/><polyline points="100,900 400,850 700,950" fill="none"/><polyline points="100,350 180,520 300,480" fill="none"/></g><g fill="white" opacity="0.12"><circle cx="80" cy="200" r="8"/><circle cx="350" cy="150" r="7"/><circle cx="800" cy="100" r="10"/><circle cx="500" cy="800" r="6"/><circle cx="650" cy="600" r="8"/><circle cx="900" cy="950" r="7"/></g><g stroke="lime" stroke-width="1" opacity="0.3"><polyline points="900,100 100,700" fill="none"/></g></svg>');
  background-repeat: repeat;
  background-size: 900px 900px;
}

/* Optional: Subtle animated signals */
@keyframes networkPulse {
  0%, 100% { box-shadow: 0 0 8px 2px #29ffe4aa, 0 0 0 #fff0; }
  50%      { box-shadow: 0 0 18px 8px #29ffe4, 0 0 12px 2px #3ec7fa33; }
}

.signal-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #32fff6;
  left: 60vw; top: 45vh;
  opacity: 0.18;
  animation: networkPulse 3s infinite;
  z-index: 1;
}

.signal-dot:nth-child(2) {
  left: 30vw; top: 72vh; animation-delay: 1.5s;
}
.signal-dot:nth-child(3) {
  left: 80vw; top: 80vh; animation-delay: 2s;
}