/* ----------------------------------------------------------------
 Uncharted-Sky v2.0
 https://uncharted-sky.org
 DO NOT STEAL, MODIFY, USE, CLAIM, OR REDISTRIBUTE ANY OF MY CODES!
 Coding and content © Kupo; Created January 2025
---------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Fredoka:wght@300..700&family=Grandstander:ital,wght@0,100..900;1,100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
	font-family: 'Losta Masta';
	src: url('../assets/fonts/LostaMasta_Regular.otf') format('opentype');
}

@font-face {
	font-family: 'Losta Masta Medium';
	src: url('../assets/fonts/LostaMasta_Medium.otf') format('opentype');
}

:root {
	/* >> color palette >> */
	--bg: #E3E3E3;
	--text: #727882  /* #636975 */;
	--header: #4F545D;

	/* accent colors */
	--primary: #DE9E9E;
	--secondary: #8AB7B4;
	--info: #AAA0B1;
	--success: #9BA98F;
	--warning: #DFCC8A;
	--danger: #DA6556;

	/* basic colors */
	--brown: #C2A78C /* #A59C96 */;
	--green: #598A75;

	--dark: #31343A;
	--muted: #B1B4BA;
	--light: #EAEAEA;
	--white: #FFF;

	/*>> accent colors rgb >> */
	--primaryRGB: 222, 158, 158;
	--secondaryRGB: 138, 183, 180;
	--infoRGB: 170, 160, 177;
	--successRGB: 155, 169, 143;
	--warningRGB: 223, 204, 138;
	--dangerRGB: 218, 101, 86;
	--darkRGB: 49, 52, 58;
	--mutedRGB: 177, 180, 186;
	--greenRGB: 89, 138, 117;

	/* >> lovely fonts >> */
	--title: 'Losta Masta', sans-serif;
	--sans: 'Bricolage Grotesque', sans-serif;
	--sansb: 'Overpass', sans-serif;
	--sansc: 'Fredoka', sans-serif;
	--sansd: 'Grandstander', sans-serif;
	--serif: 'Noto Serif Display', serif;

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

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

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

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

body {
	background: var(--bg);
	border-top: 8px solid var(--dark);
	color: var(--text);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .25px;
	line-height: 1.85em;
}

.g-4h, .gx-4h {
    --bs-gutter-x: 2.25rem;
}

.primary { color: var(--primary); }
	.primary-bg { background: var(--primary); }
.secondary { color: var(--secondary); }
	.secondary-bg { background: var(--secondary); }
.info { color: var(--info); }
	.info-bg { background: var(--info); }
.success { color: var(--success); }
	.success-bg { background: var(--success); }
.warning { color: var(--warning); }
	.warning-bg { background: var(--warning); }
.danger { color: var(--danger); }
	.danger-bg { background: var(--danger); }

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

