[data-bs-theme="dark"] {
	--bs-body-bg: #030303;
	--bs-body-bg-rgb: 3,3,3;
	--bs-primary: #e0780c;
	--bs-primary-rgb: 224, 120, 12;
}

body {
	--bs-body-font-family: Arial, sans-serif;
}

a {
	--bs-link-hover-color-rgb: var(--bs-primary-rgb);
	--bs-link-color-rgb: #fff;
	text-decoration: none;
	font-weight: bold;
	transition: all ease 0.3s;
}

.navbar-nav .nav-link {
	--bs-navbar-active-color: var(--bs-primary);
}

.btn-primary {
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-bg: var(--bs-gray);
	--bs-btn-hover-border-color: var(--bs-gray);
}

.card:hover, .card:active, .card:focus {
	--bs-border-color-translucent: rgba(var(--bs-primary-rgb), 0.2);
}

header .row {
	min-height: 50vh;
}


header h1, .fs-extra-large {
	font-size: 2rem;
}

header h2 {
	font-size: 1.75rem;
}

.made-in-label {
	background-color: var(--bs-body-bg);
	font-size: 1.8rem;
	box-shadow: 0 0 10px var(--bs-body-bg);
	line-height: 2.8rem;
	top: 25%;
}

.made-in-label span {
	font-size: 4rem;
}

.radar-md {
	--radius: 5px;
}

.radar-lg {
	--radius: 10px;
}

.radar-xl {
	--radius: 20px;
}

.radar-circle {
	width: var(--radius);
	height: var(--radius);
	position: absolute;
	border-radius: 50%;
	background-color: var(--bs-primary);
	animation: pulse 10s linear infinite;
}

.radar-circle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--radius);
	height: var(--radius);
	border: 2px solid var(--bs-primary);
	border-radius: 50%;
	animation: signal 10s linear infinite;
}

@keyframes pulse {
	0%, 80% {
		transform: scale(1);
		opacity: 1;
	}
	90% {
		transform: scale(1.2);
		opacity: 0.5;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes signal {
	0%, 80% {
		width: var(--radius);
		height: var(--radius);
		opacity: 1;
	}
	100% {
		width: calc(var(--radius) * 2);
		height: calc(var(--radius) * 2);
		opacity: 0;
	}
}

@media (min-width: 768px) {
	header h1, .fs-extra-large {
		font-size: 2.5rem;
	}

	header h2 {
		font-size: 2rem;
	}

	.made-in-label {
		top: 40%;
	}
}

@media (min-width: 992px) {
	header h1, .fs-extra-large {
		font-size: 3.5rem;
	}

	.made-in-label {
		top: 45%;
	}
}