/* 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: #de6ca3;
	--body-bg: #31233d;
	--main-bg: #31233d;

	--header-footer-text: #fff1de;
	--body-text: #fff1de;
	--link-text: #fad4a0;
	--visited-link-text: #766087;

	--focus-outline: #655275;
	--border-color: #655275;

	--body-font: "Arial";
	--title-font: "Courier New";
}

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

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

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

:root {
	--headfoot-gradient-1: #655275;
	--headfoot-gradient-2: #655275;
	--body-bg-image: url("graphics/background.jpg");

	/* Dark theme adjustments */
	--header-footer-bg-dark: #655275;
	--body-bg-dark: #31233d;
	--main-bg-dark: #31233d;
	--header-footer-text-dark: #d3d3d3;
	--body-text-dark: #fff1de;
	--link-text-dark: #fad4a0;
	--visited-link-text-dark: #766087;
	--body-bg-image-dark: url("graphics/background.jpg");
}

/* Title font definition */
header h1 {font-family: "Dyslexie", "OpenDyslexic", 'GrapeNuts', 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: 'GrapeNuts';
  font-style: normal;
  font-weight: 400;
  src: local("GrapeNuts Regular"),
  url('./fonts/GrapeNuts-Regular.ttf') format('truetype');
}