header {
	align-content: center;
	background: url("../assets/img/header.jpg") top center;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	overflow: hidden;
	position: relative;
	text-align: center;
	top: 0;
	width: 100%;
}

	.navbar {
		align-content: start;
		align-items: start;
		background: transparent;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0;
		position: relative;
		z-index: 100;
	}

		.navbar-collapse {
			flex-grow: 0;
		}

		.navbar-nav {
			align-items: center;
			background: var(--dark);
			border-radius: 0 0 .85rem .85rem;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			flex: 0 0 auto;
			gap: 5px;
			justify-content: start;
			line-height: 1.85rem;
			margin: -1px 0 0 0;
			padding: 0 15px;
			position: relative;
			width: auto;
		}

			.navbar-nav:before {
				background: transparent;
				border-radius: 0 10px 0 0;
				box-shadow: 0 -10px 0 var(--dark);
				content: '';
				height: 20px;
				left: -20px;
				position: absolute;
				top: 0;
				width: 20px;
			}

			.navbar-nav:after {
				background: transparent;
				border-radius: 10px 0 0 0;
				box-shadow: 0 -10px 0 var(--dark);
				content: '';
				height: 20px;
				position: absolute;
				right: -20px;
				top: 0;
				width: 20px;
			}

			 a.nav-link {
				color: var(--light);
				font-family: var(--serif);
				font-size: 1.085rem;
				font-style: italic;
				font-weight: 800;
				height: 50px;
				letter-spacing: 2px;
				margin: 0;
				padding: 10px 0;
				text-transform: lowercase;
			}

				a.nav-link:hover {
					background: url("../assets/img/target.png") no-repeat center left;
					background-size: 40px 40px;
					color: var(--light);
					transition: .15s;
				}

			.navbar links {
				align-content: center;
				align-items: center;
				display: inline-flex;
				flex-direction: row;
				flex-wrap: wrap;
				flex: 0 0 auto;
				gap: 9px;
				justify-content: start;
				line-height: 1.85rem;
				margin: 0 0 0 9px;
			}

				.navbar links a, .navbar links button {
					background: var(--dark);
					border-radius: .5rem;
					border: none;
					color: var(--light);
					flex: 0 0 auto;
					font-size: 15px;
					height: 33px;
					margin: 0;
					overflow: hidden;
					padding: 0;
					text-align: center;
					width: 33px;
				}

				.navbar links button:hover {
					background: var(--dark);
					color: var(--light);
				}

				.navbar links a i {
					height: 33px;
					width: 33px;
				}

				.navbar links button i {
					font-size: 1.125em;
					line-height: 33px;
				}

				.navbar links button svg {
					height: 17px;
					margin-top: -2px;
					width: 17px;
				}

				.navbar links .iconsax svg {
					height: 18px;
					margin-top: 2.5px;
					width: 18px;
				}

				.navbar links a.mn {
					background: var(--dark) var(--plaid) center bottom;
					background-size: 70%;
					border-radius: .5rem;
					color: var(--light);
					display: inline-flex;
					flex: 0 0 auto;
					font: 500 .825rem var(--sansc);
					gap: 10px;
					height: 33px;
					letter-spacing: 1.85px;
					line-height: 2rem;
					overflow: hidden;
					padding: 0 13px;
					text-transform: uppercase;
					width: auto;
				}

	header #tsparticles {
		height: 100%;
		position: absolute;
		width: 100%;
		z-index: 8;
	}

	header .site-title {
		background: url("../assets/img/target.png") no-repeat top 85px right 0px;
		margin: 15px 0 0 0;
		padding: 0 120px 0 0;
		position: absolute;
		right: 0;
		z-index: 9;
	}

		header h1 {
			font-size: 7.75rem;
			font-style: normal;
			text-shadow: 2.5px 2.35px var(--white);
			z-index: 10;
		}

			header h1.uncharted {
				margin: 50px 0 0 0;
			}

			header h1.sky {
				margin: -95px -50px 0 0;
				text-transform: none;
			}

			header .bgtxt {
				opacity: .25;
				position: absolute;
				right: 70px;
				top: 30px;
				z-index: 9;
			}

				header h6.uncharted {
					-webkit-text-stroke: 1px var(--white);
					color: transparent;
					font-family: var(--title);
					font-size: 10.25rem;
				}

				header h6.sky {
					-webkit-text-stroke: 1px var(--white);
					color: transparent;
					font-family: var(--title);
					font-size: 10.25rem;
					margin: -90px -150px 0 0;
				}

	header .img-container {
		align-content: center;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 635px;
		justify-content: center;
		margin: -49px auto 0 auto;
		position: relative;
		width: 1320px;
	}
		
		header .balgo {
		  animation: floating 2.7s infinite ease-in-out alternate;
		  left: 57%;
		  max-width: 235px;
		  position: absolute;
		  top: 2%;
		  z-index: 7;
		}

		header .ninny {
		  animation: floating 1.4s infinite ease-in-out alternate;
		  max-width: 563px;
		  position: absolute;
		  right: 60%;
		  top: 11%;
		  z-index: 10;
		}

		header .noel {
		  animation: floating 2s infinite ease-in-out alternate;
		  left: 23%;
		  max-width: 390px;
		  position: absolute;
		  top: 12%;
		  z-index: 10;
		}

		header .tower {
		  left: 48%;
		  mix-blend-mode: multiply;			
		  position: absolute;
		  top: 0;
		  z-index: 5;
		}

		header .waves {
			background: linear-gradient(to bottom, transparent 35px, var(--light));
			background-size: 225% 225%;
			border-bottom: 50px solid var(--white);
			filter: contrast(78%);
			height: 500px;
			overflow: hidden;
			position: absolute;
			top: 150px;
			width: 100%;
			z-index: 9;
		}

			header .wave {
				animation: wave calc(var(--speed, 0) * 2s) infinite linear;
				background-image: url("https://assets.codepen.io/605876/wave--infinite.svg");
				background-size: 50% 100%;
				bottom: -5%;
				height: calc(var(--height, 0) * 1vh);
				left: 0;
				opacity: var(--opacity);
				position: absolute;
				right: 0;
				width: calc(var(--width, 0) * 1vw);
			}

				header .wave:nth-of-type(1) {
					--height: 14;
					--opacity: .3;
					--speed: 100;
					--width: 800;
				}

				header .wave:nth-of-type(2) {
					--height: 12;
					--opacity: .6;
					--speed: 100;
					--width: 600;
				}

				header .wave:nth-of-type(3) {
					--height: 8;
					--opacity: 1;
					--speed: 100;
					--width: 500;
				}


