/* 

=============================================================================================

  /$$$$$$   /$$$$$$  /$$$$$$$  /$$       /$$$$$$ /$$   /$$        /$$$$$$  /$$$$$$ /$$   /$$
 /$$__  $$ /$$__  $$| $$__  $$| $$      |_  $$_/| $$$ | $$       /$$__  $$|_  $$_/| $$  / $$
| $$  \__/| $$  \ $$| $$  \ $$| $$        | $$  | $$$$| $$      | $$  \__/  | $$  |  $$/ $$/
| $$ /$$$$| $$  | $$| $$$$$$$ | $$        | $$  | $$ $$ $$      |  $$$$$$   | $$   \  $$$$/ 
| $$|_  $$| $$  | $$| $$__  $$| $$        | $$  | $$  $$$$       \____  $$  | $$    >$$  $$ 
| $$  \ $$| $$  | $$| $$  \ $$| $$        | $$  | $$\  $$$       /$$  \ $$  | $$   /$$/\  $$
|  $$$$$$/|  $$$$$$/| $$$$$$$/| $$$$$$$$ /$$$$$$| $$ \  $$      |  $$$$$$/ /$$$$$$| $$  \ $$
 \______/  \______/ |_______/ |________/|______/|__/  \__/       \______/ |______/|__/  |__/
 
=============================================================================================

*/


/* - - S T Y L E - -  */

body {
      background-color: #111111;
    }

