/* Tailwind font */
html, body {
	/* font-family: Inter, sans-serif; */
	font-family: Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	/* font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif; */
}

:root {
	/* thumbnail dimensions */
	--thumb-width:  90px;
	--thumb-height: calc(var(--thumb-width) * 1.5);

	--thumb-width-sm: 55px;
	--thumb-height-sm: calc(var(--thumb-width-sm) * 1.5);

	/* translation variables from tailwind */
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
}

body {
	/* background-image: url("../assets/sandbina.jpg"); */
	background-image: url("../assets/aobear.jpg");
	background-repeat: repeat-y;
	background-size: 100% auto;
}


/* -------------------------------------------------------------------------- */
/* Light Mode                                                                 */
/* -------------------------------------------------------------------------- */

/* height */
.h-screen { height: 100vh; }
.h-full { height: 100%; }
.h-2 { height: 20%; }

.min-h-20px { min-height: 20px; }

/* width */
.w-full { width: 100%; }
.w-1 { width: 10%; }

/* margin */
.m-5px { margin: 5px; }
.m-10px { margin: 10px; }

.mx-3pct { margin: 0 3vw; }
.mx-15pct { margin: 0 15vw; }
.mx-20pct { margin: 0 20vw; }
.my-10px { margin: 10px 0 10px 0; }
.ml-20pct { margin-left: 20vw; }
.mr-20pct { margin-right: 20vw; }

.mb-20px { margin-bottom: 20px; }

/* padding */
.p-19px { padding: 19px; }

/* border */
.border-black { border: 1px solid black; }
.border-white { border: 1px solid white; }
.border-red { border: 1px solid red; }
.rounded-5 { border-radius: 12px; }

/* text size */
.text-xs { font-size: 0.75rem; line-height: calc(1 / 0.75); }
.text-sm { font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
.text-md { font-size: 1rem; line-height: calc(1.5 / 1); }
.text-lg { font-size: 1.125rem; line-height: calc(1.75 / 1.125); }

/* text color */
a.text-mint { color: #98FF98; }

/* .text-slate-300 { color: oklch(86.9% 0.022 252.894); } */
.text-slate-400 { color: oklch(70.4% 0.04 256.788); }
/* .text-slate-500 { color: oklch(55.4% 0.046 257.417); } */


.text-right { text-align: right; }

.whitespace-nowrap { white-space: nowrap; }
.whitespace-break-spaces { white-space: break-spaces; }

/* display */
.block { display: block; }

/* flexbox */
.flex { display: flex; }

.justify-center { justify-content: center; }

.items-center { align-items: center; }
.items-start { align-items: start; }

/* flex item */
.flex-1 { flex: 1 1 0% }
.flex-8 { flex: 8 1 0% }
.flex-10 { flex: 10 1 0% }
.flex-25 { flex: 25 1 0% }
.flex-15 { flex: 15 1 0%; }
.flex-70 { flex: 70 1 0%; }

.shrink-0 { flex-shrink: 0; }

/* grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.fixed { position: fixed; }

/* object fit */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* overflow-wrap */
.wrap-anywhere { overflow-wrap: anywhere; }

/* component thumbnail */
.thumbnail {
	width:  var(--thumb-width-sm);
	height: var(--thumb-height-sm);
	margin: 10px;
	flex: 0 0 var(--thumb-width-sm);
}

.thumbnail img {
	border-radius: 10px;
}


.bg-dim {
	background: rgba(0, 0, 0, 0.7);
	border-radius: 8px;
}


/* -------------------------------------------------------------------------- */
/* Dark Mode                                                                  */
/* -------------------------------------------------------------------------- */

/* background */
.dark\:bg-black { background-color: black; }
.dark\:bg-gray { background-color: gray; }

.dark\:text-white { color: white; }
.dark\:text-mint { color: #98FF98; }


/* gradients */
:root {
	--gradient-from: transparent;
	--gradient-via:  transparent;
	--gradient-to:   transparent;
}

.gradient-r  { background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-via), var(--gradient-to)); }
.gradient-br { background-image: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-via), var(--gradient-to)); }
.gradient-tr { background-image: linear-gradient(to top right, var(--gradient-from), var(--gradient-via), var(--gradient-to)); }
.gradient-l  { background-image: linear-gradient(to left, var(--gradient-from), var(--gradient-via), var(--gradient-to)); }
.gradient-bl { background-image: linear-gradient(to bottom left, var(--gradient-from), var(--gradient-via), var(--gradient-to)); }
.gradient-tl { background-image: linear-gradient(to top left, var(--gradient-from), var(--gradient-via), var(--gradient-to)); }

.gradient-primary   { --gradient-from: #3b82f6; }
.gradient-secondary { --gradient-via:  #7928ca; }
.gradient-accent    { --gradient-to:   #79ffe1; }



.overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);
}


:root {

}

.hover\:-translate-y-1:hover {
	--tw-translate-y: -0.5rem;
	transform: translate(
		var(--tw-translate-x),
		var(--tw-translate-y)
	)
	rotate(
		var(--tw-rotate)
	)
	skewX(
		var(--tw-skew-x)
	)
	skewY(
		var(--tw-skew-y)
	)
	scaleX(
		var(--tw-scale-x)
	)
	scaleY(
		var(--tw-scale-y)
	);
}


.hidden { display: none; }
.block  { display: block; }


.opacity-0 { opacity: 0; }

.duration-200  { transition-duration: 200ms; }
.duration-300  { transition-duration: 300ms; }
.duration-test { transition-duration: 1.5s; }

.transition-opacity {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	/* transition-duration: 300ms; */
}

.scroll-auto   { scroll-behavior: auto; }
.scroll-smooth { scroll-behavior: smooth; }


/* -------------------------------------------------------------------------- */
/* Responsive Design                                                          */
/* -------------------------------------------------------------------------- */

@media (min-width: 640px) {
	.sm\:block { display: block; }
	.sm\:mx-10pct { margin: 0 10vw; }
	/* .sm\:border-red { border: 2px solid red; } */

	.sm\:thumbnail {
		width:  var(--thumb-width);
		height: var(--thumb-height);
		margin: 10px;
		flex: 0 0 var(--thumb-width);
	}
}

@media (min-width: 768px) {
	.md\:block { diplay: block; }
	.md\:mx-15pct { margin: 0 15vw; }
	/* .md\:border-cyan { border: 2px solid cyan; } */
	.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}