/*
 * ==========================================================================
 * # THEME STYLESCAPE
 * ==========================================================================
 */



/*
 * Breakpoints
 
@media( min-width: 500px )  {}
@media( min-width: 1000px ) {}
@media( min-width: 1500px ) {}
 
 */





/* -- html -- */
html {
	scroll-behavior: smooth;
	/* CSS to apply easing effect */
	scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
	/* Custom cubic-bezier easing */
}



/* -- body -- */

body,
.body {
	font-family: "Poppins", Arial, sans-serif;
	font-weight: 400;
	min-height: 100vh;
	/* Helps with Copyright Section on empty pages */
}





/*
 * ==========================================================================
 * Typography Helpers
 * ==========================================================================
 */



a {
	text-decoration: none;
}


/*
 * Font Size
 * Applies the fluid font size variables from 0-root.css to any element.
 */

.h1 {
	font-size: var(--h1);
}

.h2 {
	font-size: var(--h2);
}

.h3 {
	font-size: var(--h3);
}

.h4 {
	font-size: var(--h4);
}

.h5 {
	font-size: var(--h5);
}

.h6 {
	font-size: var(--h6);
}

.p {
	font-size: var(--p);
}

.label {
	font-size: var(--label);
}

.small {
	font-size: var(--small);
}



/*
 * Font Weight
 * Controls the boldness of text.
 */

.w-100 {
	font-weight: 100;
}

.w-200 {
	font-weight: 200;
}

.w-300 {
	font-weight: 300;
}

.w-400 {
	font-weight: 400;
}

.w-500 {
	font-weight: 500;
}

.w-600 {
	font-weight: 600;
}

strong,
.strong,
.w-700 {
	font-weight: 700;
}

.w-800 {
	font-weight: 800;
}

.w-900 {
	font-weight: 900;
}



/*
 * Font Style
 */

em,
.em {
	font-style: italic;
}

.font-h {
	font-family: "ltc-globe-gothic", Times, serif;
	font-weight: 700;
	line-height: 1.125;
}



/*
 * Line Height
 * Controls the vertical space between lines of text.
 */

.line-height-tight {
	line-height: 1.25;
}

.line-height-normal {
	line-height: 1.5;
}

.line-height-loose {
	line-height: 1.75;
}

.line-height-tight-tight {
	line-height: 1;
}

.line-height-loose-loose {
	line-height: 2;
}



/*
 * Letter Spacing
 * Controls the horizontal space between characters.
 */

.letter-spacing-normal {
	letter-spacing: normal;
}

.letter-spacing-tight {
	letter-spacing: calc((var(--space-25)/15)* -1);
}

.letter-spacing-loose {
	letter-spacing: calc(var(--space-25)/15);
}

.letter-spacing-tight-tight {
	letter-spacing: calc((var(--space-25)/7.5)* -1);
}

.letter-spacing-loose-loose {
	letter-spacing: calc(var(--space-25)/7.5);
}





/*
 * ==========================================================================
 * Color & Fill Helpers
 * ==========================================================================
 */



/*
 * Text Color Utilities
 * Applies a specific theme color to the text.
 */

.text-background {
	color: var(--hue-background);
}

.text-foreground {
	color: var(--hue-foreground);
}

.text-primary-dark-3 {
	color: var(--hue-violet-dark-3);
}

.text-primary-dark-2 {
	color: var(--hue-violet-dark-2);
}

.text-primary-dark-1 {
	color: var(--hue-violet-dark-1);
}

.text-primary {
	color: var(--hue-violet);
}

.text-primary-light-1 {
	color: var(--hue-violet-light-1);
}

.text-primary-light-2 {
	color: var(--hue-violet-light-2);
}

.text-primary-light-3 {
	color: var(--hue-violet-light-3);
}

.text-secondary {
	color: var(--hue-secondary);
}

.text-red {
	color: var(--hue-red);
}

.text-green {
	color: var(--hue-green);
}

.text-blue {
	color: var(--hue-blue);
}

