/*===
#ChapterShe by Babylon19 (https://chaptershe.babylon19.org)
© Coryright 2022 Into Binary. All rights reserved.
Written for -- https://chaptershe.babylon19.org
===*/


/*=== LIBRARIES ===*/
/*=== END LIBRARIES ===*/

/*=== CUSTOM ===*/
	/*** RESET ***/
		*{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-family:inherit;vertical-align:baseline;font-size:1em;font-style:normal;-webkit-font-smoothing:antialiased;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;}/* *{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;}*/ *, *::before, *::after{-webkit-transition:.5s;-box-transition:.5s;-o-transition:.5s;transition:.5s;}:hover,:active,:focus{outline:0 !important;}html, body{min-height:100%;font-family:sans-serif;font-size:1rem;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;padding:0;line-height:1;}article, footer, header, section{display:block;}ol, ul{list-style:none;}a{display:inline-block;text-decoration:none;background-color:transparent;color:initial;}a img{border:none;}a, button, input[type="submit"]{cursor:pointer !important;}button{// background-color:transparent;}img{width:100%;height:auto;}img::selection{fill:none;color:none;display:none;background:none;}input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea{text-align:left;max-width:100%;}input[type="checkbox"], input[type="radio"]{display:none;}input[type="submit"]{background-color:transparent;}label{display:inline;}textarea{resize:vertical;}
	/*** END RESET ***/

	/*** CANCEL ***/
.letter input[type="checkbox"] { display: initial !important; }
/*** END CANCEL ***/

/*** COLORS ***/
{ background-color: #340853; }

html { background-color: white; }
.u-button { color: white; }

.letter-form { background-color: #eee; }
/*** END COLORS ***/

/*** FONTS ***/
@font-face{font-family:"Bauhaus";src:url("../../assets/fonts/BAUHS93.TTF");}
@font-face{font-family:"Impact";src:url("../../assets/fonts/impact.TTF");}
@font-face{font-family:"AlexBrush";src:url("../../assets/fonts/AlexBrush.TTF");}

main { font-family: "Impact"; word-spacing: .15em; }
.header h1,
.letter h6 { font-family: "Bauhaus"; line-height: 1.15em; word-spacing: initial !important; }
.letter-form-fieldset div input,
.letter-form-fieldset div select,
.letter-form-fieldset div textarea,
.d-fontLetter {
	font-family: "AlexBrush"; word-spacing: .24em;
	font-weight: bold;
	font-size: 1.4em;
}

.footer { text-align: right; }
.footer a { text-decoration: underline; }
.letter-form-fieldset span.d-fontLetter { font-weight: bold; }
/*** END FONTS ***/

/*** MEDIA ***/
* { background-size: contain; }

.u-fancyText {
    background-image: url("/assets/images/purple-background.png");
    background-size: cover;
    background-position: fixed;
    background-clip: text;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -o-background-clip: text;
    background-fill-color: transparent;
        -webkit-background-fill-color: transparent;
        -moz-background-fill-color: transparent;
        -o-background-fill-color: transparent;
    color: transparent;
}

.u-button { background-image: url("/assets/images/purple-background.png"); }
.letter-form {// background-image: url("/assets/images/letter_background.png"); }
.letter-form,
.u-button {
	background-position: center;
	background-size: cover;
}

.letter_aside.is-left .letter_aside-placeholder {
	background-image: url("/assets/images/item_ink.png");
	background-position: left bottom;
}
.letter_aside.is-right .letter_aside-placeholder {
	background-image: url("/assets/images/item_ink.png");
	background-position: right top;
}
.letter_aside-placeholder {
	background-repeat: no-repeat;
	background-size: contain;
}
/*** END MEDIA ***/

/*** UTILITIES ***/
	/*** .u-button ***/
	.u-button {
		padding: .75em 1.18em;
		border-radius: 4em;
	}
/*** END UTILITIES ***/

/*** COMPONENTS ***/
	/*** .footer ***/
	.footer {
		padding: 1.8em 1em;
	}

	/*** .header ***/
	.header h1 { padding: 1em; }

	/*** .letter ***/
	.letter,
	.letter-form-footer,
	.letter-form-header { display: flex; }
	.letter-form-header { align-items: center; }
	
	.letter-form,
	.letter-form-header { width: 100%; }
	
	.letter-form {
		border-radius: 1.8em;
	}

	.letter-form-fieldset div {
		display: inline-block;
		vertical-align: top;
		margin-bottom: 1em;
	}
	.letter-form-fieldset div * { vertical-align: middle; }
	.letter-form-fieldset div input,
	.letter-form-fieldset div select,
	.letter-form-fieldset div textarea {
		padding: .3em .5em;
		border-radius: .18em;
	}
	.letter-form-fieldset div input[type="checkbox"] { width: 1.18em; height: 1.18em; }
	.letter-form-fieldset div p {
		display: inline;
		padding-left: .5em;
	}
	.letter-form-fieldset div span {
		display: block;
		margin-bottom: .5em;
	}
	.letter-form-fieldset div textarea { min-height: 24em; }

	.letter-form-header figure img {
		width: auto;
	}
	
	.letter_aside {
		position: relative;
		display: block;
		width: 24%;
	}
	.letter_aside-placeholder {
		position: absolute; bottom: 0; left: 0;
		width: 100%; height: 100%;
		display: block;
	}
/*** END COMPONENTS ***/

/*** INTERACTIVITY ***/
input[type="checkbox"],
.u-button { cursor: pointer; }
/*** END INTERACTIVITY ***/

/*** MEDIA-QUERIES ***/
@media all and (max-width: 50em) {
	/*** FONTS ***/
    body, html, main { font-size: 14px; }
	
	.header h1,
	.letter-form-fieldset h6 { font-size: 1.8em; }
	.letter-form-fieldset span.d-fontLetter { font-size: 2.4em; }

	/*** COMPONENTS: .letter ***/
	.letter-form,
	.letter-form-fieldset,
	.letter-form-footer,
	.letter-form-header { padding: .5em; }
	.letter-form-header figure img { height: 1.8em; }
	.letter-form-fieldset div { width: 100%; }
	.letter-form-fieldset div input,
	.letter-form-fieldset div select,
	.letter-form-fieldset span,
	.letter-form-fieldset div textarea,
	.letter-form-footer { width: 100%; }
		/*** VIEWPORT: .letter ***/
		.letter-form-header {
			flex-direction: column;
			align-items: flex-start;
		}
		/*** CSS-HACKS: .letter ***/
		.letter-form-header { padding: 1em .5em; }
		.letter-form-fieldset span.d-fontLetter { margin-top: 1em; }
}
@media all and (min-width: 50em) {
	/*** FONTS ***/
    body, html, main { font-size: 18px; }
	
	.header h1,
	.letter-form-fieldset h6 { font-size: 2.4em; }
	.letter-form-fieldset span.d-fontLetter { font-size: 2.4em; }
	
	/*** COMPONENTS: .letter ***/
	.letter-form,
	.letter-form-fieldset,
	.letter-form-footer,
	.letter-form-header { padding: 1em; }
	.letter-form-header figure img { height: 3em; }
	.letter-form-fieldset div { width: 50%; }
	.letter-form-fieldset div input,
	.letter-form-fieldset div select,
	.letter-form-fieldset span,
	.letter-form-fieldset div textarea,
	.letter-form-footer { width: 90%; }
		/*** VIEWPORT: .letter ***/
		.letter-form-fieldset span.d-fontLetter {
			position: relative; top: .5em;
			text-align: right;
		}
}
/*** END MEDIA-QUERIES ***/

/*** CSS TOOLS ***/
.CSScentered {
    display: flex;
    justify-content: center;
    align-items: center;
}

.CSSmidWrap {
    max-width: 70em;
    margin: 0 auto;
}

.CSSspacer { flex: 1; }
/*** END TOOLS ***/

/*** TO-DELETE ***/
.letter_aside-placeholder { background-image: initial !important; }
/*** END TO-DELETE ***/
/*=== END CUSTOM ===*/