/* ----------------------------------------------------------------
 All Fired Up! v1.0
 https://natsu.uncharted-sky.org
 DO NOT STEAL, MODIFY, USE, CLAIM, OR REDISTRIBUTE ANY OF MY CODES!
 Coding and content © Kupo; Created April 2025
---------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&family=Tilt+Neon&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/oliver-2');
@import url('https://fonts.cdnfonts.com/css/dish-out');

:root {
	/* >> color palette >> */
	--bg: #EAEAEA;
	--text: #8D9199;
	--sitetitle: linear-gradient(rgba(220, 173, 112, .8), rgba(203, 39, 37, .75));
	--fans: linear-gradient(rgba(220, 173, 112, .7), rgba(203, 39, 37, .65));

	/* accent colors */
	--primary: #C89692;
	--secondary: #717686;
	--info: #D99872;
	--success: #88A57B;
	--warning: #D7B548;
	--danger: #E07783;

	/* basic colors */
	--brown: #A89273;
	--dark: #666A7B;
	--muted: #A7AAAF;
	--light: #F0F0F0;
	--white: #FFF;

	/*>> accent colors rgb >> */
	--primaryRGB: 200, 150, 146;
	--secondaryRGB: 113, 118, 134;
	--infoRGB: 217, 152, 114;
	--successRGB: 136, 165, 123;
	--warningRGB: 215, 181, 72;
	--dangerRGB: 224, 119, 131;

	/*>> basic colors rgb >> */
	--brownRGB: 168, 146, 115;
	--darkRGB: 102, 106, 123;
	--mutedRGB: 158, 161, 167;
	--lightRGB: 240, 240, 240;
	--whiteRGB: 255, 255, 255;

	/* >> lovely fonts >> */
	--title: 'Dish Out', sans-serif;
	--sans: 'Tilt Neon', sans-serif;
	--serif: 'Urbanist', sans-serif;
	--link: 'Oliver', sans-serif;
	--big: 'National Park', sans-serif;

	/* >> images that get a lot of use >> */
	--dots: url('../assets/img/d-dots.png');
}

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

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

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

html { scroll-behavior: smooth; }

body {
	background: var(--bg) url('../assets/img/bg.png') top center;
	color: var(--text);
	font: 500 16px var(--sans);
	letter-spacing: .57px;
	line-height: 1.885em;
	text-align: justify;
}

.container {
	max-width: 1275px;
}

.gx-4h, .gx-sm-4h, .gx-md-4h, .gx-lg-4h {
	--bs-gutter-x: 2.5rem;
}

.pt-6, .pt-sm-6, .pt-md-6, .pt-lg-6 {
	padding-top: 4.375rem !important;
}

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

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

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

header {
	background: url(../assets/img/header.png) no-repeat center;
	background-size: 1920px 680px;
	height: 680px;
}

/* -----------------------------------
>>  [  --- sidebar elements ---  ]
------------------------------------*/

aside nav a.nav-link {
	-webkit-font-smoothing: antialiased;
	border-left: 4px solid #e19e96;
	border-radius: .25rem;
	border-right: 4px solid #e19e96;
	color: var(--white);
	font: 400 1.35em var(--title);
	letter-spacing: 2.75px;
	line-height: 1.5rem;
	margin-bottom: 10px;
	padding: 1rem 1.25rem;
	text-align: left;
	text-decoration: none;
	text-shadow: 2px 2px #d18a8a;
	text-transform: uppercase;
}

	aside nav a.nav-link:hover, aside nav a.nav-link:focus {
		background-blend-mode: luminosity;
		color: var(--white);
	}

	aside nav a.nav-link:last-child {
		margin-bottom: 0;
	}

	aside nav a.nav-link:nth-of-type(5n+1), aside nav a.nav-link:nth-of-type(5n+5) {
		background: #b47e78 url('../assets/img/lbg.png') center center;
	}

	aside nav a.nav-link:nth-of-type(5n+2), aside nav a.nav-link:nth-of-type(5n+4) {
		background: #ad795b url('../assets/img/lbg2.png') center center;
	}

	aside nav a.nav-link:nth-of-type(5n+3) {
		background: #b35f68 url('../assets/img/lbg3.png') center center;
	}

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

