/* Universal styles */
body {
    font-family: Arial, sans-serif;
    margin: auto;
    padding: 1em;
    max-width: 64em;
    color: #fb5;
    background: #111;
    word-wrap: break-word;
}

/* Navbar styles */
.navbar {
    background-color: #fb5;
    padding: 14px 20px;
    text-align: center;
    border-radius: 0.25em;
}
.navbar a {
    display: inline-block;
    color: #111;
    text-decoration: none;
    font-size: 17px;
    padding: 14px 20px;
    margin: 0 5px;
    border-radius: 3px;
}
.navbar a:hover {
    background-color: #f93;
    color: #111;
}

.hero,
.explanation,
.benefits {
    background-color: transparent; /* No solid background */
    border: 4px double #fb5;         /* Two-lined neon-green border */
    border-radius: 0.25em;
    margin: 20px 0;
    padding: 20px;
    text-align: center;
    color: #fb5;
}

/* Keep the rest of your existing rules and colors. */
/* Example for the .hero header text if you want it larger/uppercase: */
.hero h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #fb5;
}

.cta-buttons {
    margin-top: 20px;
}
.cta-buttons a {
    display: inline-block;
    padding: 12px 25px;
    margin: 5px;
    border-radius: 3px;
    text-decoration: none;
    color: #fff;
    background-color: #333;
    font-weight: bold;
}
.cta-buttons a:hover {
    background-color: #f93;
}

/* Banner section */
.banner-container {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 2px solid #ccc;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fb5;
    margin-top: 40px;
}
footer p {
    margin: 0;
}

/* Typography, forms, etc. (kept as-is) */
a {
    text-decoration: none;
    color: #f70;
    font-weight: bold;
    padding-right: 0.25em;
}
a:hover {
    color: #f20;
}
h1 {
    text-transform: uppercase;
    color: #fb5;
    font-family: monospace;
}
pre {
    background-color: #333;
    color: #fb5;
    padding: 1em;
    border: 1px solid #fb5;
    border-radius: 0.25em;
}
div.alert-warning, .alert-warning {
    background-color: darkred;
    color: #fb5;
    padding: 1em;
    border-radius: 0.25em;
    font-weight: bold;
}
div.alert-success {
    background-color: darkgreen;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea {
    background-color: #333 !important;
    color: darkorange !important;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #ccc !important;
    background-color: #333 !important;      /* matches global style */
    color: darkorange;           /* matches global style */
}

blockquote {
    border-left: 2px solid #fb5;
    background-color: rgba(255, 187, 85, 0.05);
    padding: 0.5em;
}
.timestamp {
    color: #999;
    font-size: 0.9em;
    margin-left: 0.5em;
}
.highlighted {
    background-color: #333;
    border: 1px solid #fb5;
    border-radius: 0.25em;
    padding: 0.5em;
}
/* Notification styles */
.notification {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1em;
    border-radius: 0.5em;
    font-weight: bold;
    z-index: 1000;
    color: white;
}
.notification.success { background-color: darkgreen; }
.notification.error { background-color: darkred; }
.notification.show {
    display: block;
    animation: fadeout 3s forwards;
}
@keyframes fadeout {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; display: none; }
}
/* Special animation effects */
#fancyboi::before {
    content: "$ ";
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes flash { 50% { opacity: 0; } }
    @keyframes reveal {
        from { width: 2em; }
        to { width: 100%; }
    }
    #fancyboi {
        overflow: hidden;
        white-space: nowrap;
        animation: reveal 4s linear;
        text-overflow: "â–ˆ";
    }
    #fancyboi::after {
        content: "â–ˆ";
        animation: flash 0.5s step-end infinite;
    }
}

/* Responsive tweaks */
@media (max-width: 768px) {
    td {
        display: block;
    }
}

@media (min-width: 64em) {
    .row {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row-reverse;
    }
    .col { flex-grow: 1; }
}