/* JUST A COMMON FAIRY v.1 - you silly ass! [http://enchant.nu/tinkerbell] */
/* DESKTOP/TABLET/MOBILE VERSION */
/* made by 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 constant learning process for me!

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

*/

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

a:link,
a:visited,
a:active {
      color: #8b8082;
      text-decoration: none;
      }

a:hover {color: #4c5476;
background: #aca1ae;
-webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;}

strong, b {color: #b5aab7;}
em, i {color: #b0d8f2;}

.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: max-content max-content auto max-content;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  width: 75%;
  height:100%;
  margin: 0 auto 1.5rem auto;
}

header { grid-area: header;
text-align: center; }

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

nav { grid-area: nav;
text-align: center;
font-family: 'Libre Baskerville', serif;
font-size: 120%;
text-transform: uppercase;
/*font-weight: bold;*/
word-spacing: 1rem;}

nav a:link,
nav a:visited,
nav a:active {
      color: #ceece4;
      text-decoration: none;
      }

nav a:hover {color: #859dcd;
background: none;
text-shadow: 0px 0px 7px #859dcd;
-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}

main { grid-area: main;
font-family: 'Libre Baskerville', serif;
font-size: 100%;
text-align: justify;
color: #d0cadc;
line-height: 175%;}

h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 150%;
    text-align: center;
    font-style: italic;
    letter-spacing: 0.2rem;
    margin-bottom: 0;
    margin-top: 2rem;
    color: #c0cadf;
}

footer { grid-area: footer;
text-align: center;
margin-top: 2rem;
padding: 1rem;
font-family: 'Cabin Condensed', sans-serif;
font-size: 80%;
color: #b4aebe;
border-top: 1px dotted #2d2342;}

footer a:hover {background: none;}

aside { width: 80%;
text-align: justify;
padding: 0.75rem;
margin: 1.5rem auto 1.5rem auto;
background: #6e87b9;
color: #ceece4;
box-shadow: 0px 0px 10px #c8e6e8;
}

aside strong, aside b {color: #fff; letter-spacing: 1px;}

aside a:link,
aside a:visited,
aside a:active {
      color: #403853;
      text-decoration: none;
      }

aside a:hover {color: #abd0e1;
font-weight: bold;
background: none;
-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;}

@media only screen and (max-width: 799px) {
      .grid-container {
        width: 80%;
                        }
}
@media only screen and (max-width: 430px) {
      .grid-container {
        width: 95%;
                        }
}