@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
@import 'tailwindcss';
/* @import '@skeletonlabs/skeleton-svelte';  */

@theme {
	/* Light shades - for backgrounds and cards */
	--color-ecsess-50: #e8ffd9;
	--color-ecsess-100: #cce7ba;
	--color-ecsess-200: #a9d0a0;

	/* Mid-light shades - for borders and hover states */
	--color-ecsess-300: #8fb98a;
	--color-ecsess-400: #6a9a6a;

	/* Mid shades - for accents and interactive elements */
	--color-ecsess-500: #5a8b5a;
	--color-ecsess-600: #3f6a3f;

	/* Mid-dark shades - for text on light backgrounds */
	--color-ecsess-700: #2d5a2d;
	--color-ecsess-800: #0a3d2a;

	/* Dark shades - for text and backgrounds */
	--color-ecsess-900: #062c20;
	--color-ecsess-950: #031c15;

	/* Black variants for UI elements */
	--color-ecsess-black: #1f1f1f;
	--color-ecsess-black-hover: #161917;
}

* {
	font-family: 'Saira', sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	scroll-behavior: smooth;
}

h1 {
	@apply py-4 text-2xl font-bold md:text-3xl;
}

h2 {
	@apply py-3 text-xl font-bold md:text-2xl;
}

.page-title {
	@apply my-6 text-3xl font-bold md:text-4xl lg:text-6xl;
}

.typography {
	@apply text-sm md:text-base lg:text-lg;

	p {
		@apply my-2 leading-relaxed;
	}

	strong,
	b {
		@apply font-bold;
	}

	i {
		@apply italic;
	}

	blockquote {
		@apply bg-ecsess-100 text-ecsess-700 border-l-ecsess-600 my-4 rounded-md border-l-4 py-[0.01rem] ps-4 italic;
	}

	h1 {
		@apply my-4 text-4xl leading-10 font-extrabold;
	}

	h2 {
		@apply mt-4 mb-3 text-2xl leading-8 font-black;
	}

	h3 {
		@apply mt-4 mb-1 text-xl leading-relaxed font-bold;
	}

	h4 {
		@apply mt-6 mb-2 leading-6;
	}

	img,
	picture,
	video {
		@apply my-8;
	}

	picture > img {
		@apply mt-0 mb-0;
	}

	code,
	kbd {
		@apply rounded-md font-mono text-sm;
	}

	h2 code {
		@apply text-[1.3125rem]; /* 21px */
	}

	h3 code {
		@apply text-[1.125rem]; /* 18px */
	}

	pre {
		@apply my-3 rounded-md px-4 pt-3 pb-3 font-mono text-sm leading-6;
	}

	ol,
	ul {
		@apply my-2 list-outside list-disc ps-[1.625rem];
	}

	li {
		@apply my-1 leading-relaxed;
	}

	ol > li,
	ul > li {
		@apply ps-1;
	}

	> ul > li p {
		@apply my-2 leading-relaxed;
	}

	ul ul,
	ul ol,
	ol ul,
	ol ol {
		@apply my-1;
	}

	dl {
		@apply my-5;
	}

	dt {
		@apply mt-5;
	}

	dd {
		@apply mt-2 ps-[1.625rem];
	}

	hr {
		@apply my-12;
	}

	hr + *,
	h2 + *,
	h3 + *,
	h4 + * {
		@apply mt-0;
	}

	table {
		@apply w-full;
	}

	thead {
		@apply border-ecsess-500 border-b-2;
	}

	thead th {
		@apply text-ecsess-500 p-2 text-left text-base font-bold;
	}

	tbody td,
	tfoot td {
		@apply p-2.5;
	}

	td > a {
		@apply underline transition-colors;
	}

	tbody tr:nth-child(odd) {
		@apply bg-ecsess-200/24;
	}

	td + td {
		@apply border-l;
	}

	tfoot {
		@apply border-t;
	}

	figure {
		@apply my-8;
	}

	figure > * {
		@apply my-0;
	}

	figcaption {
		@apply mt-3 text-sm leading-5;
	}
}

.flip-box {
	height: 100%;
	width: 100%;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */;
}

.flip-box-inner {
	display: grid;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

@keyframes rotate-and-back {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(15deg); }
    100% { transform: rotateY(0); }
}

@media (min-width: 448px) { /* Apply hover effect only on screens wider than md*/
	.flip-box:hover .flip-box-front {
		animation: rotate-and-back 0.3s ease-in-out;
	}
}

.flip-box-front,
.flip-box-back {
	grid-area: 1/1;
	width: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}
.flip-box-front {
	z-index: 2;
	transform: rotateY(0deg);
	transform-style: preserve-3d;
}

.flip-box-back {
	transform: rotateY(180deg); 
}

.show-back {
	transform: rotateY(180deg);
}

/* Scrollbar Styles */
*::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
*::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: var(--color-ecsess-700);
}

*::-webkit-scrollbar-track:hover {
  background-color: var(--color-ecsess-900);
}

*::-webkit-scrollbar-track:active {
  background-color: var(--color-ecsess-900);
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--color-ecsess-100);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-ecsess-300);
}

*::-webkit-scrollbar-thumb:active {
  background-color: var(--color-ecsess-300);
}

