body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
		'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

code {
	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

body {
	background: linear-gradient(
			135deg,
			rgba(36, 99, 124, 0.9) 0%,
			rgba(19, 49, 65, 0.9) 18%,
			rgba(11, 25, 40, 0.9) 38%,
			rgba(10, 17, 25, 0.9) 56%,
			rgba(1, 1, 3, 0.9) 84%
		),
		url(/static/media/14960493_5532919.c3bda62c.jpg);
	/* background: radial-gradient(
    rgba(36, 99, 124, 0.9) 0%,
    rgba(19, 49, 65, 0.9) 18%,
    rgba(11, 25, 40, 0.9) 38%,
    rgba(10, 17, 25, 0.9) 56%,
    rgba(1, 1, 3, 0.9) 84%   
  ), url('../public/images/backgrounds/14960493_5532919.jpg'); */
	background-size: cover;
	background-attachment: fixed;
	overflow-y: scroll; /* Allow vertical scrolling */
}

li::marker {
	color: #d8792c;
}

.vinyl-loader {
	height: 40vmin;
	pointer-events: none;
}

.added-tokens-animation,
.added-karma-animation {
	position: absolute;
	top: -20px; /* Adjust as needed */
	left: 50%;
	transform: translateX(-50%);
	animation: pop-up 2s ease forwards;
}

@keyframes pop-up {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(-20px);
		opacity: 0.5;
	}
	100% {
		transform: translateY(-50px);
		opacity: 0;
		display: none;
	}
}

@keyframes spinning {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.spin {
	animation: spinning 3s infinite linear;
	width: 10vh;
}