/* ----------------------------------------------------------------
 Mind over Magic v1.0
 https://shawn.uncharted-sky.org
 DO NOT STEAL, MODIFY, USE, CLAIM, OR REDISTRIBUTE ANY OF MY CODES!
 Coding and content © Kupo; Created July 2025
---------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=National+Park:wght@200..800&family=Oldenburg&family=Oleo+Script:wght@400;700&family=Short+Stack&family=Special+Elite&family=Yusei+Magic&display=swap');

@font-face {
    font-family: 'American Typewriter';
    src: url('fonts/AmericanTypewriter-Bold.woff2') format('woff2'),
        url('fonts/AmericanTypewriter-Bold.woff') format('woff');
    font-display: swap;
    font-style: normal;
    font-weight: bold;
}

	@font-face {
	    font-family: 'American Typewriter Ita';
	    src: url('fonts/AmericanTypewriter-MdIt.woff2') format('woff2'),
	        url('fonts/AmericanTypewriter-MdIt.woff') format('woff');
	    font-display: swap;
	    font-style: italic;
	    font-weight: 500;
	}

:root {
	/* >> color palette >> */
	--bg: #E7D7D7;
	--text: #555555;

	/*>>  accent colors >> */
	--blue: #7A99AF;
	--forest: #6B7D71;
	--gold: #B6A237;
	--green: #61B727;
	--orange: #DE633B;
	--red: #C92A3E;

	--dark: #212529;
	--light: #EEEEEE;
	--muted: #B9B2BA;
	--stats: #F1F2F3;
	--txtsha: #DDDDDD;
	--white: #FFFFFF;

	/*>> accent colors rgb >> */
	--redRGB: 201, 42, 62;

	--darkRGB: 33, 37, 41;
	--lightRGB: 238, 238, 238;
	--whiteRGB: 255, 255, 255;

	/* >> lovely fonts >> */
	--big: 'National Park', sans-serif;
	--bold: "Special Elite", system-ui;
	--doodle: "Short Stack", cursive;
	--italic: "American Typewriter Ita", serif;
	--sans: 'Montserrat', sans-serif;
	--serif: "American Typewriter", serif;

	/* >> images that get a lot of use >> */
	--border: url(../assets/svg/border.svg);
	--btnbder: url(../assets/svg/button.svg);
	--legbder: url(../assets/svg/legend.svg);
	--statsbg: url("../assets/img/sbg.png");
}

::-webkit-scrollbar-track { background: var(--muted); border: 7px solid var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); border: 5px solid var(--bg); }
::-webkit-scrollbar-corner { background: var(--bg); border: 1px solid var(--bg); }
::-webkit-scrollbar { background: var(--bg); height: 15px; width: 15px; }

::selection { background: var(--gold); color: var(--light); }
::-moz-selection { background: var(--gold); color: var(--light); }

/* -----------------------------------
>>  [  --- basic elements ---  ]
------------------------------------*/

body {
	background-color: var(--bg);
	background-image: url('../assets/img/bg3.png'), url('../assets/img/bg2.png'), url('../assets/img/bg1.png');
	background-blend-mode: multiply, multiply, normal;
	background-position: top center;
	background-repeat: no-repeat, repeat, repeat;
	color: var(--text);
	font: 500 1em/1.85rem var(--sans);
	font-optical-sizing: auto;
	text-align: justify;
}

.container {
	max-width: 1250px;
}

.mb-4h {
	margin-bottom: 2.25rem !important;
}

.mb-5h {
	margin-bottom: 3.5rem !important;
}

/* -----------------------------------
>>  [  --- header & nav styles ---  ]
------------------------------------*/

.navbar-nav {
	padding-top: 5px;
}

	.nav-link {
		-webkit-text-stroke: 5px #E0D7C7;
		color: var(--green);
		font: 400 2.15em/1.15em var(--serif);
		letter-spacing: .25px;
		padding: 0 1.5rem !important;
		paint-order: stroke fill; /* fixes stroke to be on outside of text */
		text-shadow: 1px 1.5px #888;
		text-transform: lowercase;
		transform: rotate(-2deg);
	}

		.nav-link img {
			height: 45px;
			width: auto;
		}

	.navbar-brand {
		color: var(--forest);
		font-size: 1.85em;
		letter-spacing: -2.75px;
		line-height: 1.5rem;
	}

header {
	height: 605px;
}

