/*//------------------------------------------------------------------------
		Coded by Aelyn and Cerine of Enamour.NU - Celestial Oracle Studio
		DO NOT STEAL, USE, CLAIM, PLAGIARIZE, RIP,
		REDISTRIBUTE, OR MODIFY OUR CODES AND CONTENTS!
-------------------------------------------------------------------------//*/







/*// FONTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&family=Playfair+Display:ital@0;1&family=Bangers&family=Noto+Serif&family=Libre+Baskerville:ital@0;1&family=Pacifico&display=swap');
@font-face {
	    font-family: "Trujillo";
	    src: url(Trujillo-Regular.ttf) format("truetype");
        }





/*// GENERAL ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //*/

body {
        padding: 0px;
	    margin: 0px;
    	color: #333;
        font: normal 1.1em 'Trujillo', sans-serif;
        background: url('bg.png') top center repeat #f5f5f5;
        text-shadow: 1px 1px #eee;
        }

li {
	list-style-type: circle;
        }

b, strong {
        font: bold 1.1em "Noto Serif", serif;
    	color: #314540;
        }

i {
        font: italic 1.1em "Libre Baskerville", serif;
    	color: #8f2d2c;
        linear-gradient(to bottom right, #fa9412 0%, #fb2917 100%);
        }

u {
    	font: normal 1.1em "Playfair Display", serif;
    	color: #5e867c;
        border-bottom: 3px solid;
  	border-image-slice: 1;
  	border-image-source: linear-gradient(to left, #af2d2c, #577b72);
        text-decoration: none;
	}

h1 {
        font: italic 3em "Libre Baskerville", serif;
        text-align: right;
        text-indent: 10px;
        text-transform: lowercase;
        margin-top: 0px;
	margin-bottom: 10px;
  	display: block;
        letter-spacing -5px;
        background-image: linear-gradient(to top, #1f3734 0%, #af2d2c 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
        padding-right: 50px;
        text-shadow: none;
        }

section {
       	padding: 0px;
	display: block;
        color: #222;
        width: 900px;
        margin: 30px auto;
        text-align: center;
        text-shadow: 1px 1px #eee;
        }


header {
       height: 500px;
        width: 1440px;
        background: url('banner.png') top center no-repeat transparent;
	    }

div#wrap {
        margin: auto;
        padding: 0;
        width: 1440px;
        }

div#content {
	padding: 0px auto 100px auto;
        width: 1440px;
        line-height: 35px;
        margin: 0px auto;
	}

main {
        display: inline-block;
        float: left;
        width: 1000px;
        padding: 0px 50px 50px 20px;
        text-align: justify;
	}




/*// FORMS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //*/

input, select, option {
       font: normal 1em "Noto Serif", serif;
        background: #577b72;
        border: 0px;
        color: #eee;
        padding: 0.5em;
        line-height: 20px;
        resize: none;
        width: 100%;
        float: none;
        box-shadow: 3px 3px #222;
        }

textarea {
	font: normal 1em 'Trujillo', sans-serif;
        background: #577b72;
        border: 0px;
        color: #eee;
        padding: 0.5em;
        width: 100%;
        resize: none;
        height: 150px;
        box-shadow: 3px 3px #222;
        }





/*// LINKS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //*/

a {
  	cursor: default;
        font: normal 1em "Noto Serif", serif;
        text-decoration: none;
        transition: .4s;
        }

a:link, a:visited {
        color: #922c4f;
        }

a:hover {
	text-decoration: none;
	color: #eee;
        text-shadow: 1px 1px #444;
        }






/*// CLASS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //*/

.text, dd {
        font: normal 1.1em 'Trujillo', sans-serif;
        line-height: 35px;
        padding: 5px 10px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        letter-spacing: -.9px;
        }

.content {
        background: #fff;
       	padding: 30px;
	display: block;
        color: #222;
        width: 700px;
        margin: 30px auto;
        text-align: center;
        text-shadow: 1px 1px #eee;
        border: solid #222;
 	border-color: #222;
        border-width: 1px 1px 3px 3px;
  	border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
  	transform: rotate(-1deg);
        box-shadow: #222 5px 5px;
        }

.avatar {
        shape-outside: polygon(92% 0, 89% 0, 65% 33%, 99% 43%, 81% 71%, 51% 100%, 0 100%);;
        background: url('icon.png') no-repeat transparent;
        width: 160px;
	height: 130px;
	float: left;
        padding: 5px;
	}

.total {
	font: normal 6.5em "Libre Baskerville", serif;
        background-image: linear-gradient(to top, #fb2817 0%, #f3e4a1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
        line-height: 120px;
        text-shadow: none;
        }

.pending {
        font: bold 1.1em "Noto Serif", serif;
        color: #fed04f;
        }

.stat1 {
        background: url('bg_pat.png') center repeat #222;
        display: inline-block;
        color: #03ede5;
        shape-outside: margin-box;
        shape-image-threshold: 0.5;
        margin: 15px;
        padding: 40px 0 0 0;
        border-radius: 50%;
	width: 250px;
	height: 200px;
        text-align: center;
        text-shadow: none;
        color: #cb9743;
        box-shadow: #af2d2c 5px 5px;
        }

.stat2 {
        display: inline-block;
        text-align: center;
        padding: 10px 15px 10px 15px;
        width: 400px;
	}

.button {
        border: 3px solid;
  	border-image-slice: 1;
  	border-image-source: linear-gradient(to left, #af2d2c, #577b72);
        transition: all, .3s;
        -moz-transition: all, .3s;
        -webkit-transition: all, .3s;
	}

.button:hover {
        border: 3px solid;
  	border-image-slice: 1;
  	border-image-source: linear-gradient(to left, #577b72, #af2d2c);
        transition: all, .3s;
        -moz-transition: all, .3s;
        -webkit-transition: all, .3s;
	    }

.mod {
        background: url('bg_pat.png') center repeat #222;
        font: italic 1.1em "Libre Baskerville", serif;
        color: #eee;
	width: 700px;
        padding: 10px;
        margin: 20px auto 50px auto; 
        text-shadow: 1px 1px #222;
        text-align: center;
        border: solid #222;
 	border-color: #222;
        border-width: 0px 3px 0px 5px;
  	border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
	}

.mod b {
	color: #819c99;
        }

.mod a {
	color: #bf3d2e;
        }

.mod a:hover {
        color: #f5dc6a;
        }

.fan {
        background: url('bg_content.png') bottom center repeat #fff;
        display: inline-block;
        width: 180px;
        text-align: center;
        text-shadow: 1px 1px #eee;
        color: #222;
        padding: 10px;
        line-height: 25px;
        margin: 10px;
        border: solid #222;
 	border-color: #222;
        border-width: 1px 1px 3px 3px;
  	border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
  	transform: rotate(-2deg);
	}





/*// FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //*/

footer {
        background: url('footer.png') bottom center no-repeat;
        width: 100%;
        height: 210px;
        position: relative;
        display: block;
        vertical-align: bottom;
        bottom: 0px;
        text-align: right;
        overflow: auto;
	}

.link a:link, .link  a:visited {
        font: normal .9em "Playfair Display", serif;
        color: #8f2d2c;
        background: #fff;
	line-height: 15px;
	padding: 5px;
        margin: 70px 2px 10px 0px;;
	display: inline-block;
        text-align: center;
        text-transform: uppercase;
        width: 130px;
        text-shadow: #fff;
        border: solid #222;
 	border-color: #222;
        border-width: 1px 1px 3px 3px;
  	border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
  	transform: rotate(-2deg);
	}

.link a:hover {
        color: #1c3935;
        text-shadow: 1px 1px #eee;
        transition: all, .3s;
        -moz-transition: all, .3s;
        -webkit-transition: all, .3s;
	    }

.copyright {
        font: normal .8em 'Trujillo', sans-serif;
        background: url('bg_pat.png') center repeat #222;
        color: #eee;
        line-height: 25px;
        width: 800px;
        text-align: justify;
        text-shadow: 1px 1px #111;
        display: block;
        float: right;
        padding: 10px;
        }

.copyright b {
        font: bold 1em "Noto Serif", serif;
        color: #7c9d97;
        }

.copyright a {
        font: bold 1em "Noto Serif", serif;
        color: #a5332f;
        }

.copyright a:hover {
        font: bold 1em "Noto Serif", serif;
        color: #f5dc6a;
        }









/*// NAVIGATION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //*/

nav {
	display: inline-block;
        width: 300px;
        text-align: justify;
        border: solid #222;
  	border-color: #222;
        border-width: 0px 0px 0px 5px;
  	border-radius: 4% 95% 0% 2%/95% 4% 0% 5%;
  	transform: rotate(-3deg);
        padding-left: 30px;
        }


.menu {
	position: relative;
	z-index: 10;
}

.menu__item {
	line-height: 1;
	position: relative;
	display: block;
	margin: 1em 0;
	outline: none;
}

.menu__item-name,
.menu__item-label {
	position: relative;
	display: inline-block;
}

.menu__item-name {
        font: italic 2em "Libre Baskerville", serif;
        text-transform: lowercase;
        transition: transform 0.3s;
}

.menu__item-name:first-letter {
	color: #577b72;
	}

.menu__item-label {
        font: normal 1.3em "Playfair Display", serif;
	margin: 0 0 0 0.5em;
        text-indent: 50px;
}

.menu--nav {
        transition: transform 0.3s;
}

.menu--nav .menu__item {
	margin: .5em 0;
	padding-left: 0.25em;
}


.menu--nav .menu__item:hover .menu__item-name,
.menu--nav .menu__item:focus .menu__item-name {
	transform: translate3d(0.5em,0,0);
}

.menu--nav .menu__item::before {
	content: '*';
	position: absolute;
	top: 0;
	left: 0;
	width: 0.75em;
	height: 0.25em;
        color: #222;
        font-size: 2em;
	transform: scale3d(0,1,1);
	transform-origin: 0% 50%;
	transition: transform 0.3s;
}

.menu--nav .menu__item:hover::before,
.menu--nav .menu__item:focus::before {

	transform: scale3d(1,1,1);
}

.menu--nav .menu__item-label {
	display: block;
	margin: 0;
	word-spacing: 0.15em;
	color: transparent;
}

@media screen and (max-width: 50em) {
	.menu--nav .menu__item-label {
		font-size: 0.85em;
	}
}