styles.css

:root {
	--breathe-color: 255, 255, 255;
}

.centered {
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: lightgray;
	background-color: black;
}

.effect-button {
	border: 3px solid lightgray;
	padding: 24px;
	border-radius: 50%;
	cursor: pointer;
}

.effect-button-pressed {
	border-color: dodgerblue;
}

@media (hover: hover) {
	effect-button:hover {
		border: 2px solid dodgerblue;
	}
}

.timer-button {
	background-color: dodgerblue;
	border: none;
	color: lightgray;
	font-size: 24px;
	width: 40px;
	height: 40px;
	border-radius: 20%;
	cursor: pointer;
}

.timer-button:hover {
	border: 2px solid lightgray;
}

.timer-button-container {
	top: 50%;
	transform: translate(0%, -50%);
	width: 15%;
	display: inline-block;
}

.timer-slider-container {
	width: 60%;
	display: inline-block;
}

.timer-value-container {
	width: 15%;
	display: inline-block;
}

.timer-slider {
	width: 100%;
}

.timer-datalist {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	writing-mode: horizontal-tb;
}

.timer-option {
	padding: 0;
}

.animated-rainbow {
	text-align: center;
	background-size: 200%;
	background-image: -webkit-linear-gradient(left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
	animation: rainbow 5s linear infinite;
}

@keyframes rainbow {
	from { background-position: left center }
	to { background-position: -200% center }
}

.animated-fire {
	text-align: center;
	background-size: 100% 200%;
	background-image: -webkit-linear-gradient(top, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #ffd500, #fa0, #ff8000, #f50, #ff2b00, #f00);
	animation: fire 5s linear infinite;
}

@keyframes fire {
	from { background-position: center top }
	to { background-position: center 200% }
}

.animated-breathe {
	text-align: center;
	background-color: var(--breathe-color);
	animation: breathe 2s infinite alternate ease-out
}

@keyframes breathe {
	from { background-color: rgba(var(--breathe-color), 0.2); }
	to { background-color: rgba(var(--breathe-color), 1.0); }
}