/* ANYTHING BUT MIRACLES v.1 - dreams never do [http://wish.nu/juri] */
/* DESKTOP/TABLET/MOBILE 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: #fff url(bg.png) repeat;
}

.grid-container {
  display: grid;
  grid-template-columns: auto minmax(320px, 900px) auto;
  grid-template-rows: repeat(2, max-content) auto max-content;
  gap: 0px 0px;
  grid-template-areas: "nav nav nav" "header header header" ". main ." ". footer .";
}

nav { grid-area: nav;  background: #eda567; text-align: center; padding-top: 1rem; padding-bottom: 1rem; word-spacing: 2rem;  font-family: 'Playfair Display SC', serif; text-transform: uppercase; font-weight: bold; font-size: 130%; position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; border-bottom: 1px solid #df6a3d;
}

nav a:link,
nav a:visited,
nav a:active {text-decoration: none; color: #ede7ee;}
nav a:hover {    -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;
    color: #e26b47;
    text-shadow: 0px 0px 15px #fff;}

header { grid-area: header; background: #f4c18e; text-align: center; line-height: 0; border-bottom: 1px solid #df6a3d;}

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

main { grid-area: main; text-align: justify; font-family: 'Ubuntu', sans-serif; color: #a4675b; line-height: 200%; font-size: 85%; padding: 0 1rem 0 1rem;}

main a:link,
main a:visited,
main a:active {text-decoration: none; color: #f2a720;
    text-shadow: 1px 1px 1px #8b565a; }
main a:hover {color: #e58239; text-shadow: 1px 1px 1px #ede7ee; }


h1 { padding-top: 1rem; font-size: 170%; letter-spacing: 0.1rem; color: #ede7ee; font-family: 'Playfair Display SC', serif; text-shadow: -1px -1px 1px #b18b65; }
h1::first-letter {
    color: #e98090;
    letter-spacing: 0.5rem;
    font-family: 'Great Vibes', cursive;
    font-size: 200%;
    font-weight: bold;
    text-shadow: -1px -1px 3px #ede7ee, 1px -1px 3px #ede7ee, -1px 1px 3px #ede7ee, 1px 1px 3px #ede7ee;
}

em, i {color: #e98090; letter-spacing: 0.05rem;}
b, strong {color: #da6a37; font-family: 'Playfair Display', serif;}

aside {display: block; width: 75%; background: url(asidebg.png) right bottom no-repeat, url(headerbg.png) repeat; padding: 1rem; margin: 2rem auto 2rem auto; box-shadow: -3px -3px 5px #b18b65; font-size: 110%; font-family: 'Playfair Display', serif;}

aside a:link,
aside a:visited,
aside a:active {text-decoration: none; color: #e26b47; text-shadow: none;}
aside a:hover {color: #d96a34; text-shadow: none; border-bottom: 1px dotted #edc867;}

aside b, aside strong {color: #ede7ee; letter-spacing: 0.05rem; font-family: 'Playfair Display SC', serif; text-shadow: -1px -1px 2px #b18b65;}

footer { border-top: 1px dotted #fff; grid-area: footer; text-align: center; font-size: 65%; margin-top: 1.5rem; padding: 0.5rem 1rem 0 1rem; padding-bottom: 2rem; color: #b18b65; font-family: 'Ubuntu', serif;}

footer em, footer i {color: #b18b65; letter-spacing: normal;}
footer a:link,
footer a:visited,
footer a:active {text-decoration: none; color: #df6a3d;
    text-shadow: none; font-weight: normal; }
footer a:hover {color: #5b3d37; text-shadow: none; }



@media only screen and (max-width: 499px) {
      aside {background: url(headerbg.png) repeat; line-height: 150%;}
      nav { font-size: 110%;}
}