/* Write your global styles here, in PostCSS syntax */

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

html,
body {
	scroll-behavior: smooth;
	scroll-snap-type: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

body {
	/* @apply bg-gray-100; */
	background-image: radial-gradient(at 0% 0%, rgba(140, 139, 255, 30%) 2px, transparent 50%),
		radial-gradient(at 100% 0%, rgba(140, 139, 255, 30%) 0px, transparent 50%),
		/* cyan */ /* radial-gradient(at 0% 70%, rgba(103, 232, 249, 30%) 0px, transparent 50%), */
			/* purple */ radial-gradient(at 20% 90%, rgba(139, 92, 246, 30%) 0px, transparent 50%),
		/* pink */ radial-gradient(at 10% 70%, rgba(248, 113, 113, 20%) 0px, transparent 50%),
		/* yellow */ radial-gradient(at 70% 60%, rgba(251, 191, 36, 20%) 0px, transparent 50%),
		/* blue */ radial-gradient(at 80% 80%, rgba(2, 132, 199, 20%) 0px, transparent 50%);

	color: #191b24;
	margin: 0;
	padding: 0px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
		'Helvetica Neue', sans-serif;
}

header {
	animation: nav-load 300ms ease-in;
}

a {
	color: rgb(72, 72, 188);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(25, 25, 92);
}

label {
	display: block;
}

.tooltip {
	@apply invisible absolute;
}

.has-tooltip:hover .tooltip {
	@apply visible z-50;
}

@keyframes nav-load {
	0% {
		transform: translateY(-100%);
	}

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