.content {
	margin-top: -35px;
}

main {
	font-size: 1.085em;
}

	main h1 {
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke: .5px #687f7c;
		background-image: url('../assets/img/h1bg.png');
		background-position: top left;
		background-repeat: no-repeat;
		color: transparent;
		font: 400 3.15em var(--link);
		letter-spacing: 1.25px;
		margin: -5px 0 0 0;
		padding: 7px 0 0 25px;
		position: relative;
		text-align: left;
		text-transform: lowercase;
		z-index: 1;
	}

		main h1::after {
			-webkit-background-clip: text;
			-webkit-font-smoothing: antialiased;
			background-image: url('../assets/img/tbg.png');
			background-position: bottom center;
			color: transparent;
			content: attr(data-text);
			display: block;
			left: 27px;
			opacity: .97;
			position: absolute;
			top: 9px;
			z-index: -1;
		}

	main h2 {
		-webkit-font-smoothing: antialiased;
		background: url('../assets/img/h2bg.png') no-repeat right center;
		color: transparent;
		font: 400 1.725em var(--title);
		letter-spacing: 1px;
		margin: 0 0 7px 0;
		padding: 0 58px 0 0;
		position: relative;
		text-align: right;
		text-transform: uppercase;	
	}

		main h2::after {
			-webkit-background-clip: text;
			-webkit-font-smoothing: antialiased;
			background-image: url('../assets/img/h2tbg.png');
			background-position: center center;
			color: transparent;
			content: attr(data-text);
			display: block;
			right: 58px;
			opacity: .97;
			position: absolute;
			top: 0;
			z-index: -1;
		}

	main h3 {
		color: rgba(var(--brownRGB), .85);
		font: 400 1.25em var(--title);
		letter-spacing: 2px;
		margin: 0 0 10px 0;
		text-align: center;
		text-transform: uppercase;
	}

	main h5 {
		color: rgba(var(--brownRGB), .85);
		font: 400 1.3rem/1.5em var(--title);
		margin-bottom: 0;
		text-transform: lowercase;
	}

	main img {
		background: rgba(var(--whiteRGB), .5) var(--dots);
		border-radius: .15rem;
		border: 1px solid rgba(var(--brownRGB), .25);
		margin: 3px 1.5px;
		padding: 5px;
	}

		main img:hover {
			opacity: .85;
		}

	main .div-card {
		height: auto;
		justify-self: center;
		padding: 25px 0;
		position: relative;
		width: 80%;
	}

		main .div-card::before {
			content: "";
			left: 0;
			position: absolute;
			top: 0;
			z-index: -1;
		}

		main .div-card::after {
			bottom: 0;
			content: "";
			position: absolute;
			right: 0;
			z-index: -1;
		}

	main .stats {
		background: rgba(255, 255, 255, .2);
		border-radius: .75rem;
		justify-self: center;
		margin: 4rem 0 0 0;
		padding: 25px 0;
		position: relative;
		width: 80%;
	}

			main .stats::before {
				border-left: 3px solid rgba(var(--primaryRGB), .5);
				border-radius: .85rem .15rem 0 .15rem;
				border-top: 3px solid rgba(var(--primaryRGB), .5);
				height: 105px;
				margin-left: -5px;
				margin-top: -5px;
				width: 105px;
			}

			main .stats::after {
				border-bottom: 3px solid rgba(var(--primaryRGB), .5);
				border-radius: 0 .15rem .85rem .15rem;
				border-right: 3px solid rgba(var(--primaryRGB), .5);
				height: 105px;
				margin-bottom: -5px;
				margin-right: -5px;
				width: 105px;
			}

		main .stats .fans {
			align-content: center;
			padding: 10px 20px;
			text-align: center;
		}

			main .stats .fans big {
				-webkit-background-clip: text;
				-webkit-font-smoothing: antialiased;
				background-image: var(--fans);
				color: transparent;
				display: block;
				font: 500 7.25em / 6.35rem var(--big);
			}

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

		main .stats .info {
			padding: 10px 20px;
		}

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

			main .stats .info .links {
				width: 85%;
			}

			main .stats .info strong, main .stats .info a {
				font-size: 1em;
			}

				main .stats .info a.img::after {
					background: none;
					border-radius: 0;
					bottom: 0;
					content: "";
					height: 0;
					left: 7px;
					position: absolute;
					transition: none;
					width: 0;
					z-index: 0;
				}

					main .stats .info a.img:hover::after {
						bottom: 0;
						height: 100%;
						left: 0;
						opacity: .85;
					}

					main .stats .info .ph-bold, main .member .ph-bold {
						color: var(--muted);
						font-size: .75em;
						margin: 0 5px;
					}

	main .member {
		background: rgba(255, 255, 255, .2);
		border-radius: .75rem;
		justify-self: center;
		padding: 25px 0;
		position: relative;
		width: 100%;
	}

			main .member::before {
				border-left: 3px solid rgba(var(--primaryRGB), .5);
				border-radius: .85rem .15rem 0 .15rem;
				border-top: 3px solid rgba(var(--primaryRGB), .5);
				height: 60px;
				margin-left: -5px;
				margin-top: -5px;
				width: 60px;
			}

			main .member::after {
				border-bottom: 3px solid rgba(var(--primaryRGB), .5);
				border-radius: 0 .15rem .85rem .15rem;
				border-right: 3px solid rgba(var(--primaryRGB), .5);
				height: 60px;
				margin-bottom: -5px;
				margin-right: -5px;
				width: 60px;
			}

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

