/* ---------------------------
   Fonts
   --------------------------- */
@font-face {
  font-family: 'KarmicArcade';
  src: url('fonts/ka1.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Earthbound';
  src: url('fonts/OrangeKid.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* ---------------------------
   Theme variables (defaults = grape)
   --------------------------- */
:root {
  /* checkerboard background (grape default) */
  --bg-image: linear-gradient(45deg, #610b70 25%, transparent 25%, transparent 75%, #610b70 75%, #610b70 100%),
               linear-gradient(45deg, #610b70 25%, transparent 25%, transparent 75%, #610b70 75%, #610b70 100%);
  --bg-size: 25px 25px;
  --bg-position: 0 0, 12.5px 12.5px;
  --bg-color: #ae12c9;

  /* page text */
  --page-text-color: #f3edae;

  /* panel colors (header/nav/main/footer) */
  --panel-bg: #000;
  --panel-text: #FFF;
  --panel-border: #FDC0FF;

  /* links */
  --link-color: #FFFFFF;
  --link-hover: #ae12c9;

  /* entry card */
  --entry-bg: #757373;
}

/* ---------------------------
   Global reset and layout helpers
   --------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Earthbound", sans-serif;
  color: var(--page-text-color);
  background-image: var(--bg-image);
  background-size: var(--bg-size);
  background-position: var(--bg-position);
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links (use variables so theme updates immediately) */

main > a { color: var(--link-color); text-decoration: none; transition: color .15s ease; }
main > a:hover { color: var(--link-hover); }

#main_menu a { color: var(--link-color); text-decoration: none; transition: color .15s ease; }
#main_menu a:hover { color: var(--link-hover); }

.entry a { color: var(--link-color); transition: color .15s ease; }
.entry a:hover { color: var(--link-hover); }

.playground_link { color: var(--link-color); transition: color .15s ease; font-size: 18pt;}
.playground_link:hover { color: var(--link-hover); }

/* Utility */
.center { text-align: center; 
		margin: 10px; }
.indent {margin-left: 3vw;}
.subheader {font-size: 25px;
			font-weight: bold;}

/* ---------------------------
   Page container and grid
   --------------------------- */
#container {
  margin: 0 auto;
  width: 85%;
  max-width: 1400px;
}

/* Main page grid: header and footer size to content, main takes remaining space */
#page {
  display: grid;
  width: 100%;
  min-height: 100vh;
  grid-template-areas:
    "head head head"
    "nav  main  main"
    "foot foot foot";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

/* Reset margins on grid children so spacing is predictable */
#page > header,
#page > nav,
#page > main,
#page > footer {
  margin: 0;
  padding: 12px;
}

/* ---------------------------
   Header
   --------------------------- */
#page > header {
  grid-area: head;
  font-size: 2em;
  font-family: "KarmicArcade", sans-serif;
  color: var(--panel-text);
  background-color: var(--panel-bg);
  border-style: double;
  border-width: 10px;
  border-color: var(--panel-border);
  border-radius: 10px;
}

/* ---------------------------
   Navigation
   --------------------------- */
#page > nav {
  grid-area: nav;
  background-color: var(--panel-bg);
  color: var(--panel-text);
  border-style: double;
  border-width: 10px;
  border-color: var(--panel-border);
  border-radius: 10px;
}

/* Menu lists */
#main_menu,
#sub_menu {
  list-style: none;
  padding: 0px;
  font-family: "KarmicArcade", sans-serif;
}

#main_menu { font-size: 30px; }
#sub_menu  { font-size: 23px; }

#sub_menu > li {
  margin-left: 20px;
}

#mobile-menu { display: none; }

/* ---------------------------
   Main content
   --------------------------- */
#page > main {
  grid-area: main;
  background-color: var(--panel-bg);
  color: var(--panel-text);
  border-style: double;
  border-width: 10px;
  border-color: var(--panel-border);
  border-radius: 10px;
  padding-left: 5px;
  overflow: auto;
}

/* Showcase area */
#main_showcase {}

/* Text sizing */
h2 { font-size: 40px; }
p  { font-size: 1.5em; }

/* ---------------------------
   Showcase and entries (flexbox)
   --------------------------- */