/* -----------------------------------
>>  [  --- content styles ---  ]
------------------------------------*/

main {
	font-size: 1.035rem;
	margin-top: -10px;
	position: relative;
	text-align: justify;
	z-index: 11;
}

	main a {
		background: linear-gradient(to right, RGBA(var(--successRGB), .27), RGBA(var(--secondaryRGB), .27));
		background-position: bottom;
		background-repeat: repeat-x;
		background-size: 100% 45%;
		border-radius: .15rem;
		box-decoration-break: clone;
		color: var(--text);
		margin: 0 -1px -1px -1px;
		padding: 0px 1px 1px 1px;
		text-decoration: none;
		transition: all 0.3s ease;
	}

		main a:hover {
			background: linear-gradient(to right, RGBA(var(--successRGB), .35), RGBA(var(--secondaryRGB), .35));
			background-position: bottom;
			background-repeat: repeat-x;
			background-size: 100% 12%;
			box-decoration-break: clone;
			text-decoration: none;
			text-shadow: 2px 2px var(--bg);
			transition: all 0.3s ease;
		}

		main a.link {
			background: none;
		}

	main li {
		list-style-type: katakana;
		margin-bottom: 1px;
	}

	main img.joined {
		background: var(--light) var(--dots);
		margin: 5.5px 1.5px;
		opacity: .8;
		padding: 4.5px;
	}

		main img.joined:hover {
			opacity: .95;
		}

	main img.linkbtn {
		background: var(--light) var(--dots);
		margin: 5.5px 0;
		opacity: .85;
		padding: 3.5px;
	}

		main img.linkbtn:hover {
			opacity: .95;
		}

	main .div {
		background: url("../assets/img/div.png") repeat-x;
		height: 13px;
		margin: 0 auto;
		width: 292px;
	}

	main .statistics {
		align-content: center;
		align-items: stretch;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		height: auto;
		justify-content: start;
		margin: 0 auto;
		padding: 50px 100px 25px 100px;
		width: 100%;
	}

		main .statistics numbers {
			align-content: center;
			align-items: center;
			background: var(--light);
			border-radius: .85rem 0 0 .85rem;
			flex-direction: row;
			flex-wrap: wrap;
			flex: 0 0 auto;
			gap: 20px;
			height: auto;
			justify-content: start;
			margin: 25px 0;
			padding: 30px 35px 27px 30px;
			position: relative;
			width: calc(100% - 185px - 110px);
			z-index: 7;
		}

			main .statistics numbers h3 {				
				-webkit-text-stroke: 0px var(--muted);
				color: var(--muted);
				font: 500 5.25em var(--sansc);
				margin: -18px 0 0 0;
				text-shadow: 0 0 0 var(--light);
			}

			main .statistics numbers p {
				font-size: .885em;
				margin-top: -8px;
			}

			main .statistics numbers div.deco {
				background: url(../assets/img/div.png);
				bottom: -7px;
				height: 13px;
				position: absolute;
				right: -185px;
				width: 292px;
			}

			main .statistics numbers .updated {
				font-size: .9em;
				margin-top: 15px;
				padding-top: 7px;
				position: relative;
				text-align: center;
			}

				main .statistics numbers .updated i {
					color: var(--warning);
					font-size: .8em;
					margin: 0 3px  0 4px;
				}

		main .statistics stats-img {
			align-content: start;
			align-items: center;
			background: var(--dark) var(--plaid) center center;
			background-size: 75%;
			border-radius: .85rem;
			box-shadow: 0 1px 10px var(--muted);
			color: var(--light);
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			flex: 0 0 auto;
			gap: 30px;
			height: auto;
			justify-content: center;
			margin: 0;
			padding: 0;
			position: relative;
			width: 185px;
			z-index: 8;
		}

			main .statistics stats-img i {
				color: var(--bg);
				font-family: var(--sans);
				font-size: 8.5rem;
				font-style: normal;
				position: absolute;
				right: -9px;
				top: 24px;
			}

			main .statistics stats-img img {
				bottom: -25px;
				flex: 0 0 auto;
				height: auto;
				margin: 0;
				position: absolute;
				right: 55px;
				width: 185px;
			}

			main .statistics stats-img heading {
				background: var(--green) var(--dots);
				border-radius: .5rem;
				bottom: 33px;
				font: 800 italic 1.375rem var(--serif);
				letter-spacing: .75px;
				padding: 3px 10px 5px 10px;
				position: absolute;
				right: 13px;
			}

		main .statistics listed {
			align-content: center;
			align-items: center;
			background: var(--light);
			border-radius: 0 .85rem .85rem 0;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			flex: 0 0 auto;
			gap: 30px;
			height: auto;
			justify-content: center;
			margin: 25px 0;
			padding: 30px 35px;
			position: relative;
			width: 110px;
			z-index: 7;
		}

			main .statistics listed list img {
				background: var(--bg);
				border-radius: 1.25rem;
				flex: 0 0 auto;
				height: 50px;
				margin: 0;
				opacity: .8;
				width: 50px;
			}

				main .statistics listed list img:hover {
					opacity: .9;
				}

			main .statistics listed div.deco {
				background: url(../assets/img/deco.png);
				height: 13px;
				left: -100px;
				position: absolute;
				top: -7px;
				width: 182px;
			}

	main .sortby {
		margin: 30px auto 50px auto;
		padding: 10px 30px 10px 60px;
		position: relative;
		width: fit-content;
	}

		main .sortby:after {
			background: #DEDEDE;
			border-radius: .35rem;
			content: "";
			height: 100%;
			position: absolute;
			right: -3.25%;
			top: 0;
			transform: skewX(-20deg);
			width: 100%;
			z-index: -1;
		}

		main .sortby i {
			color: var(--warning);
			font-size: .85em;
			margin: 0 10px;
		}

	main .abtme {
		float: right;
		margin-left: 17px;
		shape-margin: 17px;
		shape-outside: url(../assets/img/abtme.png);
	}

	main .abtlyt {
		border-radius: .35em;
		border: 1px solid var(--muted);
		float: left;
		margin: 8px 17px 0 0;
	}

	main .top-wish, main .granted-wish {
		background: var(--light) var(--dots);
		border-radius: 50%;
		border: 1px solid rgba(var(--primaryRGB), .35);
		height: 185px;
		margin: 0 7.5px 15px 7.5px;
		object-fit: cover;
		padding: 7px;
		width: 185px;
	}

	main .wishlist {
		background: var(--light);
		border-radius: .75rem;
		font-size: .95em;
		padding: 25px 30px;
		position: relative;
	}

		main .wishlist i {
			color: var(--warning);
			font-size: .75em;
			margin-right: 2px;
		}

		main .wishlist .deco1 {
			position: absolute;
			left: 20px;
			top: -15px;
			z-index: 7;
		}

		main .wishlist .deco2 {
			bottom: -15px;
			position: absolute;
			right: 20px;
			z-index: 7;
		}

	main .admired {
		background: var(--light);
		/* border-left: 1px solid #dadada; */
		border-radius: .75rem;
		margin: 0 0 25px 0;
		padding: 35px 45px 35px 45px;
		position: relative;
	}

		main .admired i {
			color: var(--warning);
			font-size: .75em;
			margin: 0 7.5px;
		}

		main .admired .title {
			background: var(--bg);
			border-radius: 0 0 0 .85rem;
			color: var(--success);
			font-family: var(--sansd);
			font-size: 1em;
			font-weight: 500;
			padding: 0 10px 3px 10px;
			position: absolute;
			right: 0;
			text-align: center;
			text-transform: lowercase;
			top: -5px;
			width: 225px;
			z-index: 5;
		}

			main .admired .title:before {
				border-radius: 0 .85rem;
				box-shadow: .85rem 0 var(--bg);
				content: "";
				height: 50px;
				position: absolute;
				right: 0;
				top: 33px;
				width: 50px;
				z-index: 6;
			}

			main .admired .title:after {
				border-radius: 0 .85rem;
				box-shadow: 0 .85rem var(--bg);
				content: "";
				height: 50px;
				position: absolute;
				right: 225px;
				top: 5px;
				transform: rotate(-180deg);
				width: 50px;
				z-index: 6;
			}

		main .admired .deco1 {
			position: absolute;
			right: 240px;
			top: -15px;
			z-index: 7;
		}

		main .admired .deco2 {
			bottom: -15px;
			left: 15px;
			position: absolute;
			z-index: 7;
		}