footer {
	background: url('../assets/img/fhead.png'), url('../assets/img/fbg.png');
	background-repeat: repeat-x, repeat;
	color: var(--white);
	font-size: .985em;
	font-weight: 500;
	margin-top: 65px;
	padding: 105px 0 45px 0;
	position: relative;
	text-align: center;
}

	footer span {
		background: rgba(var(--infoRGB), .15);
		border-radius: .35rem;
		box-decoration-break: clone;
		padding: 2px 3px;
	}

	footer strong, footer em {
		text-shadow: 0px 0px var(--light);
	}

		footer strong {
			color: #CE847E;
			font-weight: 800;
		}

		footer em {
			color: #c88b4a;
			font-weight: 700;
		}

		footer a {
			color: #978367;
			font-size: 1.055em;
			font-weight: 500;
			overflow: hidden;
			position: relative;
			text-decoration: none;
			text-wrap-mode: nowrap;
		}

		footer a::after {
			background: rgba(var(--brownRGB), .25);
			border-radius: .25rem;
			bottom: -4px;
			box-decoration-break: clone;
			content: "";
			height: calc(100% - 8px);
			left: 7px;
			position: absolute;
			transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
			width: calc(100% - 2.5px);
			z-index: 0;
		}

		footer a:hover::after {
			bottom: -1px;
			height: 100%;
			left: -4px;
			width: calc(100% + 7px);
		}

	.btm-border {
		background: url('../assets/img/fbor.png');
		display: block;
		margin: 0;
		max-width: 100%;
		padding: 10px;
		position: relative;
		width: 100%;
	}

		.btm-border:before {
			-webkit-clip-path: polygon(100% 100%, 0 100%, 100% 47%);
			background: url('../assets/img/fbor.png');
			bottom: 19px;
			clip-path: polygon(100% 100%, 0 100%, 100% 47%);
			content: '';
			height: 35px;
			left: 0;
			position: absolute;
			width: 100%;
		}

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

p {
	margin-bottom: 1.5rem;
}

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

	p:last-child {
		margin-bottom: 0;
	}

	#show-affiliates p {
		margin-bottom: 0 !important;
		text-indent: 0px;
	}

.sitetitle {
	-webkit-background-clip: text;
	-webkit-font-smoothing: antialiased;
	background-image: var(--sitetitle);
	color: transparent;
	font: 400 1em var(--title);
	opacity: .87;
	text-transform: uppercase;
}

