/* =================================================================== */
/* 1. VARIABLES - All colors and fonts are defined here for easy editing */
/* =================================================================== */

:root {
  /* --- Background Colors --- */
  --bg-main: #a2a5a0;
  --bg-content: #10181d;
  --bg-sidebar: #2e434c;
  --bg-sitename-link: #a2a5a0;
  --bg-scrollbox: #10181d;
  --bg-input: #333;

  /* --- Text Colors --- */
  --text-main:  #3d2627; /* Main greenish text */
  --text-bold:#809587 ;
  --text-italic: #aaa;
  --text-underline: #888;
  --text-content: #656565;
  --text-sidebar: #809587;
  --text-title: #999;
  --text-sitename: #aaa;

  /* --- Link Colors --- */
  --link-default: #bbb;
  --link-hover: #ddd;
  --menu-link-default: #666;
  --menu-link-hover: #ccc;

  /* --- Border & Scrollbar Colors --- */
  --border-dashed: #222;
  --scrollbar-thumb: #111;
  --scrollbar-border: #666;
  
  /* --- Fonts --- */
  --font-body: verdana, a;
  --font-sitename: 'courier new';
  --font-menu: monospace, georgia;
  --font-title: verdana;
  --font-input: calibri;
}


/* =================================================================== */
/* 2. GLOBAL STYLES - Body, links, and basic typography              */
/* =================================================================== */

body {
    background: var(--bg-main) url(); /* Use your background image URL here */
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-main);
    letter-spacing: 1px;
    line-height: 13px;
}
             
a:link, a:visited, a:active { 
    font-weight: bold;
    color: var(--link-default);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
}

b { color: var(--text-bold); font-weight: bold; }
i { color: var(--text-italic); font-style: italic; }
u { color: var(--text-underline); text-decoration: underline; }
     
/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 7px; 
    height: 0px; 
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);  
    border-radius: 0px;
    border: 1px solid var(--scrollbar-border);
}


/* =================================================================== */
/* 3. LAYOUT & STRUCTURE - Main containers and layout setup          */
/* =================================================================== */

#layout {
    margin: 0px auto;
    width: 720px;
}
  
#header1, #menu1, #footer1, #content1, #left1, #right1 {
    float: left;
    margin: 0 auto;
}

#header1, #menu1, #footer1 { width: 720px; }
#content1 { width: 360px; }
#left1, #right1 { width: 180px; }

#footer1 {
    clear: both;
}


/* =================================================================== */
/* 4. COMPONENT STYLES - Header, Menu, Content, Footer, etc.         */
/* =================================================================== */

/* --- Header --- */
#header2 {
    height: 260px;
    background: var(--bg-main) url(https://64.media.tumblr.com/eade6a5e9d8fc06a13ea9db3b404e4ed/0d8403f1636c3ce9-d7/s540x810/1836d4ffa339f88ae9ddd458df521b3b16654cab.gifv) no-repeat center;
    margin: 0px;
}
  
#sitename a {
    font: 20px var(--font-sitename);
    color: var(--text-sitename);
    text-transform: uppercase;
    letter-spacing: 8px;
    background: var(--bg-sitename-link);
    border-radius: 30px;
    padding: 4px 20px;
}
 
/* --- Menu --- */
#menu2 {
    height: 20px;
    line-height: 20px;
    margin: 0px 0px 0px 0px;
    padding: 1px;
    padding-top: 0px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
      
#menu2 a { 
    font: bold 11px var(--font-menu);
    text-transform: uppercase;
    padding: 4px; 
    margin-right: 10px;
    letter-spacing: 1px;
    color: var(--menu-link-default);
}
      
#menu2 a:hover {
    color: var(--menu-link-hover);
}
 
/* --- Content & Sidebars --- */
#content2 {
    margin: 0px;
    padding: 6px;
    background: var(--bg-content);
    color: var(--text-content);
}

#left2 {
    margin: 0px;
    padding: 6px;
    background: var(--bg-sidebar);
    border-right: 1px dashed var(--border-dashed);
    color: var(--text-sidebar);
}
  
#right2 {
    margin: 0px;
    padding: 6px;
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
    border-left: 1px dashed var(--border-dashed);
}
  
/* --- Footer --- */
#footer2 {
    height: 40px;
    margin: 0px;
}

/* --- Misc Components --- */
.scrollbox {
    background: var(--bg-scrollbox);
    color: var(--text-content);
    height: 100px;
    overflow: auto;
    overflow-x: hidden;
    margin-top: 4px;
}

.title {
    font: bold 10px var(--font-title);
    color: var(--text-title);
    letter-spacing: 3px;
    text-align: left;
    padding: 1px;
    margin-bottom: 0px;
}

textarea {
    font: 10px var(--font-input);
    letter-spacing: 1px;
    background: var(--bg-input);
}