/*  OVERARCHING STYLES FOR FORYOURBRAIN */

/* navigation bar */
#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0em;
	padding: 1em;
	list-style: none;
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
}

#nav li {
  float: left;
	display: block;
	padding-right: 10px;
	text-decoration: none;
  flex: 0 0 auto;
}

#nav li a {
  color: hotpink;
}

#nav li a:hover {
  color: black;
}

#navbox {
}

.clr {
    clear:both;
    font-size:0;
}

html, body {
      background-color: black; /* change to any colour you want */
			min-height: 100%;          /* ensures it fills even when content is short */
    }

h1, h2 {
     color: white; /* makes heading text white */
   }

	 /* ===== Mobile-friendly baseline (non-destructive) ===== */

	 /* Prevent layout overflow on small screens */
	 html { box-sizing: border-box; }
	 *, *::before, *::after { box-sizing: inherit; }
	 body { margin: 0; overflow-x: hidden; }

	 /* Media scales down gracefully */
	 img, video, canvas, svg {
	   max-width: 100%;
	   height: auto;
	 }

	 /* Make iframes and embeds scale */
	 iframe, embed, object {
	   max-width: 100%;
	 }

	 /* Sensible, fluid content width without changing your design colours */
	 main, header, footer, section, article, .container, .wrapper {
	   /* min(100%, 1100px) keeps desktop width; adjust 1100px if your desktop artboard is wider */
	   width: min(100%, 1100px);
	   margin-inline: auto;
	   padding-inline: clamp(12px, 4vw, 32px);
	 }

	 /* Tap targets on touch devices */
	 a, button { min-height: 44px; }

	 /* Grids that collapse on mobiles, without assuming your class names */
	 .grid, .tiles, .cards, .columns, .rows {
	   display: grid;
	   gap: clamp(10px, 2.5vw, 20px);
	 }

	 /* If you already use 2–3 columns via inline widths, this provides a sane default */
	 @media (min-width: 768px) {
	   .grid, .tiles, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	 }
	 @media (min-width: 1024px) {
	   .grid, .tiles, .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	 }

	 /* Two-column “content/image” style rows stack on phones */
	 .row, .two-col, .split, .columns {
	   display: grid;
	   grid-template-columns: 1fr;
	   gap: clamp(10px, 2.5vw, 24px);
	 }
	 @media (min-width: 900px) {
	   .row, .two-col, .split, .columns { grid-template-columns: 1fr 1fr; }
	 }

	 /* Respect your existing inline sizes on desktop, but stop them breaking on phones */
	 @media (max-width: 768px) {
	   /* 1) Any inline width (e.g. style="width:600px") becomes fluid on mobile */
	   [style*="width:"] { width: 100% !important; max-width: 100% !important; }

	   /* 2) Absolute left/right nudges are ignored on mobile to avoid off-screen content */
	   [style*="left:"], [style*="right:"] { left: auto !important; right: auto !important; }

	   /* 3) Big fixed heights collapse to content height (prevents weird crops) */
	   [style*="height:" ] { height: auto !important; }

	   /* 4) Make big headings wrap better without touching your fonts/colours */
	   h1, h2, h3 { word-break: break-word; overflow-wrap: anywhere; }
	 }

	 /* Optional: smoother spacing scale without touching your palette */
	 :root {
	   --space: clamp(12px, 2.8vw, 24px);
	 }
	 .section, .panel, .block { margin-block: var(--space); }

	 /* Utility classes you can sprinkle if needed (don’t change existing styles) */
	 .fluid   { width: 100% !important; max-width: 100% !important; }
	 .stack   { display: grid; gap: var(--space); }
	 .center  { margin-inline: auto; }

/* --- Force underline on all links --- */
a {
  text-decoration: underline;
}

/* If you want the underline to stay even on hover/visited */
a:hover, 
a:visited {
  text-decoration: underline;
}