/* -----------------------------------
>>  [  --- content elements ---  ]
------------------------------------*/

main {
	margin: -10px 0 20px 0;
	text-shadow: 1px 1px var(--txtsha);
}

	main .stats {
		background: var(--stats) var(--statsbg);
		background-blend-mode: multiply;
		border-image: var(--border) 10 10 10 10 stretch stretch;
		border-radius: .5rem;
		border-style: solid;
		border-width: 7px 7px 7px 7px;
		margin: 0 auto 1.85rem auto;
		padding: 30px 0;
		width: 73%;
	}

			main .stats .fans {
				align-content: center;
				border-image: url(../assets/svg/fans.svg) 0 6 3 6 stretch stretch;
				border-left-style: solid;
				border-width: 0px 5px 3px 5px;
				padding: 10px 20px;
				text-align: center;
			}

				/* FIX THIS SO THAT THE NUMBERS ACTUALLY LOOK GOOD! */

				main .stats .fans .ransom-note {
					-webkit-font-smoothing: antialiased;
					display: block;
					font: 500 6.25em/3rem var(--big) !important;
					letter-spacing: -4.5px;
					margin-bottom: 10px;
					text-shadow: none;
					width: 100%;
				}

					main .stats .fans .ransom-note .words {
						display: inline-block;
						/* filter: drop-shadow(1px 2px 2.5px #aaa) */
					}

					/* BEGIN TYPOGRAPHY */
					main .stats .fans .ransom-note span span {
						display: block;
						float: left;
					}

						main .stats .fans .ransom-note span span::before {
							content: "";
							display: block;
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							z-index: 1;
						}

						main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+1),
						main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+3) {
							color: #e9e9e9;
							font: 400 105%/75% "Oleo Script", system-ui;
							margin: .3em -.2em 0 0;
							padding: .2em .15em .15em .1em;
							paint-order: stroke fill;
							position: relative;
							rotate: -.25deg;
							top: .01em;
							width: 90px;
							z-index: 1;
						}

							main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+1)::before,
							main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+3)::before {
								background: url(../assets/img/f1.png) center no-repeat;
								height: 114px;
								width: 90px;
								z-index: -5;
							}

						main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+2),
						main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+1) {
							color: var(--dark);
							font: 400 100%/75% "Oldenburg", serif;
							margin: .1em -.075em 0 0;
							padding: .3em .2em .25em .2em;
							paint-order: stroke fill;
							position: relative;
							rotate: -2deg;
							width: 118px;
							z-index: 2;
						}

							main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+2)::before,
							main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+1)::before {
								background: url(../assets/img/f2.png) center no-repeat;
								height: 127px;
								width: 118px;
								z-index: -6;
							}

						main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+3),
						main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+4) {
							color: #f7ebdd;
							font: 400 85%/75% "Yusei Magic", sans-serif;
							margin: .3em -.185em 0 -.195em;
							padding: .15em .3em;
							paint-order: stroke fill;
							position: relative;
							rotate: 5deg;
							text-transform: lowercase;
							top: .1em;
							width: 102px;
							z-index: 3;
						}

							main .stats .fans .ransom-note span:nth-child(2n+1) span:nth-child(5n+3)::before,
							main .stats .fans .ransom-note span:nth-child(2n+2) span:nth-child(5n+4)::before {
								background: url(../assets/img/f3.png) center no-repeat;
								height: 97px;
								width: 102px;
								z-index: -7;
							}

				main .stats .fans small {
					display: block;
					font-size: .93em;
				}

			main .stats .info {
				line-height: 1.75rem;
				padding: 10px 20px;
			}

				main .stats .info p {
					text-indent: 0;
				}

				main .stats .info strong {
					line-height: 1.75rem;
				}

				main .stats .info a {
					font-size: 1.15em;
					line-height: 1.75rem;
				}

					main .stats .info a.img {
						border-image: none;
						border-style: none;
						border-width: 0;
						opacity: 1;
						position: relative;
						text-decoration: unset;
						transition: opacity .3s ease;
					}

						main .stats .info a.img:hover {
							opacity: .85;
						}

	main img {
		background: var(--stats) var(--statsbg);
		background-blend-mode: multiply;
		border-image: var(--btnbder) 4 4 4 4 stretch stretch;
		border-radius: .35rem;
		border-style: solid;
		border-width: 3.5px 3.5px 3.5px 3.5px;
		margin: 3px 1.75px;
		padding: 3px;
	}

		main img:hover {
			opacity: .85;
		}

	main #show-members .col-lg-3:nth-of-type(3n+3) {
		transform: rotate(2deg);
	}

		main #show-members .col-lg-3:nth-of-type(3n+5) {
			transform: rotate(-2deg);
		}

		main #show-members .members {
			background: var(--stats) var(--statsbg);
			background-blend-mode: multiply;
			border-image: var(--border) 10 10 10 10 stretch stretch;
			border-radius: .5rem;
			border-style: solid;
			border-width: 7px 7px 7px 7px;
			color: #808080;
			margin-bottom: 5px;
			padding: 20px 0;
		}

			main #show-members .members img {
				border-image: none;
				border-style: solid;
				border-width: 0;
				height: 23px;
				margin: -5px 0 0 5px;
				padding: 0;
				width: 23px;
			}

			main #show-members .members .ph-bold {
				color: var(--muted);
				font-size: .75em;
				margin: 0 7px;
			}

	main #show-codes {
		padding: 20px 35px 0 35px;
	}

		main #show-codes .codesBlock {
			background: var(--stats) var(--statsbg);
			background-blend-mode: multiply;
			border-image: var(--border) 10 10 10 10 stretch stretch;
			border-radius: .5rem;
			border-style: solid;
			border-width: 7px 7px 7px 7px;
			margin: 0 auto 1.35rem auto !important;
			padding: 35px 30px 15px 30px;
			/* width: 78.75%; */
		}

			main #show-codes .codesBlock:last-of-type {
				margin-bottom: 2.15rem !important;
			}

	main ul li {
		display: block;
		list-style-type: none;
		padding: .15rem;
	}

		main ul li::before {
			color: var(--orange);
			content: "* ";
			font-family: var(--doodle);
			font-size: 1.35em;
			margin-right: .25rem;
			vertical-align: bottom;
		}

