/* Common styles for SimpleOMP examples */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--bs-primary: #8b9cff;
	--bs-primary-rgb: 139, 156, 255;
	--bs-card-bg: #1e1e2e;
	--bs-border-color: #3a3a4e;
	--bs-code-color: #b6c0f7;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
	line-height: 1.6;
	color: #e9ecef;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container {
	background: #2a2a3e;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	max-width: 900px;
	width: 100%;
}

h1 {
	color: #8b9cff;
}

.card {
	background: #1e1e2e;
	border: 2px solid #3a3a4e;
	color: inherit;
	transition: all 0.3s ease;
}

.example-card:hover {
	border-color: #8b9cff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(139, 156, 255, 0.3);
}

@media (max-width: 600px) {
	body {
		padding: 1rem;
	}
}

/* Spinner */

.loader {
	display: inline-block;
	width: 1rem;
	padding: .25rem;
	vertical-align: -.15rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #25b09b;
	--_m: conic-gradient(#1b171700 10%, #000), linear-gradient(#000 0 0) content-box;
	-webkit-mask: var(--_m);
	mask: var(--_m);
	-webkit-mask-composite: source-out;
	mask-composite: subtract;
	animation: 1s linear infinite l3
}

@keyframes l3 {
	to {
		transform: rotate(1turn)
	}
}