/* ==========================================================================
   1. GLOBAL STYLES & LAYOUT
   ========================================================================== */

/* Minecraft Font Definition */
@font-face {
  font-family: 'Minecrafter';
  src: url('../fonts/Minecrafter.alt.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
  text-align: left;
  position: relative;
  background-color: #0C0F06; /* Deepest olive green background */
}

/* Cosmetic Grid Overlay (Starts 72px down) */
body::before {
  content: "";
  position: absolute;
  top: 72px; 
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-image: 
    linear-gradient(to right, rgba(100, 120, 50, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100, 120, 50, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none; 
}

/* Structural Page Containers */
#background {
  position: absolute; 
  z-index: 1; 
  width: 100%; 
  height: 100%;
}

#fixed {
  position: absolute; 
  top: 77px; 
  left: 5px; 
  width: 170px; 
  z-index: 10; 
  color: #333; 
  padding: 5px;
}

#scroller {
  position: absolute; 
  width: 100%; 
  height: calc(100% - 72px); 
  top: 48px; 
  left: 0; 
  overflow: auto; 
  z-index: 2;
} 

#content {
  padding: 10px 20px 20px 20px;
}

/* ==========================================================================
   2. TYPOGRAPHY & HEADINGS (SHARED ELEMENTS)
   ========================================================================== */

body {
  font-family: 'Tinos', serif;
}

/* Minecraft Main Title */
h1 {
  font-family: 'Minecrafter', arial;
  text-transform: uppercase;
  font-size: 128px; 
  color: #BABABA; 
  margin-top: 100px;
  margin-bottom: 20px;
  letter-spacing: 3px;
  text-align: center;        
  width: 100%;               
  box-sizing: border-box;    
  text-shadow: 
    1px 1px 0px #000000,
    2px 2px 0px #000000,
    3px 3px 0px #000000,
    4px 4px 0px #000000,
    5px 5px 0px #000000; 
}

h2 { font-family: 'Calibri', cursive; font-size: 15px; color: #ffffff; padding-left: 0%; }
h3 { font-family: 'Salsa', cursive; font-size: 20px; color: #ffffff; padding-left: 0%; }
h4 { font-family: 'Calibri', cursive; font-size: 15px; color: #ffffff; padding-left: 0%; }

/* Hyperlinks */
a:link    { color: white; }
a:visited { color: violet; }
a:hover   { color: hotpink; }
a:active  { color: hotpink; }