/* -----------------------------------
>>  [  --- footer elements ---  ]
------------------------------------*/

footer {
	font-size: .9em;
	line-height: 1.5rem;
	padding: 7px 0 15px 0;
}

	footer a {
		font: 400 1.115em/1.35rem var(--serif);
	}

		footer a:hover {
			font: 400 1.115em/1.35rem var(--serif) !important;
		}

	footer strong {
		font: 700 1.05em/1.5rem var(--bold);
	}

	footer em {
		font: 600 italic 1.05em/1.5rem var(--italic);
	}

/* -----------------------------------
>>  [  --- alert styles ---  ]
------------------------------------*/

.alert {
    background-color: transparent;
    border: none;
}

	.alert-light {
		border-image: url(../assets/svg/bq.svg) 0 6 3 6 stretch stretch;
		border-left-style: solid;
		border-right-width: 0;
		border-width: 0 6px 3px 6px;
		color: var(--gold);
		font: 400 1.1575em/1.85em var(--serif);
	}

/* -----------------------------------
>>  [  --- form styles ---  ]
------------------------------------*/

form {
	justify-self: center;
	padding: 30px 35px 0 35px;
	margin-bottom: 0rem !important;
	position: relative;
	text-shadow: 1px 1px #F3F3F3;
}

	fieldset {
		background: var(--stats) var(--statsbg);
		background-blend-mode: multiply;
		border-radius: .5rem;
		margin-bottom: 2.15rem;
		padding: 30px 30px 15px 30px;
	}

		fieldset:nth-of-type(3n+2) {
			transform: rotate(-.5deg);
		}

			fieldset:nth-of-type(3n+4) {
				transform: rotate(.5deg);
			}

		fieldset legend {
			background: var(--stats) var(--statsbg);
			background-blend-mode: multiply;
			border-image: var(--legbder) 10 10 10 10 stretch stretch;
			border-radius: .5rem;
			border-style: solid;
			border-width: 8px 8px 8px 8px;
			color: rgba(var(--redRGB), .85);
			font: 600 1.65em/1em var(--bold);
			letter-spacing: -.5px;
			margin: -57px 0 0 -10px;
			padding: .2em .85rem 0 .85rem;
			text-shadow: none;
			text-transform: lowercase;
			transform: rotate(-2deg);
			width: fit-content;
		}

		fieldset p {
			font-size: .985em;
		}

		fieldset label strong {
			color: var(--text);
			font: 700 1.1575em/1.85em var(--bold);
			letter-spacing: -.25px;
		}

		.form-control, .form-select {
			line-height: 1.5em;
		}

		.req {
			color: var(--gold);
			font: 600 1.15em/1.85em var(--big);
			margin: 0 3.5px;
		}

