/* WINGS v.8 - springin' into spring [https://wings.nu/] */

/* made by the webmistress (evenstar AT gmail DOT com); licenced under Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International Licence: https://creativecommons.org/licenses/by-nc-nd/4.0/ */

/* erstellt von die Webmistress (evenstar AT gmail PUNKT com); dieser Code ist unter einer Namensnennung - Nicht kommerziell - Keine Bearbeitungen 4.0 International Lizenz lizenziert: https://creativecommons.org/licenses/by-nc-nd/4.0/deed.de */


/*

      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, Rin

*/


/* SCROLLBAR */

	/* none this time */


/* THE MAIN STUFF */

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

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


/* HEADER */

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

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


/* NAVIGATION BAR */

nav {
    grid-area: nav;
    text-align: center;
    padding: 0 0 2.5rem 0;
    font-weight: normal;
    color: #c059dd;
    font-size: 250%;
    line-height: 110%;
	font-family: 'Caveat Brush', handwriting;
}

nav a:link,
nav a:visited,
nav a:active {
	color: #90c16c; 
	border: 0;
	display: inline-block;
    margin-left: 1rem;
    margin-right: 1rem;
	}

nav a:hover {
    color: #d1e3f8;
    transition: all 0.25s ease-in-out;
    text-shadow: 1px -1px 3px #24a021, -1px 1px 1px #87b2da, 1px 1px 3px #86b2db, -1px -1px 3px #24a021, -5px -5px 5px #faf5ae, 5px 5px 5px #de7a9a;
    display: inline-block;
    animation: pulse;
    animation-duration: 0.5s;
}

/* MAIN */

main {
    grid-area: main;
    text-align: justify;
    font-family: 'Shippori Antique', sans-serif;
    line-height: 180%;
    font-size: 100%;
    color: #958e8c;
    background: url(bg.png) repeat #fff;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 20px;
    box-shadow: 1px 1px 10px #e2d7e1;
}
	
.intro {
    text-align: center;
    display: block;
    width: 70%;
    margin: 3rem auto 2rem auto;
    line-height: 115%;
    font-family: "Special Elite", monospace;
    font-size: 160%;
    font-weight: normal;
    color: #3b48a6;
    letter-spacing: 2px;
	background: url(introbg.png) top right no-repeat, url(introbg-small.png) bottom left no-repeat;
}
	
.portrait {
	float: right;
	margin: 0 0 0.5rem 0.5rem;
	filter: grayscale(25%);
	width: 200px;
	height: 200px;
	border-radius: 50%;
	}

#statuscafe {
    padding: 1rem;
    width: 70%;
    display: block;
    font-size: 120%;
    line-height: 110%;
    margin: 4rem auto;
    background: url(statuscafe.png) top right no-repeat, linear-gradient(to left, #d3e4f7, #fedfd8, #f8f193);
    border-radius: 10px;
    box-shadow: 0 0 15px #e2edbc;
    font-family: "Corben", serif;
    color: #47415d;
}

#statuscafe-content {
	margin: auto 5% auto 5%;
	}

#statuscafe-username {
	display: inline-block;
	width: 100%;
	text-align: right;
	font-style: italic;
	font-family: "Asap Condensed", sans-serif;
	font-size: 65%;
	margin-top: 1rem;
	letter-spacing: 3px;
	}

.linkbutton {
	margin: 0 0.5rem 0.5rem 0.5rem;
	}

.clique {
	display: inline-block;
	}

.center {
	text-align: center;
	}

.right {
	text-align: right;
	}

.left {
	text-align: left;
	}

.warning {
    font-family: 'Corben', serif;
    width: 80%;
    font-size: 110%;
    margin-left: auto;
    margin-right: auto;
	}

blockquote {
    font-style: italic;
    font-family: 'Corben', serif;
    font-size: 115%;
    color: #6c9bd7;
    letter-spacing: 1px;
    width: 60%;
    margin: 0 auto 2rem auto;
}
	
blockquote cite {
    display: block;
    font-family: "Asap Condensed", sans-serif;
    font-size: 80%;
    color: #6b7280;
    text-transform: uppercase;
	font-style: normal;
    text-align: right;
	}

blockquote cite::before {
	content: "\2014 \00A0 \00A0";
	}
	
.lyrics {
    font-style: italic;
    font-family: 'Corben', serif;
    font-size: 100%;
    color: #6c9bd7;
    margin: 0 auto 2rem auto;
	}
	
.thief {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: max-content max-content;
  width: 90%;
  margin: 1rem auto;
  grid-template-areas:
    "orig stolen"
    "caption caption";
	}

.thief img {
	margin: 0.25rem;
	}

.orig { 
	grid-area: orig;
	text-align: center;
	padding: 0.5rem;
	}
	
.stolen {
	grid-area: stolen;
	text-align: center;
	padding: 0.5rem;
	}
	
