@font-face {
	font-family: 'calsans';
	src: url('../fonts/calsans/otf/CalSansUI-TextRegular.otf?eaoix9');
	src: url('../fonts/calsans/otf/CalSansUI-TextRegular.eot?eaoix9#iefix') format('embedded-opentype'),
		url('../fonts/calsans/ttf/CalSansUI-TextRegular.ttf?eaoix9') format('truetype'),
		url('../fonts/calsans/webfonts/CalSansUI-TextRegular.woff2?eaoix9') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'calsans-light';
	src: url('../fonts/calsans/otf/CalSansUI-TextLight.otf?eaoix9');
	src: url('../fonts/calsans/otf/CalSansUI-TextLight.eot?eaoix9#iefix') format('embedded-opentype'),
		url('../fonts/calsans/ttf/CalSansUI-TextLight.ttf?eaoix9') format('truetype'),
		url('../fonts/calsans/webfonts/CalSansUI-TextLight.woff2?eaoix9') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'calsans-semibold';
	src: url('../fonts/calsans/otf/CalSansUI-TextSemiBold.otf?eaoix9');
	src: url('../fonts/calsans/otf/CalSansUI-TextSemiBold.eot?eaoix9#iefix') format('embedded-opentype'),
		url('../fonts/calsans/ttf/CalSansUI-TextSemiBold.ttf?eaoix9') format('truetype'),
		url('../fonts/calsans/webfonts/CalSansUI-TextSemiBold.woff2?eaoix9') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

@view-transition {
	navigation: auto;
}

@keyframes slide-from-right {
	from {
		/* Arrive from the right */
		transform: translateX(100vw);
	}

	to {
		/* Come into view */
		transform: translateX(0);
	}
}

::view-transition-old(root) {
	animation: none;
}

::view-transition-new(root) {
	/* Apply animation to hobbies.html */
	animation: slide-from-right 0.3s;
}

.cursor-pointer {
	cursor: pointer;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.navbar-hide {
		top: 0rem;
	}

	.sticky-top {
		top: 5rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.navbar-hide {
		top: 0rem;
	}

	.sticky-top {
		top: 5rem;
	}
}



[class^="iconoir-"]::before,
[class*=" iconoir-"]::before {
	display: inline-block !important;
}

*[class^='iconoir-']::before,
*[class*=' iconoir-']::before {
	top: 2px;
	position: relative;
	display: inline-block;
}






/* Fix floating label with Select2 */
.form-floating>.select2-container {
	height: calc(3.5rem + 2px);
	width: 100% !important;
}

.select2-container .select2-selection--single {
	height: 100% !important;
	padding: 1rem 0.75rem 0 0.75rem !important;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 2.4rem;
	padding-left: 0;
	padding-right: 0;
}

/* Optional: remove the border overlap */
.form-floating>label {
	z-index: 5;
}


.form-floating .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
	color: rgb(18, 38, 63);
}

.form-floating .select2-selection__rendered {
	transition: all 0.2s ease-in-out;
	transform-origin: 0 0;
}

.form-floating .select2-container--open .select2-selection__rendered {
	transform: scale(.85) translateY(-.8rem) translateX(0.1rem);
}


.form-floating .select2-container--open .selection {
	height: 40px;
	display: inline-block;
	width: 100%;
}

.form-floating .select2-container--open .select2-dropdown--below.select2-dropdown {
	transform: translateY(-18px);
}


.form-floating .select2-container--open .select2-dropdown--below.select2-dropdown .select2-selection__placeholder,
.form-floating .select2-container--open .select2-selection.select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
	color: rgba(18, 38, 63, 0.65) !important
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.rotating-badge {
	animation: rotate 6s linear infinite;
	transform-origin: center;
}

.scrollbar-thin {
	scrollbar-width: thin;
	overflow-y: auto;
}

.custom-hover:hover {
	background-color: #ffcc00;
	/* nova boja pozadine */
}

.custom-dropdown {
	--bs-dropdown-link-hover-bg: var(--bs-gray-300);
	--bs-dropdown-link-hover-color: #000;
}


.card-3d-wrapper {
	perspective: 1000px;
	/* daje dubinu */
	perspective: 60rem;
	/* daje dubinu */
}

.card-3d {
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform;
	transform:
		rotateY(0deg)
		/* leva strana napred */
		scale(1)
		/* blago uvećanje */
		translateZ(0);
	transition:
		transform 1.2s ease-out,
		box-shadow 1.2s ease-out;
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Opcionalno: hover za dodatni "wow" */
.card-3d.card-3d-start {
	transform:
		rotateY(-20deg) scale(1.20);
	box-shadow:
		0 30px 60px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
	.card-3d {
		transform: none;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
	}
}

:root {
	--bs-progress-speed: 1s;
}

.progress,
.progress-stacked {
	--bs-progress-bar-transition: width var(--bs-progress-speed) ease;
}

br:selection {
	background-color: transparent !important;
	/* This prevents unwanted highlight artifacts around line breaks during text
	selection, making the overall selection appear cleaner on web */
}

.best-shadow {
	box-shadow:
		0 8.06px 8.06px 0 rgba(78, 78, 78, 0.04),
		0 16px 40px 0 rgba(0, 0, 0, 0.02),
		0 1.4px 1.3px 0 rgba(91, 91, 91, 0.15);
}


/* overscroll color matches the top and bottom elements of the page */
:root::after {
	content: "";
	position: fixed;
	inset: 0;
	background:
		linear-gradient(var(--color-overscroll-top) 49.99%, var(--color-overscroll-bottom) 50%);
	z-index: -1;
}

/* 
shadow of an element or some other visual to be a semitransparent version of the `currentColor`
box-shadow: 0 1px 2px rgb(from currentcolor r g b/ .65)
 */


.num-count {
	font-variant-numeric: tabular-nums;
}

.code-input {
	letter-spacing: 0.3rem;
	font-variant-numeric: tabular-nums;
}