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

:root {
	--font-gothic: "Gothic A1", sans-serif;
	--font-nunito-sans: "Nunito Sans", sans-serif;
}

@media (min-width: 640px) {
	*:focus-visible {
		outline: none;
		transition: box-shadow 0.2s ease;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 3px #033947;
	}
}

body {
	font-family: "Gothic A1", sans-serif;
}

.shadow-inset-1 {
	box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.25);
}

.notifications--badge span {
	background-color: #f13054;
}

.reset--carousel .image-gallery-image {
	object-fit: cover !important;
}

@media only screen and (min-width: 640px) {
	.image-gallery-thumbnails nav button img {
		height: 150px;
		object-fit: cover;
	}

	.reset--carousel .image-gallery-image {
		height: 450px;
		max-height: 450px;
	}
}

@media (max-width: 639px) {
	.image-gallery-thumbnail {
		width: 150px !important;
		height: 100px !important;
	}

	.image-gallery-thumbnail img {
		width: 150px !important;
		height: 93px !important;
	}

	.reset--carousel .image-gallery-image {
		height: 360px;
		max-height: 360px;
	}
}