main a {
	color: #D0AC03;
	font-size: 1.055em;
	font-weight: 500;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	text-wrap-mode: nowrap;
}

	main a::after {
		background: rgba(239, 202, 83, .2);
		border-radius: .25rem;
		bottom: -4px;
		box-decoration-break: clone;
		content: "";
		height: calc(100% - 8px);
		left: 7px;
		position: absolute;
		transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
		width: calc(100% - 2.5px);
		z-index: 0;
	}

		main a:hover::after {
			bottom: -1px;
			height: 100%;
			left: -4px;
			width: calc(100% + 7px);
		}

strong {
	color: var(--primary);
	font-size: 1.05em;
	letter-spacing: .75px;
}

em {
	color: var(--info);
	font: italic 600 1.055em var(--serif);
	letter-spacing: .75px;
}

u {
	color: var(--success);
	text-decoration: underline var(--brown) wavy 1px;
	text-underline-offset: 2px;
}

s {
	color: var(--danger);
}

.text-muted, del {
	color: var(--muted) !important;
}

.love {
	color: #e19e96;
	font-size: .85em;
}

ul {
	columns: 2;
	list-style-type: hiragana;
	padding: 0 0 0 3.75rem;
}

	li {
		padding: 0 0 3.5px 0;
	}

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

.alert {
    cursor: pointer;
    font-weight: 500;
    letter-spacing: .45px;
    transition: .5s;
    word-spacing: .75px;
}

	.alert::before {
		border-bottom-right-radius: 3px;
		border-top-right-radius: 3px;
		border-left: 1px solid;
		border-right: 2px solid;
		content: '';
		height: calc(100% - 30px);
		left: 0;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 0;
	}

	.alert::after {
		border-bottom-left-radius: 3px;
		border-top-left-radius: 3px;
		border-left: 2px solid;
		border-right: 1px solid;
		content: '';
		height: calc(100% - 30px);
		right: 0;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 0;
	}

	.alert-light {
	    background: rgba(var(--whiteRGB), .3);
	    border: 1px solid rgba(var(--mutedRGB), .15);
	    color: var(--muted);
	}

		.alert-light::before {
			border-left-color: rgba(var(--primaryRGB), .65);
			border-right-color: rgba(var(--primaryRGB), .65);
		}

		.alert-light::after {
			border-left-color: rgba(var(--infoRGB), .65);
			border-right-color: rgba(var(--infoRGB), .65);
		}

	.alert-info {
	    background: rgba(var(--dangerRGB), .17);
	    border: 1px solid rgba(var(--dangerRGB), .25);
	    color: var(--danger);
	}

		.alert-info::before {
			border-left-color: rgba(var(--dangerRGB), .65);
			border-right-color: rgba(var(--dangerRGB), .65);
		}

		.alert-info::after {
			border-left-color: rgba(var(--infoRGB), .65);
			border-right-color: rgba(var(--infoRGB), .65);
		}

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

.forms-div {
	background: rgba(var(--whiteRGB), .3);
	border: 1px solid rgba(var(--mutedRGB), .15);
	color: var(--muted);
	letter-spacing: .45px;
	margin: 0 auto;
	padding: 1rem;
	position: relative;
	transition: .5s;
	width: 43%;
	word-spacing: .75px;
}

	.forms-div::before {
		border-bottom-right-radius: 3px;
		border-left: 1px solidrgba(var(--primaryRGB), .65);
		border-right: 2px solid rgba(var(--primaryRGB), .65);
		border-top-right-radius: 3px;
		content: '';
		height: calc(100% - 30px);
		left: 0;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 0;
	}

	.forms-div::after {
		border-left-color:;
		border-bottom-left-radius: 3px;
		border-left: 2px solid rgba(var(--infoRGB), .65);
		border-right: 1px solid rgba(var(--infoRGB), .65);
		border-top-left-radius: 3px;
		content: '';
		height: calc(100% - 30px);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
		width: 0;
	}

