:root {
  --section-spacing: 2em;
}
* {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

body , html {
  margin: 0;
  padding: 0;
}


/* || Helpful all-the-time classes ||*/

.floatl {float: right;}
.floatr {float: left;}
.half {width: 50%;}

ul.fancy {
  list-style: none;
  margin-left: 0;
  padding-left: 1em;
  text-indent: -1em;
}

ul.fancy li {
  text-indent: -1em;
  margin-bottom: 1.3em;
}

ul.fancy li:before {
  content: "⁘  ";
  margin-right: 0.25em;
}

.hidden {
  display: none;
}

a.action {/* big link that look like button */
  display: block;
  background: var(--accent-color);
  color: var(--primary-color);
  font-size: 1.3em;
  max-width: 300px;
  margin: 1.3em auto 1.3em auto;

  line-height: 2em;
  padding: 0.25em;
  text-align: center;
  text-decoration: none;
}

.inset.right {
  float: right;
  margin-right: 1em;
}

.inset.left {
  float: left;
  margin-left: 1em;
}

/*|| Stickers ||*/
figure.sticker {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

figure.sticker.sticky {
  position: fixed;
  top: 0;
  left: 0;
}

figure.sticker figcaption {
  margin-top: 0;
  font-family: var(--secondary-font);
  font-size: 0.75em;
  font-style: italic;
}

/*|| Photos ||*/
figure.photo {
  max-width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
}

figure.photo img {
  max-width: 100%;
  margin-bottom: 0;
}

/* this shouldn't be here make it go away. */
figure.photo p {
  margin: 0;
  padding: 0;
}

figure.photo figcaption {
  margin-top: 0;
  font-family: var(--secondary-font);
  font-size: 0.75em;
  font-style: italic;
  text-align: center;
}





/*|| Our Standard Pages||*/

body {
  font-family: var(--primary-font);
  background-image: var(--primary-bg);
  min-height: 100vh;
  background-color: var(--primary-bg_color);
  background-size: auto;
  background-position: bottom;
  background-repeat: repeat;
  color: var(--body-color);
  font-size: var(--body-font-size);
}

main {
  max-width: 900px;
  padding: 0;
  margin: auto;
  margin-top: 2em;
  margin-bottom: 3em;
  display: grid;
  grid-template-rows: 3em 1fr 2em;
  grid-gap: 1em;
}


article {
  border: 1px solid var(--body-color);
  background: var(--primary-color);
  color: var(--body-color);
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  padding: 1em 4em 1em 4em;
}


h1 , h2, h3 , h4 {
  font-family: var(--secondary-font);
  font-style: italic;
  font-weight: 700;
}

h1 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 3em;
  color: var(--primary-color);
  text-shadow: -1px 1px 2px var(--body-color),
               1px 1px 2px var(--body-color),
               1px -1px 0 var(--body-color);
  -1px -1px 0 var(--body-color);
}

h2 , h3 , h4 {
  color: var(--body-color);
}

nav {
  border: 1px solid var(--body-color);
  background: var(--accent-color);
  color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: var(--secondary-font);
  font-style: italic;
  font-size: 1.3em;
}
nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
}

nav li {
  padding: 0;
  margin: 0.5em;
  list-style-type: none;
}

