@import "tailwindcss" source(none);
@source "../public/index.html";

:root {
	--font-sans: "Overpass", sans-serif;
	@apply scheme-dark;
}

main, #slideshow {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.svg-btn {
	@apply bg-none border-0 p-0 cursor-pointer;
}

.nav-btn {
	@apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full
	       hover:text-blue-300 hover:fill-blue-300
	       data-selected:text-blue-300 data-selected:fill-blue-300
	       data-selected:bg-gray-900
	;
}

.carousel-cell {
	@apply h-full w-[70vw] mx-3 md:w-[80vw] md:mx-6;
}
.carousel-img {
	@apply align-middle h-full max-w-full object-contain;
}

.album {
	@apply flex relative h-40 gap-6 p-3 cursor-pointer
	       border-y border-slate-800
	       data-selected:bg-slate-950 data-selected:hover:bg-slate-900
	       hover:bg-gray-900
	;
}

.rounded-fieldset {
	@apply border rounded-2xl p-6 border-gray-500 flex flex-col gap-4;
}
.fieldset-header {
	@apply font-bold text-blue-300 fill-blue-300 text-xl;
}
.settings-label {
	@apply font-medium text-blue-200;
}
.rounded-input {
	@apply rounded-2xl bg-zinc-800 p-4;
}
.rounded-btn {
	@apply rounded-full w-fit bg-blue-200 px-4 py-2 text-black font-medium;
}