@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 222.2 84% 4.9%;

		--muted: 210 40% 96.1%;
		--muted-foreground: 215.4 16.3% 46.9%;

		--popover: 0 0% 100%;
		--popover-foreground: 222.2 84% 4.9%;

		--card: 0 0% 100%;
		--card-foreground: 222.2 84% 4.9%;

		--border: 214.3 31.8% 91.4%;
		--input: 214.3 31.8% 91.4%;

		--primary: 222.2 47.4% 11.2%;
		--primary-foreground: 210 40% 98%;

		--secondary: 210 40% 96.1%;
		--secondary-foreground: 222.2 47.4% 11.2%;

		--accent: 210 40% 96.1%;
		--accent-foreground: 222.2 47.4% 11.2%;

		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 210 40% 98%;

		--ring: 215 20.2% 65.1%;

		--radius: 0.5rem;
	}

	.dark {
		--background: 222.2 84% 4.9%;
		--foreground: 210 40% 98%;

		--muted: 217.2 32.6% 17.5%;
		--muted-foreground: 215 20.2% 65.1%;

		--popover: 222.2 84% 4.9%;
		--popover-foreground: 210 40% 98%;

		--card: 222.2 84% 4.9%;
		--card-foreground: 210 40% 98%;

		--border: 217.2 32.6% 17.5%;
		--input: 217.2 32.6% 17.5%;

		--primary: 210 40% 98%;
		--primary-foreground: 222.2 47.4% 11.2%;

		--secondary: 217.2 32.6% 17.5%;
		--secondary-foreground: 210 40% 98%;

		--accent: 217.2 32.6% 17.5%;
		--accent-foreground: 210 40% 98%;

		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 85.7% 97.3%;

		--ring: 217.2 32.6% 17.5%;
	}
}

@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
	}
}

:root {
	--x-speed: 10s;
}

@layer base {
	* {
		font-family: monospace;
		line-height: 1.6;
		text-align: justify;
		text-justify: inter-word;
	}
}

@layer components {
	.game-center {
		width: 100%;
		height: 100vh;
		background-color: #fafafa;
		position: relative;
		overflow: hidden;
	}

	.bubble {
		border-radius: 50%;
		position: absolute;
		display: flex;
		justify-content: center;
		font-weight: bold;
		color: white;
		padding: 0.5em;
	}

	.bubble-white {
		border-radius: 50% 50% 50% 50% / 82% 82% 18% 18%;
		background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
		z-index: -1;
		float: left;
		position: absolute;
	}

	.bubble-inner {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bubble-num {
		margin: 0;
		padding: 0;
		line-height: 5rem;
	}

	.bubble-text {
		margin: 0;
		padding: 0;
	}
}

@keyframes wiggle1 {
	100% {
		transform: translateX(calc(100vw - var(--width)));
	}
}

@keyframes wiggle2 {
	100% {
		transform: translateY(calc(80vh - var(--width)));
	}
}

@keyframes wiggle3 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(50vw, 30vh);
	}
	100% {
		transform: translate(calc(100vw - var(--width)), 0);
	}
}

@keyframes wiggle4 {
	0% {
		transform: translate(0, 0);
	}
	33% {
		transform: translate(20vw, 40vh);
	}
	66% {
		transform: translate(60vw, -20vh);
	}
	100% {
		transform: translate(calc(90vw - var(--width)), 30vh);
	}
}

@keyframes wiggle5 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(70vw, 70vh);
	}
}

@keyframes wiggle6 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(-30vw, 20vh);
	}
	100% {
		transform: translate(calc(80vw - var(--width)), -40vh);
	}
}

@keyframes wiggle7 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(30vw, 0);
	}
	75% {
		transform: translate(60vw, 40vh);
	}
	100% {
		transform: translate(calc(100vw - var(--width)), 0);
	}
}

@keyframes wiggle8 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(50vw, -30vh);
	}
	100% {
		transform: translate(calc(100vw - var(--width)), 50vh);
	}
}

@keyframes wiggle9 {
	0% {
		transform: translate(0, 0);
	}
	33% {
		transform: translate(40vw, 20vh);
	}
	66% {
		transform: translate(-20vw, -30vh);
	}
	100% {
		transform: translate(calc(90vw - var(--width)), 0);
	}
}

@keyframes wiggle10 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(20vw, 40vh);
	}
	50% {
		transform: translate(60vw, -20vh);
	}
	75% {
		transform: translate(40vw, 30vh);
	}
	100% {
		transform: translate(calc(100vw - var(--width)), 0);
	}
}

@keyframes wiggle11 {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(calc(100vw - var(--width)), calc(70vh - var(--width)));
	}
}

@keyframes wiggle12 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(30vw, 40vh);
	}
	100% {
		transform: translate(calc(-50vw + var(--width)), calc(60vh - var(--width)));
	}
}

@keyframes wiggle13 {
	0% {
		transform: translate(0, 0);
	}
	33% {
		transform: translate(-20vw, -20vh);
	}
	66% {
		transform: translate(40vw, 30vh);
	}
	100% {
		transform: translate(calc(80vw - var(--width)), calc(-40vh + var(--width)));
	}
}

@keyframes wiggle14 {
	0% {
		transform: translate(0, 0);
	}
	25% {
		transform: translate(40vw, -30vh);
	}
	50% {
		transform: translate(-20vw, 20vh);
	}
	75% {
		transform: translate(60vw, -10vh);
	}
	100% {
		transform: translate(calc(100vw - var(--width)), calc(50vh - var(--width)));
	}
}

@keyframes wiggle15 {
	0% {
		transform: translate(0, 0);
	}
	20% {
		transform: translate(20vw, 30vh);
	}
	40% {
		transform: translate(50vw, -20vh);
	}
	60% {
		transform: translate(30vw, 40vh);
	}
	80% {
		transform: translate(70vw, -10vh);
	}
	100% {
		transform: translate(calc(90vw - var(--width)), calc(30vh - var(--width)));
	}
}
