Undertale-Inspired Twine CSS Theme

Just copy-paste this into your CSS stylesheet in your Twine game (Story -> Stylesheet). Intended for Harlowe 3. To use in a previous version of Harlowe, you can replace "tw-story" with "html".

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); /* imports the font. The original version of this used "Press Start 2P" which is also a Google font, if you prefer that. */

tw-story { /* affects the whole thing */
 background-color: black; /* makes the background black; technically this is the default for Harlowe 3 but just in case, I guess... This is leftover from when this system used Harlowe 2. */
 text-align: center; /* centers the text */
 color: white; /* makes the text white */
 font-family: "8BitOperator JVE", "8bitoperator JVE Regular", "VT323"; /* this battle system looks best in 8bitoperator JVE, which is the font used in Undertale. However, that's not a web font, so unless you have it uploaded to the website you're hosting the twine game on, it's not going to be reliable. This uses VT323 as a backup because it's a similar size, as opposed to Press Start 2P, which is significantly larger. */
  font-size: 2em; /* makes the font a little bigger bc 8bitoperator and VT323 are kind of small. */
}

tw-link { /* changes the links to the orange color used in UT */
 color: #E08B46;
}

tw-link:hover { /* makes links yellow when you hover over them */
  color: yellow;
}

tw-link.visited { /* changes link color also for links AFTER you've visited them so they aren't purple after you've visited them, which is the default. */
 color: #E08B46;
}

tw-link.visited:hover { /* makes it so that the hover color for visited links is yellow */
 color: yellow;
}

tw-enchantment.link tw-hook {  /* ditto on the hook links */
 color: #E08B46;
}

tw-enchantment.link tw-hook:hover { /* makes hook links yellow when you hover over them */
  color: yellow;
}