/* WINGS OF HOPE v.1 - crystal dreams [http://galadriel.net/kira] */
/* DESKTOP/TABLET/MOBILE VERSION */
/* made by Kirryn (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!
      love, Kirryn

*/

html,
body {
   font-size: 16px; /* base font reset */
   margin:0;
   padding:0;
   height:100%;
   background: #dcd0e1;
}


/* scrollbar */

::-webkit-scrollbar {height:10px; width:20px;}
::-webkit-scrollbar-corner {background:#b897bf;}
::-webkit-scrollbar-track-piece {
    background-color:#dcd0e1;
    border: 0.3rem solid #dcd0e1;
}
::-webkit-scrollbar-thumb {
    width:1rem; height:1rem;
    background-color: #b897bf;
    border: 0.3rem solid #dcd0e1;
    border-radius: 20px;
}


.grid-container {
  display: grid;
  grid-template-columns: auto minmax(412px, 1031px) auto;
  grid-template-rows: max-content max-content auto max-content;
  grid-template-areas:
    ". header ."
    ". nav ."
    ". main ."
    ". footer .";
    width: 100%;
margin-top: 2rem;
margin-bottom: 2rem;
}

header { grid-area: header;
text-align: center;
background: #fff;
line-height: 0;
  box-shadow: 5px 5px 25px #b896bf;
  border-radius: 15px;
  border: 1px solid #d7cde4;}

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

nav { grid-area: nav;
text-align: center;
padding: 2rem;
word-spacing: 3rem;
font-size: 160%;
text-transform: lowercase;
font-family: 'Libre Baskerville', serif;
font-weight: normal;
text-shadow: -3px 3px 5px #baa9b1;
}

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

nav a:hover {color: #fff;
text-shadow: 1px 1px 5px #b798be, -1px -1px 5px #d4a7d0; }

main { grid-area: main;
text-align: justify;
background: #fbf7f9;
padding: 2rem;
color: #514d57;
font-family: 'Ubuntu', sans-serif;
font-size: 90%;
line-height: 185%;
  border-radius: 15px;
  border: 1px solid #d7cde4;
  box-shadow: 5px 5px 25px #b896bf;}

main a:link,
main a:visited,
main a:active { color: #e3bae1; text-decoration: none; border-bottom: 1px solid #b7a4c2; }
main a:hover {color: #b7a4c2; text-decoration: none; border-bottom: 0;}

h1 { padding-top: 0;
margin-top: 0;
font-family: 'Libre Baskerville', serif;
color: #7e6e82;
font-size: 150%;
text-shadow: -2px 2px 2px #e8e2ef;
letter-spacing: 0.1rem;
text-indent: 1rem; }

strong, b { color: #b8a8bd;
font-family: 'Libre Baskerville', serif;}
i, em { color: #a99ca7; }

footer { grid-area: footer;
text-align: center;
color: #24171a;
padding: 2rem;
font-size: 75%;
line-height: 160%;
font-family: 'Ubuntu Condensed', sans-serif;}

footer a:link,
footer a:visited,
footer a:active { color: #7e647e; text-decoration: none; }
footer a:hover {color: #fff; }

aside { width: 70%;
text-align: justify;
margin: 1rem auto 1rem auto;
background: #fdffee;
border-left: 2rem solid #ecd5e1;
color: #24171a;
padding: 1rem;
font-size: 110%;
}

aside b,
aside strong {color: #b195b5;
font-family: 'Libre Baskerville', serif;
font-size: 110%;}

aside a:link,
aside a:visited,
aside a:active {text-decoration: none;
color: #8c798f;
font-weight: bold;
border-bottom: 0;}
aside a:hover {color: #534e57;
text-decoration: none;
text-shadow: none;
border: 0;}

abbr {text-decoration: none;
border-bottom: 1px dotted #d2cade;}