/* Rose Witch v.1 - a fountain of blood (in the shape of a girl) [http://wish.nu/anthy] */
/* MOBILE VERSION */
/* made by Rin (rin AT 315 DOT network); 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;
   background: #f2e2d8 url(bg.png) repeat;
}

.grid-container {
text-align: center;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: max-content max-content 1fr max-content;
  width: 100%;
  height: 100vh;
  grid-template-areas: "nav nav nav" "header header header" "main main main" "footer footer footer";
  margin-left: auto;
  margin-right: auto;
}

header { grid-area: header; text-align: center; margin: 0; padding: 0; line-height: 0; }
.resize {
  max-width: 100%;
  height: auto;
  margin: 0; padding: 0;
}

nav {
  grid-area: nav;
  background: #000;
  text-align: center;
  padding: 1rem 3rem 1rem 3rem;
  font-size: 110%;
  font-family: "Playfair Display", serif;
  word-spacing: 2rem;
  font-style: italic;
}
nav a:hover {background: transparent; color: #d51c2d; }


main { grid-area: main; font-size: 90%; font-family: 'Ubuntu', sans-serif; text-align: justify; color: #473c5c; padding: 0rem 9vw 0 9vw; line-height: 1.7rem; line-height: 1.7rem;}

h1 { text-align: left;
    font-size: 140%;
    font-family: 'Playfair Display', serif;
    color: #a284a3;
    letter-spacing: 0.15rem;
    background: url(headerbg.png) left bottom no-repeat;
    font-weight: normal;
    font-weight: bold;
    font-style: italic;
    }

h2 {
    text-align: left;
    font-size: 100%;
    font-family: 'Playfair Display', serif;
    color: #fff;
    letter-spacing: 0.25rem;
    font-weight: normal;
    margin-top: -0.8rem;
    padding-top: 0;
    font-weight: bold;
    text-indent: 7rem;
   text-shadow: -1px -1px 2px #b35351, 1px -1px 2px #b35351, -1px 1px 2px #b35351, 1px 1px 2px #b35351;
}

a:link,
a:visited,
a:active { color: #a989aa; text-decoration: none; }
a:hover {color: #fff; text-decoration: none; background: #ea9cab;}

em { color: #5e256a; }
i { color: #5e256a; }
strong { color: #962c35; font-family: 'Playfair Display', serif;}
b { color: #962c35;  font-family: 'Playfair Display', serif; }



aside { width: 75%; margin-left: auto; margin-right: auto; padding: 1rem; font-family: 'Ubuntu', sans-serif; font-size: 100%; text-align: justify; line-height: 1.5rem; color: #5e4f6c; margin-top: 2rem; margin-bottom: 2rem; font-size: 110%; border-left: 0.25rem solid #a17ea5;
       background: #ea9cab;
      background-image: url(rose.png);
      background-position: right top;
      background-repeat: no-repeat;}
aside a:link,
aside a:visited,
aside a:active { color: #fff; text-decoration: none; letter-spacing: 0.05rem; border-bottom: 0px; }
aside a:hover {color: #e8ebaa; text-decoration: none; border-bottom: 0px; background: none;}
aside strong { color: #fff; font-weight: bold; font-size: 100%; letter-spacing: 0.1rem;
   text-shadow: -1px -1px 2px #b35351, 1px -1px 2px #b35351, -1px 1px 2px #b35351, 1px 1px 2px #b35351;
    text-transform: uppercase;}


footer { background: #b9aaa9; grid-area: footer; font-size: 70%; font-family: 'Playfair Display', serif; text-align: center; padding: 1.5rem; line-height: 1rem; color: #7b6b63; margin-top: 2rem;}
footer a:link,
footer a:visited,
footer a:active { color: #ab0001; font-weight: normal; background: none;}
footer a:hover {color: #806483; border-bottom: 0px; }
footer em {color: #635650;}