form {
	color: var(--text);
	margin-top: 4.5rem;
}

	.field {
		height: auto;
		justify-self: center;
		position: relative;
		width: 90%;
	}

		.field::before {
			content: "";
			left: 0;
			position: absolute;
			top: 0;
			z-index: -1;
		}

		.field::after {
			bottom: 0;
			content: "";
			position: absolute;
			right: 0;
			z-index: -1;
		}

	legend {
		-webkit-font-smoothing: antialiased;
		background: var(--primary) url('../assets/img/lbg.png') center center;
		border-radius: .35rem;
		color: var(--white);
		font: 400 1.2em/1.65em var(--title); 
		letter-spacing: 2.5px;
		margin: -59px 0 0 5px;
		padding: 3px 15px;
		text-shadow: 2px 2px #d59595;
		width: fit-content;
	}

	.fieldset {
		background: rgba(255, 255, 255, .27);
		border-radius: .75rem;
		margin: 2.75rem 0 0 0;
		padding: 35px 30px 25px 30px;
		position: relative;
	}

			.fieldset::before {
				border-left: 3px solid rgba(var(--primaryRGB), .5);
				border-radius: .85rem .15rem 0 .15rem;
				border-top: 3px solid rgba(var(--primaryRGB), .5);
				height: 100px;
				margin-left: -5px;
				margin-top: -5px;
				width: 100px;
			}

			.fieldset::after {
				border-bottom: 3px solid rgba(var(--primaryRGB), .5);
				border-radius: 0 .15rem .85rem .15rem;
				border-right: 3px solid rgba(var(--primaryRGB), .5);
				height: 100px;
				margin-bottom: -5px;
				margin-right: -5px;
				width: 100px;
			}

		fieldset p, fieldset strong {
			font-size: .975em;
		}

		.form-control, .form-select {
			background-color: rgba(var(--whiteRGB), .28);
			color: var(--text);
			line-height: 1.75em;
		}

		.form-check-input {
			margin-top: .3em;
		}

			.form-check-input:checked {
				background-color: var(--info);
				border-color: var(--info);
			}

		.req {
			color: var(--warning);
		}

		.form-text {
			color: var(--text);
		}

/* >> button styles >> */

.btn {
	-webkit-font-smoothing: antialiased;
	border: 0;
	font: 400 .875em/1.885em var(--title);
	letter-spacing: 1.5px;
	margin: 0 3.5px 5px 3.5px;
	padding: .385rem 1.25rem;
}

	.btn-success {
		background: var(--success) url('../assets/img/sbg.png');
		text-shadow: 2px 2px #7a9b6c;
	}

	.btn-danger {
		background: var(--danger) url('../assets/img/dbg.png');
		text-shadow: 2px 2px #d18a8a;
	}

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

#s-m-t-tooltip {
	background: var(--dark);
	border-radius: .3rem;
	color: var(--bg);
	font: 600 .75em var(--sans);
	letter-spacing: 1.5px;
	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;
	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 center;
		background-position: 70% 0%;
		background-size: 250%;
		height: 375px;
	}

	main .stats {
		width: 100%;
	}

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

	main h1 {
		font-size: 2.75em;
	}

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

	.forms-div {
		margin-top: 3rem;
		width: 100%;
	}

	form {
		width: 100%;
	}

	.alert-light {
		width: 85% !important;
	}
}

@media only screen and (min-width: 768px) {
	header {
		background: url(../assets/img/header.png) no-repeat center;
		background-position: 67% 0%;
		background-size: 200%;
		height: 545px;
	}

	main .stats {
		width: 70%;
	}

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

	main h2 {
		text-align: left;
	}

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

	.forms-div {
		margin-top: 3rem;
		width: 50%;
	}

	form {
		width: 100%;
	}

	.alert-light {
		width: 75%;
	}
}

@media only screen and (min-width: 992px) {
	header {
        background: url(../assets/img/header.png) no-repeat center;
        background-position: 67% 0%;
        /* background-size: 200%; */
        height: 680px;
	}

	aside nav a.nav-link {
		font: 400 1.325em var(--title);
	}

	main .stats {
		width: 90%;
	}

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

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

	.alert-light {
		margin-top: 0;
		width: 45%;
	}

	.forms-div {
		margin-top: 3rem;
		width: 50%;
	}

	form {
		width: 100%;
	}
}

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

	main .stats {
		width: 80%;
	}

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

	.alert-light {
		width: 35%;
	}

	.alert-info {
		width: 97%;
		margin: 0 auto;
	}

	.forms-div {
		margin-top: 1rem;
		width: 43%;
	}

	form {
		width: 100%;
	}
}