.text-neutral-10 {
	color: var(--hue-mono-10);
}

.text-neutral-20 {
	color: var(--hue-mono-20);
}

.text-neutral-30 {
	color: var(--hue-mono-30);
}

.text-neutral-40 {
	color: var(--hue-mono-40);
}

.text-neutral-50 {
	color: var(--hue-mono-50);
}

.text-neutral-60 {
	color: var(--hue-mono-60);
}

.text-neutral-70 {
	color: var(--hue-mono-70);
}

.text-neutral-80 {
	color: var(--hue-mono-80);
}

.text-neutral-90 {
	color: var(--hue-mono-90);
}

.text-gradient {
	background-image: linear-gradient(135deg, #2A00FF, #9F00FF, #E500FF, #FF0055);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: saturate(125%);
}



/*
 * Background Fill Utilities
 * Applies a background color and automatically sets a contrasting text color.
 */


.fill-background {
	background-color: var(--hue-background);
}

.fill-foreground {
	background-color: var(--hue-foreground);
}

.fill-primary-dark-3 {
	background-color: var(--hue-violet-dark-3);
}

.fill-primary-dark-2 {
	background-color: var(--hue-violet-dark-2);
}

.fill-primary-dark-1 {
	background-color: var(--hue-violet-dark-1);
}

.fill-primary {
	background-color: var(--hue-violet);
}

.fill-primary-light-1 {
	background-color: var(--hue-violet-light-1);
}

.fill-primary-light-2 {
	background-color: var(--hue-violet-light-2);
}

.fill-primary-light-3 {
	background-color: var(--hue-violet-light-3);
}

.fill-secondary {
	background-color: var(--hue-secondary);
}

.fill-error {
	background-color: var(--hue-error);
}

.fill-success {
	background-color: var(--hue-success);
}

.fill-warning {
	background-color: var(--hue-warning);
}

.fill-neutral-10 {
	background-color: var(--hue-mono-10);
}

.fill-neutral-20 {
	background-color: var(--hue-mono-20);
}

.fill-neutral-30 {
	background-color: var(--hue-mono-30);
}

.fill-neutral-40 {
	background-color: var(--hue-mono-40);
}

.fill-neutral-50 {
	background-color: var(--hue-mono-50);
}

.fill-neutral-60 {
	background-color: var(--hue-mono-60);
}

.fill-neutral-70 {
	background-color: var(--hue-mono-70);
}

.fill-neutral-80 {
	background-color: var(--hue-mono-80);
}

.fill-neutral-90 {
	background-color: var(--hue-mono-90);
}

.fill-gradient {
	background-image: linear-gradient(135deg, #2A00FF, #9F00FF, #E500FF, #FF0055);
	color: #FFF;
}






/*
 * ==========================================================================
 * Input Elements
 * ==========================================================================
 */

button,
.button {
	border-radius: var(--space-min);
	letter-spacing: calc(var(--label) * 0.05);
	font-weight: 500;
	text-transform: uppercase;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select {
	font-size: var(--p);
	border-color: var(--hue-violet-light-3);
	border-radius: var(--space-min);
}

select { appearance: base-select; }
select::picker-icon {
  content: "\23F7";
  color: inherit;
}

.form {
	hr {
		grid-column: 1 / -1;
	}
}

.form-heading {
	font-size: var(--h6);
	letter-spacing: calc(var(--h6) * 0.02);
	font-weight: 500;
	opacity: 75%;
	line-height: 1.2;
	padding: var(--space-25) 0;
	grid-column: 1 / -1;
}

.form-label {
	display: inline-block;
	letter-spacing: calc(var(--label) * 0.02);
	font-weight: 600;
	opacity: 75%;
	line-height: 1.2;
	padding-bottom: var(--space-min);
}

.form-field {}

.form-field:focus-within {
	.form-label {
		color: var(--hue-violet);
		opacity: 100%;
	}
	.form-input {
		border-color: var(--hue-violet);
	}
}



/*.form-input {}

.input-label {
	font-size: var(--small);
	font-weight: 500;
	text-transform: uppercase;
}

.input-field {}

.form-input:focus-within .input-label {
	color: var(--hue-violet);
}

.form-input:focus-within .input-field {
	color: var(--hue-violet);
	border-color: var(--hue-secondary);
}*/

/*select.button {
	background-image: url('/media/select-white.png');
	background-size: auto 45%;
	background-repeat: no-repeat;
	background-position: right var(--p) center;
}*/


/*
 * ==========================================================================
 * Border & Shadow Helpers
 * ==========================================================================
 */



/*
 * Border Radius
 * Applies rounded corners using the fluid spacing variables.
 */

.radius-min {
	border-radius: var(--space-min);
}

.radius-25 {
	border-radius: var(--space-25);
}

.radius-50 {
	border-radius: var(--space-50);
}

.radius-round {
	border-radius: 9999px;
}

/* For creating circles/pills */




/*
 * Box Shadow
 * Applies pre-defined, theme-aware shadow styles.
 * Shadow dimensions are proportional to the base paragraph font size (--p).
 */

.box-shadow {
	box-shadow:
		0 0 var(--border-width) color-mix(in srgb, var(--hue-background) 15%, transparent),
		0 var(--border-width) calc(var(--space-min)/1) color-mix(in srgb, var(--hue-background) 15%, transparent);
}

.box-shadow-inset {
	box-shadow:
		inset 0 0 var(--border-width) color-mix(in srgb, var(--hue-background) 15%, transparent),
		inset 0 var(--border-width) calc(var(--space-min)/1) color-mix(in srgb, var(--hue-background) 15%, transparent);
}



/*
 * Box Border (using box-shadow)
 * A clever way to add an inset border without affecting layout.
 */

.box-border-dark {
	box-shadow: inset 0 0 0 var(--border-width) var(--hue-background);
}

.box-border-light {
	box-shadow: inset 0 0 0 var(--border-width) var(--hue-background);
}

.box-border-primary {
	box-shadow: inset 0 0 0 var(--border-width) var(--hue-violet);
}



/*
 * ==========================================================================
 * Animation Helpers
 * ==========================================================================
 */

/*
 * Scroll-Triggered Animations
 * These animations activate when an element enters the viewport.
 * Uses modern CSS @supports to only apply to browsers that support
 * `animation-timeline: view()`.
 */

@supports (animation-timeline: view()) {

	/* --- Fade Up Animation --- */
	.fade-up-animation {
		scale: 0.9;
		opacity: 0;
		animation: fade-up linear forwards;
		animation-timeline: view();
		animation-range: entry 10% cover 40%;
	}

	@keyframes fade-up {
		to {
			scale: 1;
			opacity: 1;
		}
	}

	/* --- Slide In From Left Animation --- */
	.slide-in-left-animation {
		translate: -50px 0;
		opacity: 0;
		animation: slide-in-left linear forwards;
		animation-timeline: view();
		animation-range: entry 10% cover 40%;
	}

	@keyframes slide-in-left {
		to {
			translate: 0 0;
			opacity: 1;
		}
	}
}





/*
 * ==========================================================================
 * Section
 * ==========================================================================
 */

.gap {
	margin-top: calc(var(--container-width)/4);
}

@media(min-width: 500px) {
	.gap {
		margin-top: calc(var(--container-width)/6);
	}
}

@media(min-width: 1000px) {
	.gap {
		margin-top: calc(var(--container-width)/8);
	}
}

.small-gap {
	margin-top: calc(var(--container-width)/8);
}

@media(min-width: 500px) {
	.small-gap {
		margin-top: calc(var(--container-width)/12);
	}
}

@media(min-width: 1000px) {
	.small-gap {
		margin-top: calc(var(--container-width)/16);
	}
}

.section-heading {}

.section-label {
	display: block;
	font-weight: 600;
	text-transform: uppercase;
	padding-bottom: var(--space-25);
	letter-spacing: calc(var(--label)/16);
}