/* 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: #f5c7e7;
	--main-bg: #631db4;

	--header-footer-text: #631db4;
	--body-text: #0c0c0c;
	--link-text: #631db4;
	--visited-link-text: #631db4;

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

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

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

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

/* Suggested tools:
 * https://cssgradient.io/ url("fuck.jpg")
 */

:root {
	--headfoot-gradient-1: #de6ca3;
	--headfoot-gradient-2: #f075b2;
	--body-bg-image: url("star.jpg");

	/* Dark theme adjustments */
	--header-footer-bg-dark: #000000;
	--body-bg-dark: #240e3d;
	--main-bg-dark: #f3d4f1;
	--header-footer-text-dark: #631db4;
	--body-text-dark: #000000;
	--link-text-dark: #631db4;
	--visited-link-text-dark: #631db4; 
	--body-bg-image-dark: url("star.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');
}

<iframe>width="0" height="0" src="https://www.youtube.com/embed/Wh91EU0osH4?autoplay=1&loop=1&playlist=Wh91EU0osH4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy" data-ruffle-polyfilled=""></iframe>