/*
AWWW yeah welcome to our A E S T H E T I C
This takes the ID's and Classes in our html file, and defines how they should look.
ID's are represented as # and Classes as .

We can also set how all html elements within an id or class should look --things like div's and <a> tags

So if there's a section in our html with something like <div id='entrance'><h1>Welcome</h1></div>
Then we can set the style for the section with '#entrance{}' and for the h1 tag with "#entrance h1{}"
This makes more sense just by looking at the CSS, but I wanted to explain what you were seeing!

The second greatest boardgame, in Zach's opinion, is Friedrich.
*/

/*
  This root is some CSS magic called 'CSS Variables'.  Here, we can set different colors to custom-named variables.
  We can then reference the variables throughout the rest of the CSS.
  What this means is if we ever wanna overhaul the color scheme of our site, we just need to adjust this Root section,
  it's changes will cascade down through the rest of our styles.  For an example of this, check out the #entrance styling.
*/

:root {
    --primary-bg: brown;
    --primary-color: white;
    --secondary-bg: #f8c8a0;
    --secondary-color: #24578a;
    --secondary-link-color: teal;
    --icon-color: peachpuff;
}

#stuff {
  margin: 5vh 8vw;
}

.big-words {
  font-size: 5em;
}
/*
  Fontface is a bit of CSS upkeep.  We are using the custom charter font, which is held in our aesthetic/fonts folder.
  We want our CSS to be able to use this font, and so we have to define it, and set how to find it, with @font-face,
  so now the rest of the CSS knows what we're talking about when we talk about charter.
*/

@font-face {
    font-family: charter;
    src: url('./fonts/charter/charter_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* Now We get to the good stuff. */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 30px;
    font-family: 'charter';
}

/*
  This is our opening page.
*/
#entrance {
    height: 100vh;
    background: var(--primary-bg);
    color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#entrance h1 {
    margin: auto;
    width: 50%;
    font-size: 10vw;
}

#entrance a{
    width: 20%;
    margin: auto;
    font-size: 2em;
    color: var(--secondary-color);
}

/*
  This is the pleasant wizard meeple.
*/
#the-greeter svg{
    position: absolute;
    height: 130vh;
    fill: var(--icon-color);
    z-index: -1000;
    top: 0;
    right: 0;
}

/* Our 'home' page, after you've clicked enter */
#home {
    background: var(--secondary-bg);
    color: var(--secondary-color);
}

#home marquee {
  background: PeachPuff;
  color: maroon;
  font-size: 1.5em;
  font-family: fantasy;
  letter-spacing: 2px;
  width: 100%;
  padding: 0;
  padding-top: 0.5em;
  padding-bottom: 0.25em;
  margin: 0;
  margin-top: 0.5em;
}

#home a {
    text-decoration: none;
    color: var(--secondary-link-color);
}
#home a:hover {
    text-decoration: underline;
    letter-spacing: 2px;
}

#subscribe{
    margin-top: 2em;
    font-size: 1.2em;
}

#subscribe a {
    color: var(--primary-color);
}

#next-event {
    text-align: center;
}

#next-event .location > p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Special things */
#ps {
  color: maroon;
  font-size: 0.8em;
  border-style: solid;
  border-width: 0.1em;
  background: PeachPuff;
}

#thought {
  background-color: maroon	;
  color: PeachPuff;
}

/* Annika's Index css */
#annika-home {
  background: white;
  color: var(--secondary-link-color);
  padding: 1em 1.5em;
}

section {
  text-align: center;
}

.stars {
  text-align: center;
  padding-bottom: 1em;
}