/*
made by [Secret Santa!] exclusively for the use of Kristina @ angel-of-music.net
licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/
*/


/* SCROLLBAR */
 ::-webkit-scrollbar {
    height:0.5em;
     width: 0.5rem;
}

 ::-webkit-scrollbar-corner {
     background: #e8cbcb;
}

 ::-webkit-scrollbar-track-piece {
     background: #e8cbcb;
}

 ::-webkit-scrollbar-thumb {
     width:0.5rem;
     height:1rem;
     background: #c78e96;
     border-radius: 10px;
}

 ::-webkit-scrollbar-thumb:hover {
     width:0.5rem;
     height:1rem;
     background: #fffaf0;
}


/* MAIN */

 html, body {
     font-size: 16px; /* base font reset */
     margin:0;
     padding:0;
     height:100%;
     background-image: url(bg.png), linear-gradient(to left, #e8cbcb, #f9e7e7, #f9e7e7, #f9e7e7, #e8cbcb);
	 background-attachment: fixed, fixed;
	 background-position: top left, top center;
	 background-repeat: repeat, repeat;
}

 .container {
     display: grid;
     grid-template-columns: auto minmax(320px, 1200px) auto;
     grid-template-rows: max-content max-content auto max-content;
     margin: 0rem auto;
     height: 100vh;
     grid-template-areas: 
		". header ."
		"nav nav nav"
		". main ."
		"footer footer footer";
}


/* HEADER */

 header {
     grid-area: header;
     text-align: center;
     margin: 0;
     line-height: 0;
}

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


/* NAVIGATION BAR */

 nav {
     grid-area: nav;
     text-align: center;
     font-family: 'Lora', serif;
     font-size: 175%;
     padding: 1.25rem 0.25rem;
     margin: 2rem 0;
     transition: all 0.5s ease-in-out;
}

 nav a:link, 
 nav a:visited, 
 nav a:active {
    color: #c78e96;
     text-decoration: none;
     letter-spacing: 2px;
     text-shadow: 0 0 0;
     transition: all 0.5s ease-in-out;
     background: none;
     text-shadow: 0px 0px 3px #fffaf0;
	 margin: auto 1rem;
}

 nav a:hover {
     color: #fffaf0;
     text-decoration: none;
     text-shadow: 0px 0px 5px #ad7079;
     transition: all 0.5s ease-in-out;
     background: none;
}

/* TEXT EMBELLISHMENTS */

 strong, b {
    color: #9b939c;
     font-family: 'Lora', serif;
     letter-spacing: 1px;
     text-shadow: 0 0 0;
}

 em, i {
    color: #ad7079;
     font-family: 'Lora', serif;
     text-shadow: 0 0 0;
}

 a:link, 
 a:visited, 
 a:active {
     color: #d397a0;
     text-decoration: none;
     transition: all 0.25s ease-in-out;
}

 a:hover {
     color: #a62e47;
     text-decoration: none;
     background: none;
     transition: all 0.25s ease-in-out;
}

 h1 {
     font-family: 'Lora', serif;
     color: #fffaf0;
     font-size: 250%;
     margin: 0 0 0.5rem 0;
     text-transform: uppercase;
     line-height: 100%;
     letter-spacing: 3px;
     text-shadow: 1px 1px 1px #be6c7b, -1px -1px 1px #be6c7b, -1px 1px 1px #c78e96, 1px -1px 1px #c78e96;
}

 h1::first-letter {
     font-family: 'Monsieur La Doulaise', cursive;
     font-size: 170%;
     margin-right: 0.8rem;
}

 h2 {
     font-family: 'Lora', serif;
     color: #b24d60;
     font-size: 220%;
     margin: 2rem 0 0 0;
     text-indent: 2rem;
     line-height: 100%;
     text-shadow: 1px 1px 2px #feeedf;
}

 h2.aside {
     font-family: 'Lora', serif;
     color: #c78e96;
     font-size: 190%;
     margin: 0;
     text-indent: 0;
     letter-spacing: 1px;
     line-height: 120%;
     text-shadow: 2px 2px 4px #fbfcff;
}

 h2.aside::before {
     content: url(mask.png);
     margin-right: 0.75rem;
}
 h3 {
     font-family: 'Open Sans', sans-serif;
     color: #d397a0;
     font-size: 120%;
     margin: 2rem 0 0.25rem 0;
     letter-spacing: 6px;
     line-height: 140%;
     text-align: left;
     text-indent: 4rem;
     border-bottom: 1px dashed #e8cbcb;
     text-shadow: 1px -1px 3px #feeedf;
}

blockquote {
	display: block;
	width: 90%;
	margin: 2rem auto;
	font-family: 'Lora', serif;
	font-size: 110%;
	color: #48473f;
	font-style: italic;	
	letter-spacing: 1px;
}


/* MAIN TEXT AREA */

 main {
     grid-area: main;
     font-family: 'Open Sans', sans-serif;
     text-align: justify;
     padding: 0 2rem;
     color: #605b60;
     font-size: 100%;
     line-height: 200%;
}

 main p {
    margin: 0 0 0.5rem 0;
}

 ul {
    list-style-image: url(rosebullet.png);
}

 ol {
    list-style: upper-roman;
}


/* ASIDE */

 aside {
     width: 75%;
     text-align: justify;
     margin: 2rem auto;
     font-size: 120%;
     display: block;
     color: #2e2f2b;
     background: #fef1e3 url(asidebg.png) bottom right no-repeat;
     padding: 1rem;
     box-shadow: 2px 2px 6px #cd8e98;
     border-radius: 20px 0 20px 0;
}

 aside b, 
 aside strong {
    color: #873b4a;
     letter-spacing: 1px;
}

 aside a:link, 
 aside a:visited, 
 aside a:active {
    color: #b44d60;
     border-bottom: 1px dashed #e8cbcb;
     background: transparent;
}
 
 aside a:hover {
    color: #e8cbcb;
     border-bottom: 0;
     background: transparent;
}


/* FOOTER */

 footer {
     grid-area: footer;
     font-family: 'Lora', serif;
     text-align: center;
     color: #b5b2b0;
     font-size: 80%;
     padding: 4rem 2rem;
}

 footer a:link, 
 footer a:visited, 
 footer a:active {
     text-decoration: none;
     background: transparent;
}

 footer a:hover {
     color: #716b69;
}

 footer em {
    color: #fff;
}

footer b {
	letter-spacing: normal;
}

 .separator {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 0 auto 2rem auto;
     padding: 0;
}

/* TABLET SIZING */
 @media only screen and (max-width: 799px) {
	 
	nav {
	grid-area: nav;
	font-size: 125%;
	margin: 0.5rem 0 2rem 0;
	}

	h1 {
	font-size: 200%;
	}

	h1::first-letter {
	font-size: 130%;
	margin-right: 1rem;
	}
	
	h2 {
	font-size: 150%;
	text-indent: 1rem;
	}
	
	h3 {
	text-indent: 2rem;
	}
	
	footer {
	margin: 0;
	padding: 0.5rem;	
	}
 
	 .separator {
     margin: 1rem auto;
	}
}

/* MOBILE SIZING */
 @media only screen and (max-width: 455px) {
	 
	nav {
		grid-area: nav;
		font-size: 125%;
		margin: 0.4rem 0 1rem 0;
	}

	nav a:link, 
	nav a:visited, 
	nav a:active {
		margin: auto 0.5rem;
	}
}