/* =========================================================================
   A stripped-down version of the "omni.vi" pattern:
   one full screen with a logo, then scroll down to a directory of links.
   No JavaScript anywhere — this is all HTML + CSS.

   Everything here works out of the box. The comments marked >> SWAP <<
   show where to drop in your own assets (fonts, cursors, background, logo).
   ========================================================================= */


/* --- Custom fonts -------------------------------------------------------
   >> SWAP << Upload a .ttf/.otf to your site, then uncomment and point to it.
   Until you do, the site falls back to a normal system font (see body below).

@font-face {
	font-family: "display";
	src: url(myfont.ttf);
}
------------------------------------------------------------------------- */


/* Reset the default margin/padding the browser adds to everything.
   A near-universal first line in handmade stylesheets. */
* {
	margin: 0;
	padding: 0;
}


/* --- THEME VARIABLES ----------------------------------------------------
   Define your colors once here, reference them everywhere below as var(--name).
   Change the whole site's look by editing just these lines. */
:root {
	--bgc: #000000;          /* background */
	--textc: #d5fff5;        /* main text */
	--empc: #ffffff;         /* borders / emphasis */
	--linkc: #4a98b0;        /* links */
	--linkv: #65c6c4;        /* visited links */
	--hic: rgba(255, 255, 255, 0.26); /* text-selection highlight */
	--cellgap: 5px;          /* space between link boxes */
}


html {
	scroll-behavior: smooth;  /* makes clicking the ▼ / ▲ glide instead of jump */
	box-sizing: border-box;

	/* >> SWAP << custom mouse cursor. Upload a small .png and uncomment:
	cursor: url(cursor.png) 0 0, auto; */
}


body {
	color: var(--textc);

	/* >> SWAP << once your @font-face is set up, change "sans-serif" to "display".
	   The list is fallbacks: if the first font is missing it tries the next. */
	font-family: "display", Arial, sans-serif;

	/* >> SWAP << a tiled background image gives the biggest "vibe" payoff.
	   Upload a small image and uncomment these two lines:
	background: url(tile.png);
	background-size: 248px;        */
	background-color: var(--bgc);

	/* Keeps the background still while content scrolls over it. */
	background-attachment: fixed;
}


/* Recolor the text-selection highlight to match the theme. */
::selection {
	background: var(--hic);
}


/* Style links + give visited ones a different color. */
a {
	color: var(--linkc);
}
a:visited {
	color: var(--linkv);
}


/* =========================================================================
   SCREEN 1 — the centered logo and buttons
   ========================================================================= */

#container {
	position: fixed;          /* pinned to the screen so it stays centered */
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);  /* the classic dead-center trick */
	z-index: -1;              /* sits behind the directory once you scroll */
	text-align: center;
	width: 100%;
}

#logo {
	font-size: clamp(2rem, 10vw, 5rem); /* scales with screen, within limits */
	letter-spacing: 0.3rem;
	text-decoration: none;
	color: var(--empc);
}

.buttons {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

.buttons a {
	text-decoration: none;
	color: var(--textc);
}

.buttons a:hover {
	filter: brightness(70%);  /* subtle dim on hover */
}


/* =========================================================================
   SCREEN 2 — the link directory

   THE KEY TRICK: margin-top: 105vh pushes this whole block down past the
   first screen. "vh" = 1% of viewport height, so 105vh is just over one
   full screen. That's what creates the "scroll down to reveal" effect.
   ========================================================================= */

#index {
	margin-top: 105vh;        /* <-- the whole illusion lives in this line */
	min-height: 100vh;
	width: 100%;
	background-color: var(--bgc);
	border-top: solid 2px var(--empc);
	text-align: center;
	position: relative;
}


/* GRID for the vertical skeleton: each row is one section, stacked. */
.index-grid {
	display: grid;
	max-width: 980px;
	margin: 0 auto;           /* centers the grid horizontally */
	gap: 10px;
	padding: 20px 10px;
}


/* Each labeled section. The left border + offset gives the indented look. */
section {
	border-left: 1px solid var(--empc);
	padding-left: 4px;
	margin-left: 0%;         /* indents sections from the left edge */
	text-align: left;
	background-color: var(--bgc);
}


/* The section heading ("home", "galleries"...) drawn as a bordered bar. */
section h1 {
	font-weight: normal;
	font-size: 24px;
	margin-bottom: var(--cellgap);
	display: flex;
}

section h1 b {
	font-weight: normal;
	flex-grow: 1;             /* stretches the bar to fill the row */
	border: solid 1px var(--empc);
	padding: 4px 8px;
}


/* FLEXBOX for the rows of link boxes inside each section.
   This is the grid-vs-flex combo: grid stacks the sections vertically,
   flexbox lays the links out horizontally and wraps them when they run
   out of room. */
.flexy {
	display: flex;
	flex-wrap: wrap;          /* links drop to a new line instead of overflowing */
	gap: var(--cellgap);
}

.flexy a {
	flex-grow: 1;             /* links stretch to share the row evenly */
	min-width: 20%;           /* but never get narrower than this */
	border: solid 1px var(--empc);
	background: var(--bgc);
	color: #c0c0c0;
	padding: 0.5ch;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	position: relative;       /* needed so the ::before below can position */
}

/* A hover flourish drawn with a PSEUDO-ELEMENT (no extra HTML needed):
   a thin white bar appears across the top of a link on hover. */
.flexy a:hover::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--empc);
}


/* "Back to top" arrow + footer. */
#hide {
	font-size: 2rem;
	text-decoration: none;
	color: var(--textc);
}
#hide:hover {
	filter: brightness(70%);
}

footer {
	margin-top: 2rem;
	color: lightgray;
	text-align: center;
	user-select: none;        /* can't accidentally highlight it */
}


/* =========================================================================
   RESPONSIVE — on narrow screens, simplify and stack everything.
   The real omni.vi does exactly this: throw away the fancy positioning
   on phones where it doesn't fit.
   ========================================================================= */
@media (max-width: 675px) {
	section {
		margin-left: 0;       /* remove the big indent on phones */
		margin-bottom: 2rem;
		border-left: none;
	}
}