.forms-div {
	border-image: url(../assets/svg/bq.svg) 0 6 3 6 stretch stretch;
	border-left-style: solid;
	border-right-width: 0;
	border-width: 0 6px 3px 6px;
	color: var(--gold);
	margin: 0 auto;
	padding: .5rem 1rem 1rem 1rem;
	text-align: center;
}

/* >> button styles >> */

.btn {
	background-blend-mode: multiply;
	border: 0;
	color: var(--text);
	font: 600 1.1585em/1.85em var(--bold) !important;
	letter-spacing: -.25px;
	margin: 0 2.5px;
	padding: 5px 15px 0 15px;
	text-transform: lowercase;
	transition: background .3s ease, transform .3s ease;
}

	.btn:hover {
		background-blend-mode: multiply;
		transform: rotate(-3deg);		
	}

	.btn-success {
		background: #809F85;
	}

		.btn-success:hover {
			background: #809F85;
		}

	.btn-danger {
		background: rgba(var(--redRGB), .77);
	}

		.btn-danger:hover {
			background: rgba(var(--redRGB), .77);
		}

/* -----------------------------------
>>  [  --- general text styles ---  ]
------------------------------------*/

h1 {
	color: var(--forest);
	font: 400 2.65em/2.25rem var(--serif);
	letter-spacing: -1.5px;
	margin: 0 0 15px 0;
	padding: 0 36px 0 0;
	position: relative;
	text-align: right;
	text-shadow: 1.5px 2px var(--txtsha);
	text-transform: lowercase;
	transform: rotate(.5deg);
}

	h1:before {
		background: url(../assets/img/h1.png) no-repeat top right;
		background-size: 100%;
		content: "";
		display: block;
		height: 80px;
		position: absolute;
		right: -15px;
		top: -35px;
		width: 60px;
		z-index: -1;
	}

h2 {
	color: var(--forest);
	font: 400 2.15em/2.25rem var(--serif);
	letter-spacing: -1.5px;
	margin: 0 0 10px 3px;
	padding: 0 0 0 25px;
	position: relative;
	text-shadow: 1px 1.5px var(--txtsha);
	text-transform: lowercase;
	transform: rotate(-.5deg);
}

	h2:before {
		color: #DBB059;
		content: "+ ";
		display: block;
		left: 0;
		position: absolute;
		top: 2px;
		z-index: -1;
	}

h3 {
	background: var(--stats) var(--statsbg);
	background-blend-mode: multiply;
	border-image: var(--legbder) 10 10 10 10 stretch stretch;
	border-radius: .5rem;
	border-style: solid;
	border-width: 8px 8px 8px 8px;
	color: rgba(var(--redRGB), .85);
	font: 700 1.65em/1em var(--bold);
	letter-spacing: -.5px;
	padding: .45rem .55rem .05rem .55rem;
	position: relative;
	text-align: center;
	transform: rotate(-2deg);
	width: fit-content;
	z-index: 3;
}

h4 {
	color: var(--blue);
	font: 600 italic 1.585em/1.25em var(--italic);
	letter-spacing: -.15px;	
	margin: 0;
	text-shadow: none;
	text-transform: lowercase;
}

p {
	margin-bottom: 1.5rem;
}

	main p:first-of-type {
		text-indent: 20px;
	}

	p:last-of-type {
		margin-bottom: 0;
	}

	#show-affiliates p {
		text-indent: 0;
	}

a {
	border-image: url(../assets/svg/link.svg) 0 3 6 3 stretch stretch;
	border-style: solid;
	border-width: 0px 3px 5px 3px;
	color: var(--green);
	display: inline;
	font: 400 1.1585em/1.75em var(--serif);
	letter-spacing: -.35px;
	position: relative;
	text-decoration: unset;
	text-transform: lowercase;
	transition: color .3s ease;
}

	a:not(.nav-link):hover {
		color: #81977E;
	}

strong {
	color: var(--orange);
	font: 700 1.125em/1.85em var(--bold);
	letter-spacing: .25px;
	text-transform: lowercase;
	vertical-align: middle;
}