.showcase {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

.italics{
	font-style: italic;
	}

/* Card / entry */
.entry {
  padding: 10px;
  margin: 0;
  border-style: inset;
  background-color: var(--entry-bg);
  box-sizing: border-box;
  flex: 2 2 240px;
  min-width: 0;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Entry headings and images */
.entry > h4 {
  font-size: 1.5em;
  text-decoration: underline;
  margin: 0 0 8px 0;
}

.entry > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0 0 0;
  padding: 0;
}

/* Thumbnail helper */
.thumbnail {
  max-width: 200px;
  width: 100%;
  height: auto;
}

/* Entry title style */
.entry_title {
  text-decoration: underline;
  font-size: 1.2em;
}

/* Date and current styles */
.date_header { font-size: 30px; font-weight: bold; text-decoration: underline; }
.currents    { font-weight: bold; font-size: 25px; }

/* ---------------------------
   Footer
   --------------------------- */
#page > footer {
  grid-area: foot;
  margin: 0;
  padding: 12px;
}

footer {
  background-color: var(--panel-bg);
  color: var(--panel-text);
  border-style: double;
  border-width: 10px;
  border-color: var(--panel-border);
  border-radius: 10px;
  padding-left: 5px;
  margin: 10px 0 0 0;
  position: static;
}

/* ---------------------------
   Theme classes (override variables per theme)
   --------------------------- */

/* Grape (explicit) */
body.theme-grape {
  --bg-image: linear-gradient(45deg, #610b70 25%, transparent 25%, transparent 75%, #610b70 75%, #610b70 100%),
                linear-gradient(45deg, #610b70 25%, transparent 25%, transparent 75%, #610b70 75%, #610b70 100%);
  --bg-color: #ae12c9;
  --page-text-color: #f3edae;
  --panel-bg: #000;
  --panel-text: #FFF;
  --panel-border: #FDC0FF;
  --link-color: #FFFFFF;
  --link-hover: #ae12c9;
  --entry-bg: #757373;
}

/* Mint */
body.theme-mint {
  --bg-image: linear-gradient(45deg, #ADFFC3 25%, transparent 25%, transparent 75%, #ADFFC3 75%, #ADFFC3 100%),
                linear-gradient(45deg, #ADFFC3 25%, transparent 25%, transparent 75%, #ADFFC3 75%, #ADFFC3 100%);
  --bg-color: #46B47F;
  --panel-border: #E8FAEA;
  --link-color: #FFFFFF;
  --link-hover: #46B47F;
  --entry-bg: #757373;
  --page-text-color: #0b2b1a;
}

/* Banana */
body.theme-banana {
  --bg-image: linear-gradient(45deg, #FEE528 25%, transparent 25%, transparent 75%, #FEE528 75%, #FEE528 100%),
                linear-gradient(45deg, #FEE528 25%, transparent 25%, transparent 75%, #FEE528 75%, #FEE528 100%);
  --bg-color: #EFB923;
  --panel-border: #DAA520;
  --link-color: #FFFFFF;
  --link-hover: #EFB923;
  --entry-bg: #757373;
  --page-text-color: #3a2a00;
}

/* Strawberry */
body.theme-strawberry {
  --bg-image: linear-gradient(45deg, #FC5A8D 25%, transparent 25%, transparent 75%, #FC5A8D 75%, #FC5A8D 100%),
                linear-gradient(45deg, #FC5A8D 25%, transparent 25%, transparent 75%, #FC5A8D 75%, #FC5A8D 100%);
  --bg-color: #FCBFD0;
  --panel-border: #FCD2DC;
  --link-color: #FFFFFF;
  --link-hover: #FCBFD0;
  --entry-bg: #757373;
  --page-text-color: #3a0a1a;
}

/* Peanut */
body.theme-peanut {
  --bg-image: linear-gradient(45deg, #BF7000 25%, transparent 25%, transparent 75%, #BF7000 75%, #BF7000 100%),
                linear-gradient(45deg, #BF7000 25%, transparent 25%, transparent 75%, #BF7000 75%, #BF7000 100%);
  --bg-color: #E7941E;
  --panel-border: #FEC161;
  --link-color: #FFFFFF;
  --link-hover: #E7941E;
  --entry-bg: #757373;
  --page-text-color: #2f1a00;
}

/* Vanilla */
body.theme-vanilla {
  --bg-image: linear-gradient(45deg, #F9EAD3 25%, transparent 25%, transparent 75%, #F9EAD3 75%, #F9EAD3 100%),
                linear-gradient(45deg, #F9EAD3 25%, transparent 25%, transparent 75%, #F9EAD3 75%, #F9EAD3 100%);
  --bg-color: #FFFDD0;
  --panel-border: #FDFAF1;
  --link-color: #FFFFFF;
  --link-hover: #FFFDD0;
  --entry-bg: #757373;
  --page-text-color: #2b2b1a;
}