@import "tailwindcss";

:root {
	--background: #ffffff;
	--foreground: #171717;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: #0a0a0a;
		--foreground: #ededed;
	}
}

body {
	background: var(--background);
	color: var(--foreground);
	font-family: Arial, Helvetica, sans-serif;
}

@theme {
	--color-red-600: rgba(231, 0, 11, 1);
	--color-red-800: rgba(159, 7, 18, 1);
	--color-red-800-50: rgba(159, 7, 18, 0.5);
	--color-sky-600: rgba(0, 132, 209, 1);
	--color-sky-800: rgba(0, 89, 138, 1);
	--color-sky-800-50: rgba(0, 89, 138, 0.5);
	--color-gray-200: rgba(229, 231, 235, 1);
	--color-gray-300: rgba(209, 213, 220, 1);
}

@keyframes slideInOut {
	0% {
		transform: translateX(-100%);
	}

	5% {
		transform: translateX(0);
	}

	95% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

.ring-4-red-600 {
	box-shadow: 0 0 0 4px rgba(231, 0, 11, 1);
}

.ring-4-sky-600 {
	box-shadow: 0 0 0 4px rgba(0, 132, 209, 1);
}

.scaler-200 {
	transform: scale(2);
}

.scaler-125 {
	transform: scale(1.25);
}

.scaler-105 {
	transform: scale(1.05);
}

.scaler-90 {
	transform: scale(0.9);
}

.scaler-75 {
	transform: scale(0.75);
}

.scaler-50 {
	transform: scale(0.5);
}


.slide-animation {
	animation: slideInOut 30s ease-in-out forwards;
}

.game:nth-child(1) {
	opacity: 1.00;
}

.game:nth-child(2) {
	opacity: 0.95;
}

.game:nth-child(3) {
	opacity: 0.90;
}

.game:nth-child(4) {
	opacity: 0.85;
}

.game:nth-child(5) {
	opacity: 0.80;
}

.game:nth-child(6) {
	opacity: 0.75;
}

.lose {
	filter: grayscale(0.25);
}

.game.old>.background {
	filter: grayscale(0.75);
}

.game.old>.background>.champion {
	filter: blur(1px) grayscale(0.85);
}

.floating-box {
	animation: float 5s ease-in-out infinite;
}

@keyframes float {

	0%,
	100% {
		transform: translateY(-0.5rem);
	}

	50% {
		transform: translateY(-1.5rem);
	}
}

@keyframes slide {

	0%,
	40% {
		transform: translateY(0%);
	}

	50%,
	90% {
		transform: translateY(-50%);
	}

	100% {
		transform: translateY(0%);
	}
}

.slide-box {
	animation: slide 15s ease-in-out infinite;
}