body {
	background-color: #222831;
	--shadow-color: #393e46;
	--accent-color: #f96d00;
	--text-color: #f2f2f2;

	font-family: "Andale mono", monospace;

	.blink-container {
		display: flex;
		justify-content: center;
		#blink-light {
			border-radius: 50%;
			background-color: var(--shadow-color);
			width: 50px;
			height: 50px;
			&.on {
				background-color: var(--accent-color);
			}
		}
	}

	.actionsContainer {
		margin: 20px;
		gap: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		justify-self: center;
	}

	#sucessInfo {
		font-size: 20px;
		color: var(--accent-color);
	}

	.button {
		font-size: 16px;
		border-radius: 4px;
		color: var(--text-color);
		background-color: var(--shadow-color);
		border: 1px solid var(--accent-color);
	}

	.input {
		font-size: 16px;
		border-radius: 4px;
		color: var(--text-color);
		background-color: var(--shadow-color);
		border: 1px solid var(--accent-color);
	}

	.text {
		color: var(--text-color);
	}

	.slider {
		-webkit-appearance: none;
		width: 250px;
		height: 10px;
		background: var(--shadow-color);
		outline: none;
	}

	.slider::-webkit-slider-thumb {
		border-radius: 50%;
		-webkit-appearance: none;
		appearance: none;
		width: 25px; /* Set a specific slider handle width */
		height: 25px; /* Slider handle height */
		background: var(--accent-color); /* Green background */
		cursor: pointer; /* Cursor on hover */
	}

	.slider::-moz-range-thumb {
		width: 25px; /* Set a specific slider handle width */
		height: 25px; /* Slider handle height */
		background: var(--accent-color); /* Green background */
		cursor: pointer; /* Cursor on hover */
	}
}