/* -----------------------------------
>>  [  --- footer styles ---  ]
------------------------------------*/

footer {
	background: var(--bg) url("../assets/img/footer.jpg") center center;
	background-blend-mode: color-burn;
	background-size: cover;
	color: var(--text);
	margin-top: 75px;
	text-align: center;
	width: 100%;
}

	.footer-div {
		height: 60px;
		overflow: hidden;
		position: relative;
	}

		.footer-div::before {
			background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23E3E3E3"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23E3E3E3"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23E3E3E3"/></svg>'); 
			background-position: 50% 0%;    
			background-repeat: no-repeat; 
			background-size: 100% 60px;
			bottom: -1px;
			content:'';
			left: -1px;
			pointer-events: none;
			position: absolute;
			right: -1px;
			top: -1px;
			z-index: 3;
		}

	footer p {
		font-size: .9em;
		line-height: 1.425em;
		padding: 5px 0 20px 0;
	}

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

	footer a {
		background: linear-gradient(to right, RGBA(var(--greenRGB), .3), RGBA(var(--dangerRGB), .3));
		background-position: bottom;
		background-repeat: repeat-x;
		background-size: 100% 45%;
		border-radius: .15rem;
		box-decoration-break: clone;
		color: var(--text);
		margin: 0 -1px;
		padding: 0px 1px;
		text-decoration: none;
		transition: all 0.3s ease;
	}

		footer a:hover {
			background: linear-gradient(to right, RGBA(var(--greenRGB), .45), RGBA(var(--dangerRGB), .45));
			background-position: bottom;
			background-repeat: repeat-x;
			background-size: 100% 12%;
			box-decoration-break: clone;
			text-decoration: none;
			transition: all 0.3s ease;
		}

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

