/* MOON PIXEL POWER! v.1 - pastel pixel pretties [https://pixel.sailorcrystal.net/] */
/* made by evenstar AT gmail DOT com; licenced under Creative Commons Attribution-ShareAlike 4.0 International: http://creativecommons.org/licenses/by-sa/4.0/ */


/*
'ello there, curious bun! :D *pinches cheeks*

don't panic! you're not doing anything wrong! you are very welcome
to look at, mess around with, and learn from my code (as you should
be with anyone's, but let's not quibble...), as per the ShareAlike
Licence it is under!

!!! PLEASE *DO NOT* COPY IT VERBATIM, THOUGH !!!

this is *literally* all I ask. if you would like a CSS stylesheet of
your own made wholly by me, please contact me via evenstar@gmail.com
and we can discuss a commission! you will be respecting my work and
helping me keep my bills paid! <3

please respect this -- or don't expect me to respect you or extend
any kindness towards you.

don't be a Svenja.
don't be a Franziska.
be awesome instead.

quick caveat: be aware this code may not be perfect, because CSS
is a constantly changing beast, and I'm always learning myself!
(check out w3schools.org for tutorials and tips & tricks using the
most up-to-date CSS!)

please enjoy perusing my code, and I hope it inspires your own.
now get out there and make a wonderful webpage! <3
*/



@font-face {
	font-family: 'RPGSystem';
	src: url('RPGSystem.woff2') format('woff2'), url('RPGSystem.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: 0.5rem;
}

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

::-webkit-scrollbar-track-piece {
    background-color: #fed9f6;
}

::-webkit-scrollbar-thumb {
    background-color: #c0cbfa;
    border: 1px solid #efefff;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #fff;
    border: 1px solid #c0cbfa;
}









html, 
body {
	font-size: 16px;
	margin: 0;
	padding: 0;
	height: 100%;
	background: url(peeking.png), url(bg.png), linear-gradient(to left, #fed9f6, #efefff, #efefff, #fed9f6);
	background-repeat: no-repeat, repeat, repeat;
	background-attachment: fixed, fixed, fixed;
	background-position: bottom left, top left, top left;
	}

#myBtn {
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 99;
	font-size: 90%;
	border: none;
	outline: none;
	background-color: #000000a3;
	color: #c7b2fd82;
	cursor: pointer;
	padding: 1rem;
	border-radius: 5px;
	font-family: 'RPGSystem', cursive;
	font-weight: normal;
	transition: all 0.5s ease-in-out;
	}

#myBtn:hover {
	background-color: #620100;
	color: #ffffff;
	transition: all 0.5s ease-in-out;
	box-shadow: 0 0 10px #5ba12f;
	}


/* HEADER */

header {
	max-width: 800px;
	text-align: center;
	margin: 2rem auto 0 auto;
	}

.resize {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	padding: 0;
	animation: rotateIn; 
	animation-duration: 1s;
	}


/* NAVIGATION BAR */

nav {
    text-align: center;
    background: transparent;
    font-family: "RPGSystem", monotype;
    font-weight: normal;
    font-size: 200%;
    color: #de56c0;
    padding: 1.5rem 0.125rem;
}

nav a:link, 
nav a:visited, 
nav a:active {
	color: #6a45cc;
	margin: 0 0.5rem;
	border: 0;
	transition: all 0.6s ease;
	}

nav a:hover {
    color: #fff;
    border: 0;
	transition: all 0.6s ease;
    text-shadow:
		-1px -1px 0 #de56c0,
		1px 1px 0 #5174ff,
		-1px 1px 0 #5174ff,
		1px -1px 0 #de56c0;
	}


/* MAIN */

