@import '@fontsource/fira-mono';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	.appear {
		@apply !translate-y-0 !opacity-100 !scale-100;
	}
}

@media (1190px <= width <= 1310px) {
	.navbar-item {
		min-width: 9rem !important;
	}
}

:root {
	--color-bg: #fafafa;
	--color-text: rgba(0, 0, 0, 0.7);
	color: var(--color-text);
	background-color: var(--color-bg);
	color: white;
	scroll-behavior: smooth;
	font-family: 'Gabarito', sans-serif;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	font-display: swap;
}

:root.dark {
	--color-bg: #1e2022;
	--color-text: rgba(0, 0, 0, 0.7);
}

/* Asset card animation ======== */

@keyframes show {
	from {
		opacity: 0;
		scale: 70%;
	}
	to {
		opacity: 1;
		scale: 100%;
	}
}

.asset-card {
	view-timeline: --assetCards block;
	animation-timeline: --assetCards;

	animation-name: show;
	animation-fill-mode: both;
	animation-range: entry 5% cover 30%;
}

/* Disable animations ========= */
@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* Title ======== */
.title-responsive {
	font-size: clamp(3.6rem, 9vw + 2rem, 8rem);
	line-height: clamp(3.6rem, 9vw + 2rem, 8rem);
}

.recourse-title::after {
	content: '';
	position: absolute;
	border-radius: 0 0 10px 10px;
	-webkit-transform: perspective(100px) rotateX(-20deg);
	transform: perspective(100px) rotateX(-20deg);
	background: var(--resource-color);
	top: 0;
	right: 0;
	left: 0;
	z-index: -10;
	height: 108%;
	width: 100%;
}

/* Fonts ======== */
@font-face {
	font-family: 'Gabarito';
	src: url('@/assets/fonts/Gabarito-Regular.ttf');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gabarito';
	src: url('@/assets/fonts/Gabarito-SemiBold.ttf');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* Scroll bar ======== */

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: rgb(219, 219, 219);
}

::-webkit-scrollbar-thumb {
	background: #282a2b;
	border-radius: 2rem;
}

::-webkit-scrollbar-thumb:hover {
	background: #6d6d6d;
}

.dark ::-webkit-scrollbar-track {
	background: #282a2b;
}

.dark ::-webkit-scrollbar-thumb {
	background: white;
}

.dark ::-webkit-scrollbar-thumb:hover {
	background: #b3b3b3;
}