h1 {
	-webkit-text-stroke: .5px var(--text);
	align-items: flex-start;
	color: transparent;
	display: flex;
	font: 400 italic 3.025rem 'Losta Masta', sans-serif;
	letter-spacing: 1.5px;
	margin: 0 0 3px 0;
	position: relative;
	text-align: right;
	text-shadow: 2.5px 2.35px var(--info);
	text-transform: lowercase;
}

	h1 i {
		text-shadow: 2.5px 2.35px var(--warning);
		margin-top: 7px;
	}

	h1:before {
		background: linear-gradient(to right, rgba(var(--infoRGB), 0.05), rgba(var(--secondaryRGB), 0.15), rgba(var(--primaryRGB), 0.25));
		content: '';
		flex-grow: 1;
		height: 1px;
		margin: auto 23px auto 0;
		min-width: 5px;
	}

h2 {
	-webkit-text-stroke: .5px var(--muted);
	background: url("../assets/img/h2bg.png") no-repeat;
	background-position: left center;
	background-size: 50px 35px;
	color: transparent;
	font-family: var(--title);
	font-size: 2.375rem;
	letter-spacing: 1px;
	padding: 0 0 0 63px;
	position: relative;
	text-shadow: 2px 1.5px var(--brown);
	text-transform: lowercase;
	width: fit-content;
}