/* inconsolata-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inconsolata-v37-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

    h1  {text-align:center;font-family:Inconsolata, sans-serif;color:#ffffff;}
	
	/* - - post title - -  */	
	
    h2  {font-family:Inconsolata, sans-serif; font-style:normal; font-weight:normal;}
	
	/* - - post subtitle - -  */	
	
    h3  {font-family:Inconsolata, sans-serif; font-style:normal; font-weight:normal;}
    
	th  {font-family:Inconsolata, sans-serif; font-size:12px; font-style:normal; font-weight:normal; color:#ffffff;}
	td  {font-family:Inconsolata, sans-serif; font-size:12px; font-style:normal; font-weight:normal; color:#ffffff;}
    li  {font-family:Inconsolata, sans-serif; font-size:10px; font-style:normal; font-weight:normal; color:#ffffff;}
    ul  {font-family:Inconsolata, sans-serif; font-size:12px; font-style:normal; font-weight:normal; color:#ffffff;}
    
	/* - - main text - -  */
	
	p   {font-family:Inconsolata, sans-serif; font-size:12px; font-style:normal; font-weight:normal; color:#999795; line-height:18px; margin-bottom:08px;}
    
	/* - - menu header - -  */
	
	p2  {font-family:Inconsolata, sans-serif; font-size:12px; font-style:normal; font-weight:normal; color:#ab9341;}

	/* - - enter size - -  */

    p3  {font-family:Inconsolata, sans-serif; font-size:18px; font-style:normal; font-weight:normal; color:#ffffff; word-spacing:1rem; }
	p4  {font-family:Inconsolata, sans-serif; font-size:10px; font-style:normal; font-weight:normal; color:#ffffff;}	
	pre  {font-family:Inconsolata, sans-serif; font-size:12px; font-style:normal; font-weight:normal; color:#ffffff;}


/* - - H E A D E R - -  */

.header   {font-family:Inconsolata, sans-serif; font-size:14px; font-style:normal; font-weight:bold; color:#ffffff; word-spacing:1rem; text-align:right;}



/* - - I N D E X    B O X - -  */

.feature-box {
  width:300px; margin:0 auto;
  padding-top: 20px;
  padding-right: 14px;
  padding-bottom: 20px;
  padding-left: 14px;
  background-color: #161410;
  border: 1px solid #363430;
}


/* - - H E A D E R    I M A G E - -  */

  .center-image {
    display: block;       /* Converts the image to a block element */
    margin-left: auto;    /* Automatically calculates left margin */
    margin-right: auto;   /* Automatically calculates right margin */
    max-width: 100%;      /* Ensures the image doesn't overflow mobile screens */
    height: auto;
	border: 1px solid #363430;
  }
  
  
  /* - - S I D E B A R    I M A G E - -  */

  .sidebar-image {
    display: block;       /* Converts the image to a block element */
    margin-left: auto;    /* Automatically calculates left margin */
    margin-right: auto;   /* Automatically calculates right margin */
    max-width: 100%;      /* Ensures the image doesn't overflow mobile screens */
    height: auto;
 }
  
  
 /* - - H E A D E R    I M A G E    B A R S - -  */ 
  
hr {
	background-color: #22201d;
	border: 1px solid #363430;
	height: 10px;
	margin: 10px 0 10px 0;
	width: 780px;
	}
	
hr2 {
	margin: 10px 0 0 0;
	width: 780px;
	}	
	
hr.hr-bottom {
	margin: 10px 0 0 0;
	width: 780px;
	}


/* - - B O D Y - -  */

body {
  background-image: url("images/g6_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}


/* - - S I T E    C O L U M N S - -  */

 .grid-container {
            display: grid;
			justify-content: center;
            grid-template-columns: 560px 220px; /* 560 + 220 = 780 */
            gap: 0px;                           /* Kept at 0 to perfectly fit 780px */
            min-height: 100vh;
			max-width: 780px;                   /* Exact requested container width */
            margin: 0 auto;                     /* Centers layout on the screen */
            padding: 20px;                      /* Outside container padding */
            box-sizing: border-box;
        }

        /* Applying box-sizing universally to protect layout width dimensions */
        *, *:before, *:after {
            box-sizing: inherit;
        }

        .column {
            background-color: #161410;
            padding: 10px; /* Internal content padding */
        }

        .left-col {
            background-color: #161410;
			border-left: 1px solid #363430;
            border-right: 1px solid #363430; /* Optional border separator since gap is 0 */
        }

        .right-col {
            background-color: #161410;
			border-right: 1px solid #363430;
        }

        /* Mobile Breakpoint */
        @media (max-width: 780px) {
            .grid-container {
                grid-template-columns: 1fr;    /* Stacks into 1 column on mobile */
                max-width: 100%;
            }
            .left-col {
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
            }
        }



/* - - S I D E B A R    M E N U - -  */

ul {
    box-sizing: border-box;
    display: block;
    list-style-type: disc;
    padding: 0;
    border-top: 1px solid #363430;
    border-bottom: 1px solid #363430;
    
    /* 1. Tighten space above/below the whole list */
    margin: 0 0 10px 0; 
    margin-block-start: 0;
    margin-block-end: 10px;
}

li {
    display: block;
    background: #22201d;
    
    /* 2. Reduce or eliminate the gap between items */
    margin: 2px; 
    
    /* 3. Control internal item height tightly */
    padding: 5px 5px; 
	
	
}

li:hover {
    background: #44403c; /* Replace with the color you want on hover */
    cursor: pointer;     /* Optional: Changes the mouse cursor to a hand pointer */
}



/* - - P O S T    T I T L E - -  */

h2 {
    display: block;
    padding: 13px 10px;
    background: #1b1814;
	color: #bd934f;
    margin: 0 0 15px;
    border-bottom: 1px solid #35302a;
    font-size: 1.25em;
}



/* - - P O S T    S U B T I T L E - -  */

h3 {
	color: #bd934f;
    margin: 0 0 15px;
    font-size: 1em;
}



/* - - L I N K S - -  */

a, a:hover, a:active, a:visited {
    text-decoration: none;
    color: white; /* or #ffffff */
}

a:hover {
  /* horizontal-offset vertical-offset blur-radius color */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  color: #fff; /* Optional: lighten the text color for better contrast */
}



/* - - H O M E - -  */

.container {
  height: 100vh; /* Full viewport height */
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: center;     /* Vertical center */
  background-color: transparent;
}



/* - - S P A N - -  */

span {
  display: inline-block; /* Required to set width/height */
  padding: 04px;
}



/* - - G A L L E R Y - -  */

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 2px;
  border: 1px solid #282828;
  width: 190px;
}

div.gallery-item:hover {
  border: 1px solid #ccc;
}

div.gallery-item img {
  width: 100%;
  height: auto;
}



/* - - M O U S E    S E L E C T I O N - -  */

/* Standard syntax */
::selection {
  background-color: #ffffff; /* Highlight background color */
  color: #111111;            /* Text color */
}

/* Firefox compatibility */
::-moz-selection {
  background-color: #ffffff;
  color: #111111;
}



/* - - C O D E    B O X - -  */

pre {
    background-color: #0E0E0E;
    border: 1px solid #ddd;
    border-left: 3px solid #00FF00;
    padding: 15px;
    overflow-x: auto; /* Adds a horizontal scrollbar if the code is too long */
}

code {
    font-family: Inconsolata, sans-serif;
}


/* - - E N D - -  */


/*

===============================================================================================
  __            _                                                _                           _ 
 / _|          | |                                              | |                         | |
| |_ _   _  ___| | __  _   _  ___  _   _  __      _____  _ __ __| |_ __  _ __ ___  ___ ___  | |
|  _| | | |/ __| |/ / | | | |/ _ \| | | | \ \ /\ / / _ \| '__/ _` | '_ \| '__/ _ \/ __/ __| | |
| | | |_| | (__|   <  | |_| | (_) | |_| |  \ V  V / (_) | | | (_| | |_) | | |  __/\__ \__ \ |_|
|_|  \__,_|\___|_|\_\  \__, |\___/ \__,_|   \_/\_/ \___/|_|  \__,_| .__/|_|  \___||___/___/ (_)
                        __/ |                                     | |                          
                       |___/                                      |_|                          

===============================================================================================

*/