/*********************************
  CSS Variables and Root Settings
**********************************/
:root {
  /* Color Palette */
  --text-color: #4cbb17;
  --bg-color: #1b1b1b;
  --accent-color: #4cbb17;
  --accent-hover: #fff;
  /*--border-color: #eee;*/
  /*--overlay-bg: rgba(0, 0, 0, 0.8);*/
  /* Typography */
  --font-mono: 'Courier New', monospace;
  --font-heading: 'shloprg', monospace;
  --font-title: 'shloprg', monospace;
  /* Spacing */
  --spacing-xs: 0.3em;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
    
  /* Layout */
  --sidebar-width: 250px;
  --hamburger-size: 40px;
  --column-gap: 16px;
  --content-max-width: 1600px;
  
  /* Scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--text-color) var(--bg-color);
}
/*********************************
  font definitions
*********************************/
@font-face {
  font-family: 'shloprg';
  /*src: url('fonts/shloprg.eot');*/
  /*src: url('fonts/shloprg.eot') format('embedded-opentype'),*/
  /*     url('fonts/shloprg.woff') format('woff'),*/
  /*     url('fonts/shloprg.ttf') format('truetype'),*/
  src: url('fonts/shloprg.ttf') format('truetype'),
       url('fonts/shloprg.woff2') format('woff2'),
       url('fonts/shloprg.svg#shloprg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'SuperMystery';
  /*     url('fonts/shloprg.ttf') format('truetype'),*/
  src: url('fonts/SuperMystery-BLG4x.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*********************************
  Base Styles
*********************************/
* {
  box-sizing: border-box;
}

body {
  background-color: black;
  color: green;
  font-family: Verdana;
}

h1 {
  font-family: 'SuperMystery';
  text-align: center;
  font-size: xx-large;
}

.three-column-layout {
  display: flex;
  gap: var(--column-gap);
  flex: 1;
  align-items: flex-start;
}

.left-column {}

.center-column {}

.right-column {}