body,
html {
	background-color: #151515;
	color: white;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;

	height: 100%;
	width: 100%;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.spin {
	animation: spin 0.8s linear infinite;
	display: flex;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

ul,
li {
	all: unset;
}

button {
	border: 1px solid #535353;
	border-radius: 6px;

	padding: 6px 12px;

	color: #e0e0e0;
	background-color: #393939;

	font-size: 14px;
	cursor: pointer;

	transition: background-color 0.3s, transform 0.2s, color 0.2s;
}

button:hover {
	background-color: #444444;
}

button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px white;
}

button:disabled {
	background-color: #3a3a3a;
	color: #888;
	cursor: not-allowed;
	pointer-events: none;
}

button.selected {
	background-color: #007bff;
	font-weight: bold;
}

input {
	background-color: #333;
	color: #e0e0e0;
	border: 1px solid #5a7d9a;
	padding: 4px;
	border-radius: 4px;
	font-size: 16px;
	height: 26px;
	margin: 6px 0;
}

input:focus {
	outline: 2px solid #5a7d9a;
}

input::placeholder {
	color: #aaa; /* Lighter color for placeholder text */
}

* {
	box-sizing: border-box;
}