/* ========================================== */
/*  TEMPLATE CONTROLS - CHANGE THESE ANYTIME! */
/* ========================================== */
:root {
  /* ---------------------------------------- */
  /* 1. GLOBAL COLORS & AESTHETIC             */
  /* ---------------------------------------- */
  --box-bg-color: #ffffff;     /* White background inside all the boxes */
  --text-color: #000000;       /* Base font color for text */
  --border-radius: 0.5rem;     /* Corner roundness of all boxes */

  /* ---------------------------------------- */
  /* 2. WIDTH CONTROLS (Use vw units)         */
  /* Values go from 1vw (tiny) to 100vw (full screen width) */
  /* ---------------------------------------- */
  --banner-width: 65vw;        /* Top banner horizontal width */
  --nav-width: 55vw;           /* Navigation bar horizontal width */
  --middle-zone-width: 75vw;   /* Combined horizontal width of the 3 middle boxes */
  --footer-width: 85vw;        /* Bottom footer horizontal width */

  /* ---------------------------------------- */
  /* 3. HEIGHT CONTROLS (Use rem units)       */
  /* Values are text-relative. 1rem = roughly 16 pixels. */
  /* ---------------------------------------- */
  --banner-height: 3rem;       /* Height of your top banner */
  --nav-height: -10rem;          /* Leave as auto, or use rem like 4rem */
  --middle-box-height: 25rem;  /* Shared height for left, center, and right boxes */
  --footer-height: auto;       /* Leave as auto, or use rem like 3rem */

  /* ---------------------------------------- */
  /* 4. INDEPENDENT SIDEBAR COLUMN WIDTHS     */
  /* Use percentages (%) relative to your total middle row width */
  /* ---------------------------------------- */
  --left-box-width: 20%;       /* Left sidebar percentage width */
  --right-box-width: 15%;      /* Right sidebar percentage width */
  --middle-gap: 2%;            /* Spacing gap between the three columns */
}

/* ========================================== */
/* CORE STRUCTURE & INDEPENDENT BOX ENGINES   */
/* ========================================== */
body {
  margin: 0;
  font-family: sans-serif;
  color: var(--text-color);
  background-image: url('https://neocities.org');
  background-repeat: repeat;
  
  display: flex;
  justify-content: center; 
  padding: 4rem 0; 
}

/* Structural centering column wrapper */
.site-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;         /* FORCES EVERY BLOCK TO STAY DEAD-CENTERED */
  box-sizing: border-box;
}

/* 1. BANNER BOX ENGINES */
.banner {
  background-color: var(--box-bg-color);
  border: 0 !important;                   
  border-radius: var(--border-radius);
  box-shadow: none !important;            
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
  display: block;

  /* Sizing Variable Mappings */
  width: var(--banner-width);
  height: var(--banner-height);
  max-width: 95%;              
  margin: 0 0 2rem 0;
}

.banner h1 {
  margin: 0;
}

/* 2. NAVIGATION BOX ENGINES */
.navigation {
  display: flex;
  justify-content: space-around; 
  background-color: #1a242f;    
  border: 0 !important;                   
  border-radius: var(--border-radius);
  box-shadow: none !important;            
  padding: 1rem;
  box-sizing: border-box;

  /* Sizing Variable Mappings */
  width: var(--nav-width);
  height: var(--nav-height);
  max-width: 95%;
  margin: 0 0 2rem 0;
}

.navigation a {
  color: #ffffff;               
  text-decoration: none;
  font-weight: bold;
}

.navigation a:hover {
  text-decoration: underline; 
}

/* 3. MIDDLE ZONE ENGINES */
.main-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start; 
  box-sizing: border-box;

  /* Sizing Variable Mappings */
  width: var(--middle-zone-width);
  gap: var(--middle-gap);
  max-width: 95%;
  margin: 0 0 2rem 0;
}

/* Left Sidebar Box */
.left-box {
  background-color: var(--box-bg-color);
  border: 0 !important;                   
  border-radius: var(--border-radius);
  box-shadow: none !important;            
  padding: 2rem;
  box-sizing: border-box;
  flex-shrink: 0; 

  /* Sizing Variable Mappings */
  width: var(--left-box-width); 
  height: var(--middle-box-height); 
}

/* Main Center Content Box */
.centered-box {
  flex-grow: 1;                /* Automatically absorbs remaining percentage space */
  background-color: var(--box-bg-color);
  border: 0 !important;                   
  border-radius: var(--border-radius);
  box-shadow: none !important;            
  padding: 2rem;
  box-sizing: border-box;
  overflow-y: auto;

  /* Sizing Variable Mappings */
  height: var(--middle-box-height); 
}

.box-content {
  text-align: center;
}

/* Right Sidebar Box */
.right-box {
  background-color: var(--box-bg-color);
  border: 0 !important;                   
  border-radius: var(--border-radius);
  box-shadow: none !important;            
  padding: 2rem;
  box-sizing: border-box;
  flex-shrink: 0; 

  /* Sizing Variable Mappings */
  width: var(--right-box-width); 
  height: var(--middle-box-height); 
}

/* 4. FOOTER BOX ENGINES */
.site-footer {
  background-color: var(--box-bg-color);
  border: 0 !important;                   
  border-radius: var(--border-radius);
  box-shadow: none !important;            
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;
  display: block;

  /* Sizing Variable Mappings */
  width: var(--footer-width);
  height: var(--footer-height);
  max-width: 95%;
  margin: 0;
}

.site-footer p {
  margin: 0;
}