h3 {
	-webkit-text-stroke: .5px var(--muted);
	color: transparent;
	font-family: var(--sansd);
	font-size: 1.85rem;
	font-weight: 500;
	margin-bottom: 10px;
	text-align: center;
	text-shadow: 1.5px 1.35px var(--primary);
	text-transform: lowercase;
}

h4 {
	-webkit-text-stroke: .5px var(--muted);
	color: transparent;
	font-family: var(--sansd);
	font-size: 1.675rem;
	letter-spacing: .75px;
	text-align: center;
	text-shadow: 1.5px 1.35px var(--secondary);
	text-transform: lowercase;
}

h5 {
	margin-bottom: 15px;
}

a {
	text-decoration: none;
}

	a:hover {
		text-decoration: none;
	}

strong {
	-webkit-background-clip: text;
	background: linear-gradient(to bottom right, var(--primary), var(--secondary));
	background-clip: text;
	color: transparent;
	filter: brightness(90%);
	font-family: var(--sansd);
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: -.25px;
	text-shadow: none;
}

em {
	color: var(--info);
	font: 400 italic 1em var(--sans);
	letter-spacing: .4px;
	padding-right: 2px;
}

u {
	border-bottom: 1px solid var(--warning);
	color: var(--text);
	text-decoration: none;
}

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

p.joinedImages, p.joinedbyme, p.joinedListings {
	text-align: center;
}

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

.love {
	color: var(--primary);
	font-size: .93em;
}

/* -----------------------------------
>>  [  --- card styles ---  ]
------------------------------------*/

.card {
	background: var(--light);
	border-radius: .85rem;
	border: none;
}

	.card-img-box {
		align-items: center;
		background: var(--light);
		border-radius: 1rem;
		display: flex;
		max-height: 275px;
		justify-content: center;
		overflow: hidden;
		position: relative;
		width: 100%;
	}

		.card-img-top {
			border-radius: .85rem .85rem 0 0;
			object-fit: cover;
		}

	.card-body {
		background: var(--light);
		color: var(--text);
		font-size: .93em;
		padding: 1.5rem 1.85rem;
	}

		.card-title {
			background: var(--light);
			border-radius: 1.25rem;
			color: var(--info);
			font-family: 'Losta Masta Medium', serif;
			font-size: 1.925em;
			font-weight: 400;
			letter-spacing: 2px;
			margin: -55px auto 0 auto;
			padding: 10px 30px;
			position: relative;
			width: fit-content;
			z-index: 2;
		}

			.card-title::before {
				background: transparent;
				border-bottom-right-radius: 1.25rem;
				box-shadow: .313rem .313rem 0 .313rem var(--light);
				content: "";
				height: 1rem;
				left: -1rem;
				position: absolute;
				top: .935rem;
				width: 1rem;
			}

			.card-title::after {
				background: transparent;
				border-bottom-right-radius: 1.25rem;
				box-shadow: .313rem .313rem 0 .313rem var(--light);
				content: "";
				height: 1rem;
				position: absolute;
				right: -1rem;
				transform: scaleX(-1);
				top: .935rem;
				width: 1rem;
			}

		.card-subtitle {
			color: var(--text) !important;
			font-size: 1.25em;
			margin-top: -10px;
			padding: 0;
			position: relative;
			text-align: center;
			z-index: 3;
		}

			.card-subtitle .text-muted {
				font-family: var(--serif);
				font-style: italic;
				font-weight: 800;
			}

		.card-text {
			color: #7b8290;
			font-weight: 500;
			line-height: 1.5em;
		}

	.card-footer {
		background: #dedede;
		border: 0;
		border-radius: 0 0 .85rem .85rem !important;
		color: var(--text);
		text-align: center;
	}

		.card-footer small {
			font-size: .915em;
			font-weight: 500;
		}

		.card-footer i {
			font-size: .875em;
			margin: 0 8px;
			color: var(--secondary);
		}

	.card .visit {
		background: var(--bg);
		border-radius: 0 0 0 .85rem;
		color: var(--text);
		font-family: var(--sansd);
		font-size: 1.275em;
		font-weight: 500;
		padding: 0 10px 5px 10px;
		position: absolute;
		right: 0;
		text-align: center;
		top: 0;
		width: 125px;
		z-index: 5;
	}

		.card .visit:before {
			border-radius: 0 .85rem;
			box-shadow: .85rem 0 var(--bg);
			content: "";
			height: 50px;
			position: absolute;
			right: 0;
			top: 42px;
			width: 50px;
		}

		.card .visit:after {
			border-radius: 0 .85rem;
			box-shadow: 0 .85rem var(--bg);
			content: "";
			height: 50px;
			position: absolute;
			right: 125px;
			top: 0;
			transform: rotate(-180deg);
			width: 50px;
		}

		.card .visit a {
			color: #7b8290;
		}

		.card .visit span {
			color: var(--primary);
			font-family: var(--sans);
			font-size: 1.75em;
			margin-left: 5px;
			position: relative;
			top: 10px;
		}

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