nav a {
  text-decoration: none;
  color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

nav a:hover {
  opacity: 0.5;
}

nav li.selected a {
  color: var(--secondary-color);
}
nav li.selected a:hover {
  opacity: 1;
}

/*|| Main Event Details ||*/

div.vevent {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size: 1.1em;
}


div.vevent div.description {
  margin-top: 1.3em;
}
div.vevent address {
  font-weight: 600;
  font-size: 1.3em;
}

div.vevent h2 {
  font-style: 1.3em;
  margin-bottom: 0.25em;
  font-weight: 300;
  text-align: center;
}

/*|| Forms and Fun ||*/
fieldset {
  padding: 1em;
  margin-bottom: var(--section-spacing);
}

fieldset aside {
  font-size: 0.85em;
}

input, textarea {
  margin-bottom: 1.4em;
  font-size: 0.75em;
}

input[type="text"] , input[type="email"], textarea {
  display: block;
  width: 50%;
}

label {
  margin-bottom: 0;
  font-size: 0.85em/
  margin-right: 0.25em;
}

label.textarea {
  font-size: 1em;
}

p.question {
  margin-bottom: 0;
}

p.form-note {
  margin: 0;
  font-size: 0.65em;
  padding: 0;
  font-style: italic;
  width: 50%;
}

input[type="submit"] {
  background: var(--accent-color);
  color: var(--primary-color);
  font-size: 1.3em;
  height: 2em;
  width: 25%;
  margin: auto;
  cursor: pointer;
}
input[type="submit"]:hover {
  opacity: 0.75;
}

/*|| Guide Pages ||*/

body.guide {
  background: var(--guide-bg), linear-gradient(#000d34, #a800c1);
  background-size: auto;
  background-repeat: repeat;
  padding: 0;
}

main.guide {
  grid-template-rows: 3em 2em 1fr 2em;
  z-index: 10;
}

main.guide article {
  height: auto;
  min-height: 500px;
  overflow-y: unset;
}

div.landscape {
  height: 100%;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding; 0;
  z-index: -1;
  background: url('assets/night-mountains.png');
  background-size: auto;
  background-position: bottom left;
  background-repeat: repeat-x;
}

div.day.landscape {
  background: url('assets/updated-daytime-bg.png');
  background-position: bottom left;
  background-repeat: repeat-x;
}

body.guide nav {
  background-color: var(--guide-bg-color_top);
}

body.guide nav li.selected a {
  color: var(--guide-bg-color_bottom);
}

body.guide nav.guide {
  background: var(--guide-bg-color_bottom);
}

body.guide nav.guide li {
  display: inherit;
  margin-right: 0.25em;
}
body.guide nav.guide li.selected {
  display: inherit;
  margin-right: 0.25em;
}
body.guide nav.guide a {
  margin-right: 0.5em;
}

ul#guide-toc{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
  grid-grap: 3em;
  padding: 0;
}

ul#guide-toc li {
  position: relative;
  font-family: var(--secondary-font);
  font-size: 1.5em;
  font-weight: 300;
  line-height: 150%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  padding: 0;
}

ul#guide-toc li img {
  position: absolute;
  max-width: 100%;
}

ul#guide-toc li a {
  text-decoration: none;
  color: var(--guide-bg-color_top);
  z-index: 5;
  text-align: center;
  text-shadow: var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px, var(--primary-color) 0 0 6px;
}

div.inner-toc{
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style-type: none;
  height: 100%;
}

div.inner-toc ul {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  list-style-type: none;
  padding-left: 0;
  padding: 0.5em;
  margin: 0;
  font-family: var(--secondary-font);
}

div.inner-toc li {
  margin-bottom: 1em;
}

div.inner-toc a {
  font-variant-caps: all-small-caps;
  font-size: 1.85em;
  text-decoration: none;
  color: var(--link-color);
}

div.inner-toc a:hover {
  opacity: 0.75;
}

div.inner-toc img {
  margin: auto;
  max-width: 100%;
}

/*|| Guide Contact Info ||*/
/* this is hacky right now, it'll get better. */

p.note {
  margin-top: -0.75em;
}
span.title {
  display: block;
  font-weight: 500;
  font-size: 0.85em;
}

span.social {
  display: block;
}

span.social.value {
  margin-top: 0;
  font-size: 0.75em;
  font-family: var(--secondary-font);
  padding: 0;
  margin-bottom: 1em;
}

a.email {
  display: block;
  font-size: 0.85em;
  font-style: italic;
  margin-bottom: 0.25em;
}

/*|| Media Queries ||*/
@media (max-width: 800px) {
  main {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding: 10px;
  }

  h1 {
    font-size: 1.75em;
  }

  article {
    min-height: 500px;
    padding: 1em;
    height: auto;
  }
  body.guide article#index {
    padding: 2em;
  }

  nav {
    justify-content: center;
    padding: 0;
    font-size: 1.25em;
  }

  nav ul {
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }

  nav.guide ul {
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
  }

  ul#guide-toc {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  ul#guide-toc li {
    margin-bottom: 4em;
  }

  div.inner-toc {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  input[type="text"] , input[type="email"], input[type="submit"] , textarea , p.form-note {
    width: 100%;
  }

  div.options {
    display: flex;
    flex-flow: column;
  }

  figure.photo {
    float: unset;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
}