.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


   body, html {
            font-family: Arial, sans-serif;
            margin: 0;
            height: 100%;
            padding: 0;
            overflow: hidden; /* Hide scrollbars */
   }

   body, button, h1, h2, h3, p { /* Targeting all text elements */
    color: white; /* Sets text color to white */
    font-family: Arial, sans-serif; /* Ensures a consistent font across all text */
}

body {
    cursor: none;
    margin: 0;
    padding: 0;
    background: #121212;  /* Dark background for better neon effect visibility *//* Cursor Glow - Non-static, continuously evolving glow */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: hidden; /* Hide horizontal scrollbar */
}



/* Keyframes for fluid, non-repetitive smoke movement */
@keyframes smokeFlow {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
        border-radius: 50%;
    }
    25% {
        transform: translate(-60%, -50%) rotate(-20deg);
        border-radius: 40% 60% 50% 50%;
    }
    50% {
        transform: translate(-40%, -45%) rotate(20deg);
        border-radius: 50% 50% 40% 60%;
    }
    75% {
        transform: translate(-50%, -55%) rotate(10deg);
        border-radius: 60% 40% 60% 40%;
    }
}
    #cursor-glow {
    position: fixed;
    pointer-events: none;
    width: 35px;  /* Smaller size */
    height: 35px;  /* Smaller size */
    background: radial-gradient(circle, rgba(255, 140, 0, 0.8), transparent 70%);
    box-shadow: 0 0 35px 35px rgba(255, 140, 0, 0.1), 0 0 50px 100px rgba(255, 140, 0, 0.05);
    animation: smokeFlow 8s infinite;
    z-index: 9000;
}

/* Additional elements for embers and dynamically changing effects */
.ember {
    background-color: rgba(255, 69, 0, 0.9);
    animation: dropEmber 3s infinite;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    z-index: 5000;
}

.ember2 {
    background-color: rgba(255, 69, 0, 0.9);
    animation: risingEmber 3s infinite trailFade 3s infinite;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    z-index: 5000;
}

.smoke, .ember {
    position: absolute;
    border-radius: 50%;
    
}

.smoke {
    animation: smokeFlow 4s infinite smokeRise 4s infinite;
    width: 120%;
    height: 120%;
    z-index: 5000;
}

@keyframes smokeRise {
    0% { transform: scale(1) translateY(0); opacity: 1; }
    100% { transform: scale(1.5) translateY(-50px); opacity: 0; border-radius: 40% 60% 60% 40%; }
}


.rising-ember {
    animation: trailFade 3s infinite;
    opacity: 0;  /* Start fully transparent */
    z-index: 5000;
}

@keyframes dropEmber {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100px); opacity: 0; }
}

#left-wall, #right-wall, #floor {
    position: fixed;
    background: rgba(0, 0, 0, 0.1); /* Semi-transparent black */
    z-index: 1;  /* Behind the cursor glow */
}

#left-wall {
    left: 0;
    top: 50%;
    width: 50%;
    height: 50%;
    transform: skewY(-10deg);
}

#right-wall {
    right: 0;
    top: 50%;
    width: 50%;
    height: 50%;
    transform: skewY(10deg);
}

#floor {
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 25%;
    background: rgba(0, 0, 0, 0.1);
    transform: perspective(100px) rotateX(45deg);
}



@keyframes atomOrbit {
    0% { transform: translateX(0) rotate(0deg); }
    100% { transform: translateX(50px) rotate(360deg); }
}

@keyframes trailFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.atom {
    position: absolute;
    background-color: rgba(255, 69, 0, 0.9);
    width: 4px;
    height: 4px;
    animation: atomOrbit 10s infinite linear trailFade 3s infinite;
    border-radius: 50%;
    z-index: 5000;
    
}

.atomtrail {
    position: absolute;
    width: 1px; /* Width of the trail */
    height: 1px; /* Height of the trail */
    background-color: rgba(255, 165, 0, 0.8);
    top: 50%; /* Centered vertically */
    left: 5px; /* Starts near the ember */
    border-radius: 1px;
    animation: trailFade 3s infinite;
    z-index: 5000;
}

.embertrail {
    position: absolute;
    width: 1px; /* Width of the trail */
    height: 1px; /* Height of the trail */
    background-color: rgba(255, 165, 0, 0.8);
    top: 50%; /* Centered vertically */
    left: 5px; /* Starts near the ember */
    border-radius: 1px;
    animation: trailFade 3s infinite emberFall 3s infinite;
    z-index: 5000;
}

/* Hide the WalletConnect expand/collapse behavior */
.walletconnect-qrcode__base {
    display: none !important;
}

/* Make sure all wallet options are visible upfront */
.walletconnect-modal__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

    .container {
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 120px;
    display: flex;
    height: calc(100vh - 120px);
    overflow: hidden; /* Prevents any overflow from the container itself */
    }

        #header {
            width: 90%;
            display: flex;
            top: 10px;
            height: 60px;
            
            justify-content: space-between;
            padding-top: 100px;
            padding: 10px 5%;
            position: fixed;
            z-index: 1500;
        }
   .header-left {
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    width: 33%;
   }

   .header-right {
      display: flex;
      gap: 5px;
      justify-content: flex-end; 
      width: 33%;
   }

   .header-center {
      display: flex;
      align-items: center;
      gap: 5px;
      justify-content: center; 
      width: 33%; 
   }
    
  .header-controls {
    justify-content: flex-end;
   }

button {
    padding: 5px 15px; /* Sizing of buttons */
    border: none; /* Remove default border */
    background-color: #007bff; /* Example background color */
    color: white; /* Text color */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}