.alert {
	border: 0;
	border-radius: .65rem;
	font-weight: 400;
	line-height: 1.85rem;
	padding: .75rem 1rem;
}

	.alert-dismissible .btn-close {
		padding: 1.15rem;
	}

	.alert-info {
		--bs-alert-color: #66606A;
		--bs-alert-bg: rgba(var(--infoRGB), .55);
	}

	.alert-success {
		--bs-alert-color: #4D5447;
		--bs-alert-bg: rgba(var(--successRGB), .5);
	}

	.alert-warning {
		--bs-alert-color: #776D49;
		--bs-alert-bg: rgba(var(--warningRGB), .5);
	}

	.alert-danger {
		--bs-alert-color: #75362D;
		--bs-alert-bg: rgba(var(--dangerRGB), .5);
	}

fieldset {
	border-bottom: 1px solid #dadada;
	border-radius: .75rem;
	border-top: 1px solid #dadada;
	margin-bottom: 35px;
	padding: 40px 20px 15px 20px;
}

	fieldset:last-of-type {
		margin-bottom: 0;
		padding-bottom: 30px;
	}

	legend {
		background: var(--bg);
		border-left: 1px solid rgba(var(--primaryRGB), .45);
		border-radius: .5rem;
		border-right: 1px solid rgba(var(--primaryRGB), .45);
		color: var(--brown);
		font-family: var(--serif);
		font-size: 1.275em;
		font-style: italic;
		font-weight: 700;
		letter-spacing: .85px;
		margin: -55px 0 0 20px;
		padding: 0 27px 3px 27px;
		text-transform: lowercase;
		width: fit-content;
	}

	.form-control, .form-select {
		background-color: var(--light);
		border-radius: .65rem;
		color: var(--text);
		font-weight: 400;
		letter-spacing: .75px;
		padding: .5rem 1rem;
	}

		.form-control:focus, .form-select:focus {
			background-color: var(--light);
			border-color: var(--secondary);
			box-shadow: 0 0 5px var(--secondary);
			color: var(--text);
			outline: 0;
		}

		.form-control::placeholder {
			color: #829199;
		}

		.form-check-input {
			--bs-form-check-bg: #F3F3F3;
		}

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

		.req {
			color: #CDBE89;
			font-weight: 700;
			margin: 0 3px;
		}

