@import url('./article.css');
@import url('./uberlinks.css');

/* ============================================================
   Color System — CSS Custom Properties
   ============================================================ */
:root {
    font-size: 16px;
    font-family: sans-serif;
    background-color: #f1f5f9;
    /* Mid-contrast scientifically proven bg and color pair for legibility */
    /* https://www.sciencedirect.com/science/article/abs/pii/S0003687016302459 */
    --article-bg: rgb(234, 234, 234);
    --article-text: rgb(18, 18, 18);
	--color-bg: rgb(234, 234, 234);
	--color-surface: #ffffff;
	--color-text: #1a1a18;
	--color-heading: #0f0f0e;
	--color-muted: #6b6b63;
	--color-rule: #d4d4cc;
	--link-color: #5EC035;
	--color-accent: #5EC035;
	--color-accent-hover: #1a3f80;
	--color-code-bg: #f0f0eb;
	--color-code-border: #ddddd6;
	--menuHeight: 65px;
	/* Hex Colors */
    --hexColor-fabertising: #E042E0;
    --hexColor-its_thinking: #5EC035;
    --hexColor-mind_control: #3AB7F4;
    --hexColor-made_you_look: #7645AF;
    --hexColor-design_science: #EBAF00;
    --hexColor-social_butterfly: #66CCA0;
    --hexColor-banapana_green: #5EC035;

    /* RGB Equivalents */
    --color-fabertising: 224, 66, 224;
    --color-its_thinking: 94, 192, 53;
    --color-mind_control: 58, 183, 244;
    --color-made_you_look: 118, 69, 175;
    --color-design_science: 235, 175, 0;
    --color-social_butterfly: 102, 204, 160;
    --color-banapana_green: 94, 192, 53;
    --section_color_css: 94, 192, 53;
}

/* ============================================================
   Fira Code, Roboto — self-hosted (place font files in /static/fonts/)
   ============================================================ */
@font-face {
	font-family: 'Roboto Slab';
	src: url('../fonts/RobotoSlab-VariableFont.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Code';
	src: url('../fonts/FiraCode-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Fira Code';
	src: url('../fonts/FiraCode-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
  font-size: 1rem;
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

main {
    max-width: 1040px;
	margin: 0 auto;
	padding: 0 16px;
	min-height: 100vh;
	display: flow-root;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 15px;
  justify-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.gallery img {
  max-width: 100%;
  height: auto;
  display: block;
}