em {
	color: var(--blue);
	font: 600 italic 1.085em/1.85em var(--italic);
	letter-spacing: -.15px;
}

del {
	font: 600 italic 1.085em/1.85em var(--italic);
	position: relative;
	text-decoration: none;
	text-transform: lowercase;
}

	del:before {
		border-bottom-style: solid;
		border-image: url(../assets/svg/del.svg) 0 3 8 3 stretch stretch;
		border-width: 0px 3px 5px 3px;
		content: "";
		left: 0;
		opacity: .85;
		position: absolute;
		right: 0;
		top: 40%;
		transform: rotate(-5deg);
	}


/* -----------------------------------
>>  [  --- tooltip & top styles ---  ]
------------------------------------*/

#s-m-t-tooltip {
	background: var(--dark);
	border-radius: .3rem;
	color: var(--light);
	font: 500 .75em var(--sans);
	letter-spacing: 1px;
	margin: 20px 0 0 10px;
	max-width: 500px;
	padding: 7px 10px 7px 11px;
	text-transform: uppercase;
	z-index: 1000;
}

#top {
	background: rgba(var(--darkRGB), .5);
	border-radius: 50%;
	border: none;
	bottom: 2em;
	color: var(--light);
	display: none;
	height: 35px;
	padding: 5px 0 0 0;
	position: fixed;
	right: 2em;
	text-decoration: none;
	transition: background .3s ease;
	width: 35px;
	z-index: 1000;
}

	#top:hover {
		background: rgba(var(--darkRGB), .75);
	}

/* -----------------------------------
>>  [  --- responsive styles ---  ]
------------------------------------*/

@media only screen and (max-width: 576px) {
	header {
		background: url(../assets/img/header.png) no-repeat 41%;
	}

	main .stats, main .forms-div, main form, main .alert-light, main .codesBlock {
		width: 100%;
	}

		main .stats .fans {
			border-left: 0px solid #DADBDC;
			border-top: 1px solid #DADBDC;
			margin-top: 20px;
			padding: 20px 0 0 0;
		}

	main ul {
		columns: 1;
		padding-left: 1.75rem;
	}

	main h1 {
		font-size: 2.25em;
		margin: 20px 0 15px 0;
	}

	main h3 {
		margin: 0 0 -30px 7.5%;
	}
}

@media only screen and (min-width: 768px) {
	header {
		background: url(../assets/img/header.png) no-repeat 29%;
	}

	main .stats, main form, main .codesBlock {
		width: 100%;
	}

	main ul {
		columns: 1;
		padding-left: 2.75rem;
	}

	main .forms-div {
		width: 60%;
	}

	main .alert-light {
		width: 55%;
	}

	main h1 {
		margin: 15px 0 15px 0;
	}

	main h3 {
		margin: 0 0 -30px 4%;
	}
}

@media only screen and (min-width: 992px) {
	header {
		background: url(../assets/img/header.png) no-repeat 70.5%;
	}

		.navbar-nav {
			padding-top: 5px;
		}

			.nav-link {
				padding: 0 1rem !important;
			}

	main .stats {
		width: 80%;
	}

	main ul {
		columns: 2;
		padding-left: 2.75rem;
	}

	main .alert-light {
		width: 45%;
	}

	main .alert-info {
		width: 90%;
	}

	main .forms-div {
		margin-top: 30px;
		width: 40%;
	}

	main form {
		width: 90%;
	}

	main h1 {
		margin: 0 0 15px 0;
	}

	main h3 {
		margin: 0 0 -30px 13.25%;
	}

	main .codesBlock {
		width: 78.75%;
	}
}

@media only screen and (min-width: 1200px) {
	header {
		background: url(../assets/img/header.png) no-repeat center;
	}

		.navbar-nav {
			padding-top: 5px;
		}

			.nav-link {
				padding: 0 1.5rem !important;
			}

				.nav-link img {
					height: 45px;
					width: auto;
				}

		main .stats {
			width: 70%;
		}

		main ul {
			columns: 2;
			padding-left: 2.75rem;
		}

	main .alert-light {
		margin-bottom: 1.15rem !important;
		width: 35%;
	}

	main .forms-div {
		margin-top: 0;
		width: 31.5%;
	}

	main form {
		width: 80%;
	}

	main h3 {
		margin: 0 0 -30px 12.5%;
	}
}