.btn {
	border-radius: .65rem;
	border: 0;
	color: var(--white);
	font-weight: 300;
	letter-spacing: .35px;
	margin: 0 2.5px;
	padding: .5rem .85rem;
}

	.btn-primary {
		--bs-btn-bg: var(--primary);
		--bs-btn-hover-bg: #CC9999;
		--bs-btn-active-bg: #C78E8E;
		background: linear-gradient(to top right, rgba(var(--primaryRGB), .65), rgba(var(--primaryRGB), .9));
	}

	.btn-secondary {
		--bs-btn-bg: var(--secondary);
		--bs-btn-hover-bg: #89ADAB;
		--bs-btn-active-bg: #7CA4A2;
		background: linear-gradient(to top right, rgba(var(--secondaryRGB), .65), rgba(var(--secondaryRGB), .9));
	}

	.btn-info {
		--bs-btn-bg: var(--info);
		--bs-btn-hover-bg: #A39BA8;
		--bs-btn-hover-color: var(--white);
		--bs-btn-active-bg: #99909F;
		--bs-btn-active-color: var(--white);
		background: linear-gradient(to top right, rgba(var(--infoRGB), .65), rgba(var(--infoRGB), .9));
	}

	.btn-success {
		--bs-btn-bg: var(--success);
		--bs-btn-hover-bg: #96A28C;
		--bs-btn-active-bg: #8B9880;
		background: linear-gradient(to top right, rgba(var(--successRGB), .65), rgba(var(--successRGB), .9));
	}

	.btn-warning {
		--bs-btn-bg: var(--warning);
		--bs-btn-hover-bg: #CDBE89;
		--bs-btn-hover-color: var(--white);
		--bs-btn-active-bg: #C8B77C;
		--bs-btn-active-color: var(--white);
		background: linear-gradient(to top right, rgba(var(--warningRGB), .8), rgba(var(--warningRGB), 1));
	}

	.btn-danger {
		--bs-btn-bg: var(--danger);
		--bs-btn-hover-bg: #C96A5E;
		--bs-btn-active-bg: #C45A4D;
		background: linear-gradient(to top right, rgba(var(--dangerRGB), .65), rgba(var(--dangerRGB), .9));
	}

/* -----------------------------------
>>  [  --- table styles ---  ]
------------------------------------*/

table {
	border-collapse: separate;
	border-spacing: 3px;
	margin: 0 auto;
	width: 82.5% !important;
}

	.table {
		--bs-table-color: var(--text);
		--bs-table-bg: var(--light);
		--bs-table-border-color: var(--light);
	}

		.table>:not(caption) > * > * {
			padding: .425rem 1rem;
		}

	th, td {
		border-radius: .5rem;
	}

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

#s-m-t-tooltip {
	background: var(--dark);
	border-radius: .35rem;
	color: var(--bg);
	font: 700 .75em var(--sansb);
	letter-spacing: 1.55px;
	margin: 20px 0 0 10px;
	max-width: 500px;
	padding: 9px 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);
	}

/* -----------------------------------
>>  [  --- animations ---  ]
------------------------------------*/

@keyframes floating {
	from {
		transform: translatey(0px);
	}
	to {
		transform: translatey(-25px);
	}
}

@keyframes wave {
	to {
		transform: translate(-50%, 0);
	}
}

/* -----------------------------------
>>  [  --- mobile styles ---  ]
------------------------------------*/

@media only screen and (max-device-width:576px) {
	.navbar-brand {
		background: var(--dark);
		border-radius: .5rem;
		color: var(--light);
		font-family: var(--serif);
		font-size: 1.25rem;
		font-style: italic;
		font-weight: 800;
		padding: 7px 12px;
		text-transform: lowercase;
	}

	header .balgo {
		display: none;
	}

	header .ninny {
		animation: floating 1.4s infinite ease-in-out alternate;
		max-width: 463px;
		position: absolute;
		right: 33%;
		top: 22%;
		z-index: 10;
	}

	header .noel {
		animation: floating 2s infinite ease-in-out alternate;
		left: 45%;
		max-width: 250px;
		position: absolute;
		top: 20%;
		z-index: 10;
	}

	header .tower {
		display: none;
	}

	.site-title {
		display: none;
	}

	table {
		width: 100% !important;
	}
}

@media (min-width:768px) {
	.footer-div::before {
		background-position: 50% 0%;   
		background-size: 100% 60px;
	}  
}

@media (min-width:1025px) {
	.footer-div::before { 
		background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 773.74 154.98"><g fill="%23e3e3e3"><path d="M0 0h773.74L386.87 77.5Z"/><path d="m0 0 386.87 154.98L773.74 0Z" opacity=".66"/></g></svg>'); 
		background-position: 50% 0%;  
		background-size: 115% 53px;
		bottom: -0.1vw;
		left: -0.1vw;
		right: -0.1vw;
		top: -0.1vw; 
	}
}

@media (min-width:2100px) {
	.footer-div::before {
		background-size: 115% calc(2vw + 53px);
	}
}