main {
    font-family: 'Poppins', sans-serif;
    font-size: 100%;
    color: #574589;
    line-height: 165%;
    background: linear-gradient(to left, #c0cbfa, #d6c4f7, #d1bffa);
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    text-align: justify;
    box-shadow: 10px 10px 0 #ffffffd9, 10px 10px 30px #de56c0a1;
}

main p {
    padding: 0 0 1rem 0;
	margin: 0;
	}
	
aside {
    display: grid;
    grid-template-areas: "pic deets";
    grid-template-columns: 150px auto;
    grid-template-rows: auto;
    width: 60%;
    margin: 1rem auto 2rem auto;
    background: #ffffff;
    font-family: 'Hepta Slab', sans-serif;
    border-radius: 10px;
    border-top: 1px solid #de56c0;
    border-left: 1px solid #6a45cc;
    border-right: 1px solid #6685eb;
    border-bottom: 1px solid #5e9daf;
    animation-fill-mode: backwards;
    outline: 10px solid #ffffff21;
    box-shadow: 0 0 30px #fff;
    line-height: 150%;
}

aside > div.pic {
    grid-area: pic;
    padding: 1rem;
    font-size: 80%;
    text-align: center;
    border-right: 4px double #d2c0fa;
    line-height: 120%;
}

aside > div.deets {
    grid-area: deets;
    padding: 1rem;
    text-align: justify;
    font-size: 120%;
    border-left: 2px dashed #fff;
    background: url(swing.png) bottom right no-repeat, linear-gradient(199deg, #d894fb, #a8e6f8, #fcb5ed);
    border-radius: 0 10px 10px 0;
}

.olderupdates {
	display: block;
	text-align: center;
	font-size: 70%;
	font-family: 'Comic Neue', serif;
	color: #fff;
	margin-top: 1rem;
	}
	
.olderupdates::after {
	content: "\27E1 \2027";
	margin-left: 0.5rem;
}

.olderupdates::before {
	content: "\2027 \27E1";
	margin-right: 0.5rem;
}

	
.olderupdates a:link,
.olderupdates a:visited,
.olderupdates a:active {
	color: #de56c0;
	border: 0;
	font-weight: bold;
	}
	
.olderupdates a:hover,
.olderupdates a:focus {
	color: #4c51be;
	border: 0;
	font-weight: bold;
	}

.intropic {
	display: block;
	margin: 0 auto 0.75rem auto;
    
}


/* FOOTER */

footer {
    text-align: center;
    max-width: 800px;
    font-family: 'Hepta Slab', sans-serif;
    font-size: 70%;
    color: #574589;
    line-height: 120%;
    padding: 1rem 0.25rem 2rem 0.25rem;
    margin: 3rem auto 4rem auto;
    border-top: 1px dashed #e799e1;
}

footer a:link,
footer a:visited,
footer a:active {
	color: #dd56c0;
	text-decoration: none;
	border: 0;
	}

footer a:hover {
	color: #9262ff;
	border: 0;
	}
	
footer b,
footer strong,
footer i,
footer em {
    font-family: 'Hepta Slab', sans-serif;
    color: #574589;
}


/* TEXT SEMANTICS AND ALL THAT SHITE */

h1 {
    font-family: "RPGSystem", monotype;
    color: #de56c0;
    margin: 0.5rem 0.25rem 1rem 0.25rem;
    font-size: 250%;
    font-weight: normal;
    text-align: center;
    line-height: 100%;
    text-shadow: 1px 1px 0 #fff,
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff;
}

h2 {
    font-family: 'RPGSystem', sans-serif;
    color: #9bacef;
    margin: 2rem 0.25rem 1rem 0.25rem;
    font-weight: normal;
    letter-spacing: 5px;
    text-align: center;
    font-size: 175%;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
    border-bottom: 1px dotted #fed9f6;
}
	
b, strong {
    color: #4c3094;
    letter-spacing: 2px;
    font-family: 'Comic Neue', sans-serif;
	}

b.toubold,
strong.toubold {
    color: #4c3094;
    font-family: 'Hepta Slab', sans-serif;
	}
	
i,
em { 
	color: #6a4589;
	letter-spacing: 1px;
	}

.left {
	text-align: left;
	}

.center {
	text-align: center;
	}
	
.right {
	text-align: center;
	}

.meta {
	text-align: right;
	font-size: 70%;
	font-style: italic;
	}
	
.leftfloat {
    display: inline-block;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    float: left;
}	

.rightfloat {
    display: inline-block;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    float: right;
}

a:link,
a:visited,
a:active {
    text-decoration: none;
    color: #de56c0;
    border-bottom: 1px dashed #a8e6f8;
	transition: all 0.3s ease;
}

a:hover,
a:focus {
	color: #fff;
	border-bottom: 1px dashed #de56c0;
	transition: all 0.3s ease;
	}

.linkies {
	text-align: center;
	margin: 0;
	font-size: 80%;
	}
	
.linkies img {
    margin: 0.5rem;
	filter: brightness(0.9);
	transition: all 0.3s ease;
}

.linkies img:hover {
    margin: 0.5rem;
	filter: brightness(1);
	transition: all 0.3s ease;
	box-shadow: 0 0 10px #fff;
}
	
.linkies a:link,
.linkies a:visited,
.linkies a:active {
	border: 0;
	}

.linkies a:hover {
	border: 0;
	}

.pixels {
	text-align: center;
	margin: 0 0 3rem 0;
	font-size: 80%;
	}

.pixels img {
	margin: 0.35rem;
	}

.aff {
	text-align: center;
	margin: 0;
	font-size: 80%;
	line-height: 125%;
	}
	
.pixels a:link,
.pixels a:visited,
.pixels a:active {
	border: 0;
	}

.pixels a:hover {
	border: 0;
	}

button {
	margin: 0.5rem;
	}

ol {
    list-style-type: upper-roman;
    text-indent: 0.5rem;
    line-height: 110%;
    width: 85%;
    margin: 0 auto 2rem auto;
}

ol li {
		margin-bottom: 1rem;
	}

.clique {
    text-align: center;
    display: inherit;
    width: 40%;
    font-size: 90%;
    margin: 1rem auto;
    padding: 0;
    letter-spacing: 2px;
    color: #96a9f0;
    text-shadow: 0 0 4px #fff, 0 0 8px #FFF, 0 0 12px #fff;
    border-radius: 20px;
    background: linear-gradient(65deg, #fed9f6, #efeeff);
}

@media only screen and (max-width: 600px) {
    aside {
    width: 90%;
    }
    
    html, 
    body {
	background: url(bg.png), linear-gradient(to left, #fed9f6, #efefff, #efefff, #fed9f6);
	background-repeat: repeat, repeat;
	background-attachment:fixed, fixed;
	background-position: top left, top left;
	}
}