/* ========================================
    Common STYLES (Body, Fonts, External links)
   ======================================== */
body {
    background: #0a0a0a url('https://i.imgur.com/EXAMPLE_BG.jpg') fixed center top; /* Replace it with your background (city at night, crime theme) */
    background-size: cover;
    color: #cccccc;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 13px;
    margin: 0;
    padding: 0;
}

a {
    color: #ff4444; /* Blue  accent as in BR */
    text-decoration: none;
}
a:hover {
    color: #ff6666;
    text-decoration: underline;
}

/* Import fonts (modern look) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ========================================
   HEADER (Header, Logo, Navigation)
   ======================================== */
#page-header {
    background: linear-gradient(to bottom, #1a1a1a, #0f0f0f);
    border-bottom: 3px solid #ff4444;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}

#header-logo {
    text-align: center;
    padding: 20px 0;
}
#header-logo a {
    font-size: 36px;
    font-weight: bold;
    color: #ff4444;
    text-shadow: 0 0 10px #ff0000;
}

/* Navigation */
.navbar {
    background: #111111;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}
.mainmenu a {
    color: #ffffff !important;
    padding: 10px 15px;
}
.mainmenu a:hover {
    background: #ff4444;
    color: #ffffff !important;
}

/* ========================================
   MAIN AREA (Categories, Forums, Topics)
   ======================================== */
#page-body {
    margin: 10px auto;
    max-width: 1200px;
}

.forabg, .forumbg {
    background: #1a1a1a !important;
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.forabg .header {
    background: linear-gradient(to bottom, #ff4444, #cc0000) !important;
    border-radius: 8px 8px 0 0;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

/* List of topics */
.topiclist .row {
    background: #222222 !important;
    border-bottom: 1px solid #333;
}
.topiclist .row:hover {
    background: #2a2a2a !important;
}

/* ========================================
   POSTS AND MESSAGES
   ======================================== */
.post {
    background: #181818 !important;
    border: 1px solid #333;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.postbody {
    color: #e0e0e0;
    width: 75%;
}

.postprofile {
    background: #111111;
    border-left: 3px solid #ff4444;
    color: #aaaaaa;
}

/* Quotes and code */
blockquote {
    background: #222222;
    border-left: 4px solid #ff4444;
}
code {
    background: #111111;
    border: 1px solid #444;
}

/* ========================================
   BUTTONS AND FORMS
   ======================================== */
input.button1, input.button2 {
    background: #ff4444;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    padding: 8px 15px;
}
input.button1:hover, input.button2:hover {
    background: #ff6666;
}

/* ========================================
   FOOTER & EXTRAS
   ======================================== */
#page-footer {
    background: #111111;
    color: #777777;
    border-top: 2px solid #ff4444;
    text-align: center;
    padding: 15px;
}

/* Scrollbar (for modern browsers) */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #111;
}
::-webkit-scrollbar-thumb {
    background: #ff4444;
}

/* Adaptability */
@media (max-width: 800px) {
    .postbody { width: 100% !important; }
    .postprofile { width: 100% !important; border-left: none; border-top: 3px solid #ff4444; }
}