/* HOW SHE SPARKLES v.1 - in a lilac wood [http://unicorn.wings.nu/] */
/* DESKTOP/TABLET/MOBILE VERSION */
/* made by evenstar AT gmail DOT com; 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: #cfc9fc;}

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

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

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



/* THE MAIN STUFF */

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

.grid-container {
  display: grid;
  grid-template-columns: auto minmax(320px, 1300px) 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 .";
}

/* TEXT EMBELLISHMENTS */

/* HEADER */

header { grid-area: header;
text-align: center;
margin: 0;
 padding: 8rem 0 0 0;
}
 
 .heart {color: #fff; }

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

/* NAVIGATION BAR */

nav { grid-area: nav;
text-align: center;
font-family: 'Libre Baskerville', serif;
word-spacing: 2rem;
padding: 1.25rem 0.25rem;
margin: 2rem 0;
font-weight: bold;
    transition: all 0.5s ease-in-out;}

nav a:link,
nav a:visited,
nav a:active {color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 150%;
    text-shadow: 0 0 0;
    transition: all 0.5s ease-in-out;
	background: transparent;
}

nav a:hover {color: #ddcdf8;
    text-decoration: none;
    font-size: 150%;
    text-shadow: 0px 0px 5px #6954c4;
    transition: all 0.5s ease-in-out;
	background: transparent;
}

strong, b {color: #5966c7;
text-shadow: 0 0 0;}

em, i {color: #7c63a6;
text-shadow: 0 0 0;}

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

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

/* MAIN TEXT AREA */

h1 {
     font-family: 'Poppins', sans-serif;
 font-size: 500%;
 color: #cfc9fc;
 letter-spacing: 10px;
    margin: 20vh 0 0 0;
    line-height: 100%;
    text-shadow: 1px 1px 1px #a07fed, -1px -1px 1px #a07fed, -1px 1px 1px #a07fed, 1px -1px 1px #a07fed;
	}
	

h2 {
	font-family: 'Poppins', sans-serif;
    color: #674ec0;
    font-size: 200%;
    margin: 1rem 0 0 0;
    letter-spacing: 20px;
    line-height: 100%;
    text-shadow: 1px 1px 2px #ffffff;}


h3 {
    font-family: 'Poppins', sans-serif;
    color: #7c71d1;
    font-size: 120%;
    margin: 2rem 0 0.25rem 0;
    letter-spacing: 6px;
    line-height: 100%;
    text-align: left;
	text-indent: 4rem;
    border-bottom: 1px dashed #e0ddfd;}

main { grid-area: main;
font-family: 'Poppins', sans-serif;
text-align: center;
padding: 0 2rem;
color: #fff;
font-size: 100%;
line-height: 200%;}

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

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

.affs {
    text-align: center;
    font-size: 85%;
    line-height: 160%;
    letter-spacing: 2px;
	margin: 1rem auto;
	display: block;
	width: 90%;
}

.affs a:link,
.affs a:visited,
.affs a:active {color: #fff;
background: transparent;}
.affs a:hover {color: #7778be;
background: transparent;}

.affs img {
    margin: 0.5rem;
    box-shadow: 0px 0px 5px #fff;
}

.cliques {
    text-align: center;
    font-size: 110%;
    letter-spacing: 1px;
font-family: 'Libre Baskerville', serif;
margin: 2rem 0;
 font-size: 110%;
}




/* FOOTER */

footer { grid-area: footer;
font-family: 'Poppins', sans-serif;
text-align: center;
color: #ada8d3;
font-size: 70%;
padding-bottom: 2rem;}

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

footer a:hover {
color: #fff;}


/* TABLET SIZING */

@media only screen and (max-width: 799px) {



}

/* MOBILE SIZING */

@media only screen and (max-width: 414px) {


}