/* Here are a few variables I've declared! These are things I thought you might
   want to change and didn't want you to have to crawl through css yourself if
   you're unfamiliar with it, or values which are used in multiple places and it's
   just easier to declare them once and do var(--variable-name) to reference them,
   so I only have to change them in one place later. Feel free to change pretty
    much any of these if you want your game to look different! */
:root {
    --bg-color: #121352;
    --vertical-margin: 5em;
    --font-size: 32px;
    --font-style: "Garamond", Georgia, "Times New Roman", serif;
    --main-text-color: #ffffff;
    --link-color: var(--main-text-color);
    --link-underline-color: #fafc9c;
    --link-hover-color: var(--link-underline-color);
    --link-underline-height: 2px;
}

/* This is very basic; it just sets the text font and color. It's a bit
   confusing, but "color" here is referring to the text color, not the
   background color. Background color has its own property. They maybe should have
   just called it text-color but whatever. */
body {
	font: var(--font-size) var(--font-style); 
	color: var(--main-text-color);
    background-color: var(--bg-color);
}

/* The container that holds all the game text has id "gameArea", so we prefix
   that with a # to select just the element with that ID. We set the vertical
   margin, which creates some vertical space between the top of the page
   and the text. Then, we set the horizontal margin to auto, which functionally
   centers the container horizontally within the page. This is nice because then
   the right side doesn't have a bunch of unused space with none on the left; it's
   easier to read. This wouldn't do anything if we hadn't set the width though,
   which literally tells the browser how wide the container should be. The 50%
   here is relative to the window size. Feel free to play around with it!  */
#gameArea {
    margin: var(--vertical-margin) auto;
    width: 50%;
}

/* Down here, we style the links. We set their color and replace the default
   underline with a custom one. The custom one is better because you can style
   it separately from the link text itself, and it also makes itself lower to
   avoid overlapping letters that hang under the line like g, j, etc. Right
   now, I have it set so that links are the same color as the default text,
   with a colored underline, and the link changes to the same color as the
   underline when you hover over it. I thought that was good for readability
   while making links still distinctly recognizable, but if you want to change
   that go ahead!*/
a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: var(--link-underline-height) solid var(--link-underline-color);
    /* This is an evil hack because the way that tinychoice implements line
       breaking SUCKS. I would rather not do this but if I didn't, the links
       would be stacked together in a way that makes them hard to read. Feel
       free to change this if you want. The default is 1 but it's bad. I would
       not recommend decreasing this past 1.5.*/
    line-height: 1.5;
}

/* This changes the styling for links when they're hovered. Mostly the same as
   the default styling, with different variables. */
a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
    border-bottom: var(--link-underline-height) solid var(--link-underline-color);
}