/* There are two sets of color/customization variables here.
 *
 * One is fancier, but may be harder to use if you've never used CSS before.
 * The other is simple and perfect for getting started.
 *
 * The complex version is the default; changing the simple version
 * will not change anything while it's active.
 *
 * To switch to the simple version, just comment out or delete the
 * complex version's section.
 *
 * Enjoy, and good luck! */

/* ---------- Simple ------------ */

:root {
	--header-footer-bg: #000000;
	--body-bg: #000000;
	--main-bg: #ffffff;

	--header-footer-text: #ffffff;
	--body-text: #ffffff;
	--link-text: #0000FF;
	--visited-link-text: #800080;

	--focus-outline: red;
	--border-color: #000000;

	--body-font: "pixel";
	--title-font: "pixel";
}

/* Delete everything below this line to switch to simple */

/* ---------- Fancy ------------ */

/* Suggested tools:
 * https://cssgradient.io/ url("./images/bg.png")
 */

:root {
	--headfoot-gradient-1: #000000;
	--headfoot-gradient-2: #000000;
	--body-bg-image: url("./images/tileable-wood-colored.png");

	/* Dark theme adjustments */
	--header-footer-bg-dark: #000000;
	--body-bg-dark: #000000;
	--main-bg-dark: #ffffff;
	--header-footer-text-dark: #000000;
	--body-text-dark: #000000;
	--link-text-dark: #0000FF;
	--visited-link-text-dark: #800080;
	--body-bg-image-dark: url("./bg.png");
}

/* Title font definition */
header h1 {font-family: 'pixel', Serif;}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'pixel';
  font-style: normal;
  font-weight: 400;
  src: local("pixel"),
  url('FreePixel.ttf') format('truetype');
}