button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.connect-advisor {
    animation: connectBlink 3s infinite alternate;  
}

.neon-button {
    position: relative;
    border: 2px solid #0F0;  /* Neon green outline */
    color: white;
    background: black;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    text-transform: uppercase;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.75); /* Glow effect */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
     z-index: 3;
}


    .neon-button-before::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); /* Light mesh background */
    animation: creepingEffect 5s linear infinite paused;
        z-index: 4;
}
       

.neon-button:hover, .neon-button:focus {
    background-color: rgba(0, 255, 0, 0.2);  /* Subtle green fill on hover/focus */
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 1); /* Increased glow on hover/focus */
}

.neon-button:active {
    background-color: rgba(0, 255, 0, 0.4); /* Deeper green fill on active/click */
}

       @keyframes creepingEffect {
    from {
        transform: scaleY(0);
        opacity: 1;
    }
    to {
        transform: scaleY(1);
        opacity: 0;
    }
}

    
    @keyframes plasmaGlow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.7), 0 0 25px rgba(0, 255, 0, 0.5), 0 0 35px rgba(0, 255, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 255, 0, 0.9), 0 0 45px rgba(0, 255, 0, 0.7), 0 0 65px rgba(0, 255, 0, 0.5);
    }
}

    @keyframes connectBlink {
    0% { box-shadow: 0 0 5px rgba(0, 255, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.75); }
    50% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 45px rgba(0, 255, 0, 1); }
    100% { box-shadow: 0 0 20px red, 0 0 50px red; }
}



   .dropdown {
    position: relative;
    display: inline-block;
}

.wallet-and-settings {
    display: flex;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

   #wallet-info {
    margin-right: 10px;  /* Adds spacing between the wallet info and the cog icon */
    overflow: hidden;   /* Ensures the text does not overflow */
    white-space: nowrap; /* Keeps the wallet address on one line */
    text-overflow: ellipsis; /* Adds an ellipsis if the text overflows */
}

.dropdown-content select {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border: none;
    width: 100%;
    box-sizing: border-box; /* Ensures the select fits within the dropdown */
}

.dropdown:hover .dropdown-content {
    display: block;
}

.fa-cog {
    font-size: 24px;
}

        #header h1 {
            margin: 0;
            padding: 0;
            font-size: 24px;
            display: inline-block;
        }

        #header img {
           display: inline-block;
            height: 100px;
            width: 100px;
            margin-right: 20px;
        }

.content-area {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    overflow-y: auto;
}

        #center-content h2 {
            text-align: center;
        }

        #center-content {
            position: relative;
            flex-grow: 1;
            top: 70px;
            width: calc(100% - 440px);
            margin: auto;
            padding: 20px;
            overflow-y: auto; /* Content scrollable */
            overflow-y: hidden; /* Content scrollable */
            justify-content: center;
            z-index: 2;
}

         .left-box {
            background: black;
            padding: 10px;
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.75);
            margin-bottom: 10px;
            border: 1px solid #0F0;
            color: #0F0;
        }
    
        #sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 200px;
            margin-right: 100px;
            text-align: center;
            height: calc(100% - 70px); /* Subtract the header height from the total height */
            overflow-y: auto; /* Makes sidebar scrollable independently */
            background: black;
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.75);
            border: 1px solid #0F0;
            z-index: 2;
        }

        #additional-info {
            flex-basis: 250px;
            top: 70px;
            width: 220px;
            margin-left: auto;
            overflow-y: auto; /* Scrollable */
            height: calc(100% - 70px); /* Adjust based on header */
            background: rgba(0, 0, 0, 0.5);
              z-index: 2;
        }

        .info-box {
            background: black;
            padding: 10px;
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.5), 0 0 25px rgba(0, 255, 0, 0.75);
            margin-bottom: 10px;
            border: 1px solid #0F0;
            color: #0F0;
        }

        .info-box p b {
            padding: 5px 10px;
            margin-top: 0;
            text-align: center;
            color: #0F0;
        }

        .info-box img {
            max-width: 100%;
            height: auto;
            margin-top: 10px;
        }

        #footer {
            background-color: #f8f9fa;
            padding: 10px;
            border-top: 1px solid #c8ccd0;
            clear: both;
            text-align: center;
            z-index: 999;
        }

        #footer p {
            margin: 0;
            padding: 0;
        }

        .sidebar-link {
            display: block;
            margin-bottom: 10px;
            color: #007bff;
            text-decoration: none;
        }

        .sidebar-link:hover {
            text-decoration: underline;
        }

        .container, #sidebar, #center-content, #additional-info {
    background: rgba(0, 0, 0, 0.2); /* Adjust opacity (0.2) as needed */
    /* Other styles as necessary */
}

        /* Media query for mobile devices */
@media only screen and (max-width: 768px) {
    .header-left, .header-right {
        flex-direction: column;
        align-items: center;
    }

     .container {
        width: 100%; /* Full width */
    }

    #content {
        width: 75%; /* Full width on mobile */
    }

    #center-content {
        margin-left: 0;
        margin-top: 25px;
    }

    #sidebar {
        display: block; /* Display sidebar on mobile */
        width: 75%;
        top: 0;
        height: auto; /* Full width on mobile */
        position: relative; /* Remove fixed positioning */
    }

    #additional-info {
        width: 75%; /* Full width on mobile */
        position: static; /* Remove fixed positioning */
    }

    .container, #sidebar, #center-content, #additional-info, #content {
        background: rgba(0, 0, 0, 0.3); /* Slightly different opacity for mobile */
    }

    .neon-button {
        width: 100%;
        margin-bottom: 5px;
    }