@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
	.text-balance {
		text-wrap: balance;
	}
}

@layer base {
	:root {
		--blur-size: 0;
		--background: 0 0% 100%;
		--foreground: 0 0% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 0 0% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 0 0% 3.9%;
		--primary: 0 0% 9%;
		--primary-foreground: 0 0% 98%;
		--secondary: 0 0% 96.1%;
		--secondary-foreground: 0 0% 9%;
		--muted: 0 0% 96.1%;
		--muted-foreground: 0 0% 45.1%;
		--accent: 0 0% 96.1%;
		--accent-foreground: 0 0% 9%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 0 0% 98%;
		--border: 0 0% 89.8%;
		--input: 0 0% 89.8%;
		--ring: 0 0% 3.9%;
		--chart-1: 12 76% 61%;
		--chart-2: 173 58% 39%;
		--chart-3: 197 37% 24%;
		--chart-4: 43 74% 66%;
		--chart-5: 27 87% 67%;
		--radius: 0.5rem;
		--topBarHeight: 5em;
		--text: #F4E8C1
		--neon-bg-color: #05010d;
	}
	.dark {
		--background: 260 86% 3%;
		--foreground: 0 0% 98%;
		--card: 0 0% 3.9%;
		--card-foreground: 0 0% 98%;
		--popover: 0 0% 3.9%;
		--popover-foreground: 0 0% 98%;
		--primary: 0 0% 98%;
		--primary-foreground: 0 0% 9%;
		--secondary: 0 0% 14.9%;
		--secondary-foreground: 0 0% 98%;
		--muted: 0 0% 14.9%;
		--muted-foreground: 0 0% 63.9%;
		--accent: 0 0% 14.9%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 0 0% 14.9%;
		--input: 0 0% 14.9%;
		--ring: 0 0% 83.1%;
		--chart-1: 220 70% 50%;
		--chart-2: 160 60% 45%;
		--chart-3: 30 80% 55%;
		--chart-4: 280 65% 60%;
		--chart-5: 340 75% 55%;
		--shadow-color: black;
	}
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}



/* page setup ============================================= */

* {
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-smooth: antialiased;
}

/* @media (pointer:none), (pointer:coarse) {
    * {
        transition: all .3s;
    }
} */

body {
    top: 0;
    left: 0;
    transition: background 1s ease-in-out;
}

body::-webkit-scrollbar {
    display: none;
}

.wrapper {
	background: none repeat scroll 0 0 var(--background);
	margin: 0 auto;
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
    }

	/* animation ============================================== */

	/* animation: name duration timing-function delay iteration-count direction fill-mode; */


	/* animate class */
	.animate {
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}

	.animate.animate--infinite {
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}

	.animate.animation--delay-1s {
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
	}
	.animate.animation--delay-p5s {
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		animation-delay: 0.5s;
	}

	.animate.animation--delay-p3s {
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
		animation-delay: 0.3s;
	}

	.animate.animation--fast {
		-webkit-animation-duration: 0.3s;
		animation-duration: 0.3s;
	}

	.animate.animation--slow {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
	}

	.aniamte.persist {
		animation-fill-mode: forwards;
	}

	/* transition */
	/* * {
		-webkit-transition: all 0.3s;
		transition: all 0.3s; 
	} */
}

:has(:target) {
	scroll-padding-top: var(--topBarHeight);
}


.js-tilt-glare {
    border-radius: 18px;
    overflow: hidden;
}

/* other ================================================== */

/* a {
    outline: 3px solid currentColor;
    outline-offset: -6px;
} */

a:hover, Button:hover {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-line: underline;
    cursor: pointer;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    text-underline-offset: 1px;
    position: relative;
    height: 100%;
    /* font-size: 5mm; */
    text-transform: capitalize;
    text-align: center;
    /* start */
    margin-left: 5mm;
    margin-right: 5mm;
    padding-top: 3mm;
    padding-bottom: 3mm;
    /* end
    these lines will make it more appearence and jigully when hovered */
    font-weight: bold;
    -webkit-transition: all .5s;
    transition: all .5s;
    /* border-radius: 8px; */
    /* color: #F4E8C1; */
}

a:active, Button:active {
    transform: scale(0.9);
}