* {
	box-sizing: border-box;
}

body {
	font-family: 'Outfit', sans-serif;
	margin: 0;
}

.mono {
	font-family: 'JetBrains Mono', monospace;
}

.device-card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.device-card:hover {
	transform: translateY(-2px);
}

.pulse-dot {
	animation: pulse-ring 2s ease-in-out infinite;
}

@keyframes pulse-ring {

	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
	}

	50% {
		opacity: 0.8;
		box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
	}
}

.pulse-dot-warn {
	animation: pulse-warn 2s ease-in-out infinite;
}

@keyframes pulse-warn {

	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5);
	}

	50% {
		opacity: 0.8;
		box-shadow: 0 0 0 6px rgba(251, 191, 36, 0);
	}
}

.terminal-cursor {
	animation: blink 1s step-end infinite;
}

@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

.fade-in {
	animation: fadeUp 0.5s ease forwards;
	opacity: 0;
}

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}

	from {
		transform: translateY(8px);
	}
}

.scrollbar-thin::-webkit-scrollbar {
	width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
	background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
	background: #334155;
	border-radius: 4px;
}

.tab-active {
	border-bottom: 2px solid #34d399;
	color: #34d399;
}

.rpi-card {
	cursor: pointer;
	transition: all 0.3s ease;
}

.rpi-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(52, 211, 153, 0.15);
}

.body {
	box-sizing: border-box;
}

/* General styling - Desktop */
.logo {
    max-width: 250px; /* Too big on desktop? Make this smaller */
    height: auto;
}

/* Mobile-only styles - Smaller than 768px */
@media (max-width: 767px) {
    .logo {
        max-width: 35%;
        height: auto /* Smaller for mobile */
    }
}