/* WILLFUL SPRITE v.1 - fierce and free [http://galadriel.net/oona/] */
/* RESPONSIVE VERSION */
/* made by Rin (evenstar AT gmail DOT com); licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/ */


/*

      hand-coding is learned by viewing already existing code. end of story.
      you are so, so welcome to look at, mess around with, and learn from my code (although
      not copy it verbatim, but honestly, who's going to do that?), with a caveat:
      be aware it may not be perfect, because coding is a consistent learning process for me!

      that's literally it!
      please enjoy perusing my code, and I hope it inspires your own!
      love, Rin

*/

html,
body {
   font-size: 16px; /* base font reset */
   margin:0;
   padding:0;
   height:100%;
   background: #5e678d url(bg.png) repeat;
}

.grid-container {
  display: grid;
  grid-template-columns: 29vw auto;
  grid-template-rows: auto max-content;
  width: 100%;
  grid-template-areas: "header main"
                       "header footer";
}

header { grid-area: header;}

nav { text-align: center; word-spacing: 2rem; font-family: 'Princess Sofia', serif; font-size: 200%; font-weight: normal; padding: 0.5rem; width: 80%; margin-right: auto; margin-left: auto;}
nav a:link,
nav a:visited,
nav a:active {text-decoration: none; color: #eefaf0; text-shadow: none; }
nav a:hover {color: #fde5bf;}

main { grid-area: main; padding: 1.5vw 3vw 1.5vw 0; text-align: justify; color: #c7cdd3; font-family: 'Libre Baskerville', serif; line-height: 175%; font-size: 100%;}

main a:link,
main a:visited,
main a:active {text-decoration: none; color: #f5e7c6; }

main a:hover {color: #e9fff8; text-shadow: 2px 2px 5px #3b6688;}

main b,
main strong {color: #95899a;}

main i,
main em {color: #9d98a7; }

footer { grid-area: footer; text-align: center; font-size: 70%; font-family: 'Ubuntu Condensed', sans-serif; color: #afbbc5;}
footer a:link,
footer a:visited,
footer a:active {text-decoration: none; color: #9590a2; }
footer a:hover {color: #8c7da5;}

aside {width: 75%; margin: 2rem auto 2rem auto; padding: 1rem; font-size: 110%; background: url(asidebg.png) repeat; color: #eadaca; line-height: 150%;}
aside b,
aside strong {color: #6c607f; font-family: 'Libre Baskerville', serif; }
aside i,
aside em {color: #000; }
aside a:link,
aside a:visited,
aside a:active {color: #545175; }
aside a:hover {color: #2e2a5a; text-shadow: none;}

h1 {font-family: 'Princess Sofia', cursive; font-size: 300%; color: #fbfbe1; margin-bottom: 0; padding-bottom: 1.5rem; display: block; text-align: left; text-shadow: -3px 3px 5px #43446b, -2px 2px 7px #43446b; font-weight: normal; text-indent: 2rem;
    transform: rotate(-3deg); }

.resize {
  max-width: 100%;
  height: auto;
  margin: 0; padding: 0;
}

abbr {
    text-decoration: none;
    border-bottom: 1px dotted #939da6;
    cursor: help;
}