/* ONE GIRL REVOLUTION v.1 - far beyond the ends of the world [http://wish.nu/utena] */
/* 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;
}

.grid-container {
  display: grid;
  grid-template-columns: auto minmax(320px, 560px) auto;
  grid-template-rows: max-content max-content auto max-content;
  width: 100%;
  height: 100%;
  grid-template-areas: "nav nav nav" ". header ." ". main ." ". footer .";
}

nav { grid-area: nav;  text-align: center; background: #ce578f; font-family: "Questrial", sans-serif; color: #ce578f; font-size: 120%; padding: 1rem 0 1rem 0; word-spacing: 1rem; text-transform: uppercase; letter-spacing: 0.1rem;}
nav a:link,
nav a:visited,
nav a:active {text-decoration: none; color: #fff;}
nav a:hover {color: #f4e086;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;}

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

main { grid-area: main; text-align: justify; font-family: "Ubuntu", sans-serif; font-size: 80%; line-height: 200%; color: #969696; }

main a:link,
main a:visited,
main a:active {text-decoration: none; color: #ce578f; border-bottom: 1px solid #f4e086;}
main a:hover {color: #ce578f; background: #f4e086;     -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;}

main strong {font-family: "Playfair Display", serif; color: #f6afea; text-transform: uppercase; }
main em {color: #000; letter-spacing: 0.05rem;}

h1 {background: url(signet.png) top left no-repeat; font-family: "Playfair Display", serif; font-size: 130%; text-indent: 4rem; color: #000; text-transform: uppercase; display: block; width: 100%; padding-bottom: 2rem;}
h1::first-letter {font-family: "Questrial", sans-serif; color: #ce578f; font-size: 120%; }

h2 {text-indent: 3.5rem;  font-family: "Playfair Display", serif; font-size: 100%; color: #d0d0d0; font-style: italic; margin-top: -3rem; font-weight: normal; letter-spacing: 0.10rem;}

aside {display: block; width: 75%; margin: 1.5rem auto 1.5rem auto; background: #fce3f7 url(rosebg.png) repeat; border-left: 2rem solid #ce578f; padding: 1rem; box-shadow: 2px 2px 20px #f4e086; font-size: 120%;}
aside b, aside strong {font-family: "Questrial", sans-serif; color: #000; text-transform: capitalize;}
aside a:link,
aside a:visited,
aside a:active {text-decoration: none; color: #ba4378; border: 0;}
aside a:hover {color: #f3ad1c; background: none;
     -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;}

footer { grid-area: footer;  text-align: left; font-family: "Ubuntu Condensed", sans-serif; font-size: 75%; margin-top: 2rem; padding-bottom: 1rem; padding-top: 1rem; line-height: 200%; border-top: 1px dotted #d0d0d0; color: #b4b4b4;}
footer a:link,
footer a:visited,
footer a:active {text-decoration: none; color: #f6afea; }
footer a:hover {color: #000; }

.footerimg { float: right; padding-left: 2rem; padding-bottom: 1rem; }