/* Rose Witch v.1 - a fountain of blood (in the shape of a girl) [http://wish.nu/anthy] */
/* DESKTOP 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 6rem 1rem 6rem;
  font-size: 150%;
  font-family: "Playfair Display", serif;
  word-spacing: 4rem;
  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 15vw 0 15vw; 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: 2rem 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: 80%; 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;}