.caption { 
	grid-area: caption;
	text-align: center;
	padding: 0.5rem;
	}


/* FLEXBOX */

.fleximg {
    transition: all 0.35s ease-in-out;}

.fleximg:hover
{filter: drop-shadow(0px 0px 5px #a8beec);
    transition: all 0.35s ease-in-out;}

.flexy a:hover,
.flexed a:hover {
	border-top:0;
	border-bottom:0;
    transition: all 0.35s ease-in-out;
	}

.flexy a,
.flexed a {
	transition: all 0.35s ease-in-out;
	}

.directory {
	margin: 0.5rem;
	}

.flexed {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	justify-content: space-evenly;
	background-color: transparent;
	margin-bottom: 2rem;
	font-size: 100%;
	}

.flexed > div {
	background-color: transparent;
	width: 30%;
	margin: 0.65rem;
	text-align: center;
	line-height: 150%;
	font-size: 100%;
	font-family: "Shippori Antique", sans-serif;
	}

.flexy {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	justify-content: space-evenly;
	background-color: transparent;
	margin-bottom: 2rem;
	font-size: 100%;
	}

.flexy > div {
	background-color: transparent;
	width: 25%;
	margin: 0.65rem;
	text-align: center;
	line-height: 150%;
	font-size: 90%;
	letter-spacing: normal;
	font-family: "Shippori Antique", sans-serif;
	}

.flexy b, 
.flexy strong, 
.flexed b, 
.flexed strong {
    color: #9663a6;
    font-family: 'Corben', serif;
    letter-spacing: 1px;
	}
	
.flexlink {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	justify-content: space-evenly;
	background-color: transparent;
	margin-bottom: 2rem;
	font-size: 100%;
	}

.flexlink > div {
	background-color: transparent;
	width: 20%;
	margin: 0.65rem;
	text-align: center;
	line-height: 150%;
	font-size: 90%;
	letter-spacing: normal;
	font-family: "Shippori Antique", sans-serif;
	}

.flexlink b, 
.flexlink strong, 
.flexlink b, 
.flexlink strong {
    color: #9663a6;
    font-family: 'Corben', serif;
    letter-spacing: 1px;
	}


/* FORMS AND BUTTTONS */

.form {
    color: #4c4d52;
    background: url(statuscafe.png) 98% 3% no-repeat, linear-gradient(to top left, #d3e4f7, #fedfd8, #f8f193);
    width: 75%;
    margin: 1.5rem auto;
    padding: 0.5rem 1rem;
    box-shadow: -2px 2px 5px #cfe1f9;
    font-family: 'Corben', serif;
    line-height: 130%;
}
	
.button {
    display: block;
    color: #24a021;
    background: #fef7f0;
    width: 100px;
    margin: 0 1rem 1rem auto;
    padding: 0.5rem;
    text-align: center;
    outline: 1px solid #f5dba2;
    outline-offset: 5px;
    border: 0;
    border-radius: 10px;
    font-size: 130%;
    font-family: 'Caveat Brush';
    letter-spacing: 4px;
    transition: all 0.5s ease-in-out;
}

.button:hover {
    color: #9663a6;
    background: #fcfcfc;
    box-shadow: 1px 1px 5px #9663a6;
    outline: 1px solid #d8a9e3;
	transition: all 0.7s ease-in-out;
}

.messagebox {
    display: block;
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    background: #fcfcfc;
    padding: 0.3rem;
    border: 0px solid #f5dba2;
    outline: 1px solid #f5dba2;
    outline-offset: 3px;
    border-radius: 5px;
    margin: 0.4rem 0;
    color: #24a021;
    font-family: 'Shippori Antiqua', sans-serif;
}

.msgelement {
    background: #fcfcfc;
    padding: 0.3rem;
    border: 0px solid #f5dba2;
    outline: 1px solid #f5dba2;
    outline-offset: 3px;
    border-radius: 5px;
    margin: 0.4rem 0;
    color: #24a021;
    font-family: 'Shippori Antiqua', sans-serif;
	width: 45%;
}


/* TEXT EMBELLISHMENTS */

p {
	margin: 1rem 0 2rem 0;
	}

hr {
    margin: 2rem 1rem 2rem 1rem;
    overflow: visible;
    padding: 0;
    border: none;
    border-top: 4px double #90c16c70;
    color: #90c16c;
    text-align: center;
}

hr:after {
    content: " ❁ ";
    display: inline-block;
    position: relative;
    top: -1rem;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: #fcfcfc;
    color: #79b2e3;
    text-shadow: 0px 0px 5px #90c16c;
}
	
abbr { 
	text-decoration: none;
	border-bottom: 1px dotted #72a4cdb5;
	}
	
a:link,
a:visited,
a:active {
	color: #8666ad;
	text-decoration: none;
	}

a:hover {
	color: #307340;
	transition: all 0.75s ease-in-out;
	}

a.none:hover {
	background: url(none);
	}

h1 {
    font-family: 'Amita', cursive;
    color: #d65182;
    text-shadow: 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff, 1px 1px 15px #4d58ad;
    font-size: 250%;
    font-weight: normal;
    line-height: 100%;
    padding: 0 0 0 25px;
    margin: 1rem auto 1rem auto;
    letter-spacing: 2px;
    border-bottom: 4px dotted #f5dba2;
}

h1::first-letter {
	font-size: 200%;
    font-family: 'Fleur De Leah', cursive;
    font-weight: normal;
    color: #9663a6;
	margin-right: 10px;
    text-shadow: 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff, 1px 1px 15px #4d58ad;
}

h2::before {
    content: "☙" ;
    padding-right: 1rem;
    color: #24a021;
	font-size: 75%;
	}

h2 {
    font-family: 'Special Elite', monotype;
    font-size: 190%;
    color: #6c74b8;
    font-weight: normal;
    text-align: center;
    text-transform: lowercase;
    letter-spacing: 4px;
    padding: 1rem;
    line-height: 50%;
    margin: 1rem auto 1rem auto;
    rotate: -1.5deg;
    background: linear-gradient(to top, #faf9d74a, #fde6f285);
    width: auto;
    display: table;
    border: 1px solid #9c27b026;
    box-shadow: 1px 1px 5px #eee;
	}

h2::after {
    content: "❧" ;
    padding-left: 1rem;
    color: #24a021;
	font-size: 75%;
	}

h3 {
    font-family: 'Caveat Brush', cursive;
    color: #90c16c;
    font-size: 155%;
    text-align: center;
    font-weight: normal;
    letter-spacing: 6px;
    padding: 0;
    border-bottom: 2px dashed #efe6e8;
    margin: 2rem 0 0.5rem 0;
}
	
	
h3.box::before {
    content: " ❁ ";
    padding-right: 0.35rem;
    color: #d65182;
	}
	
h3.box {
    font-family: 'Caveat Brush', cursive;
    color: #90c16c;
    font-size: 140%;
	text-align: left;
	font-weight: normal;
    letter-spacing: 3px;
    padding: 0;
    margin: 0.5rem 0 1rem 0;
    border-bottom: 1px solid #ffffff47;
	}

b, strong {
	color: #d66cae;
	letter-spacing: 0.05rem;
	}
	
em, i {
    color: #ffb318;
    letter-spacing: 0.03rem;
	}

ul {
	padding: 1rem 0 2rem 2rem;
	margin: 0;
	}

li {
	list-style: none;
	padding-left: 0;
	padding-bottom: 0.6rem;
	}

li::before {
    content: "☀︎";
    padding-right: 0.75rem;
    padding-top: 3rem;
    color: #e7a261;
    text-shadow: 0px 0px 10px #faf4a6;
	}

/* FOOTER */

footer { 
	grid-area: footer;
	text-align: center;
	padding: 1rem 2rem 2rem 2rem;
	margin-top: 2rem;
	font-family: 'Asap Condensed', sans-serif;
	font-size: 70%;
	color: #a5ad96;
	letter-spacing: 0.1rem;
	}

footer a:link,
footer a:visited,
footer a:active {
	color: #fd87b7;
	border: 0;
	}
	
footer a:hover {
	color: #d95382;
	border: 0;
	}
	
footer b,
footer strong {
	color: #fd87b7; 
	}
	
.footerimg {
    margin: 0 1rem;
}
	
/* THEME PICKER */

.themechoice {
    display: block;
    width: 90%;
    margin: 0 auto 2rem auto;
    text-align: center;
    font-size: 155%;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 'Shippori Antique', sans-serif;
    font-variant: all-small-caps;
    color: #24a021;
}

.themechoice img {
    margin: 0.5rem 1rem;
    width: 50px;
    outline-offset: 5px;
    outline: 1px solid #d680c7;
    transition: all 0.5s ease-in-out;
}
	
.themechoice img:hover {
    outline: 1px solid #78a1cd;
    transition: all 0.5s ease-in-out;
	}
	
/* WARNING BOX MODAL */
/* for prose pages */

.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 95%)
}

.modal-content {
    background-color: #fefefe;
    padding: 2rem;
    text-align: justify;
    max-width: 400px;
	font-size: 100%;
    line-height: 150%;
    width: 80%;
}

.modal-content strong,
.modal-content b {color: #b11818;
letter-spacing: normal;}

#closeModalLink {
display: block;
    width: 50%;
    text-align: center;
    margin: 2rem auto;
    padding: 1rem;
    background-color: #b11818;
    color: #fff;
    font-size: 120%;
    text-decoration: none;
}

#closeModalLink:hover {
    background-color: red;
}