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

.hidden {
	display: none !important;
}

.container {
	display: grid;
	
	width: 100%;
	height: 100%;
	
	background-color: #2196f3;
	
	transition: background-color 1s ease-in-out;
}

.container .circle {
	position: relative;
	
	place-self: center;
	
	width: 40vmin;
	height: 40vmin;
	
	border-radius: 50%;
}

.container .circle .background {
	position: absolute;
	
	width: 100%;
	height: 100%;
	
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
}

.container .circle .center {
	position: absolute;
	
	width: 100%;
	height: 100%;
	
	background-color: white;
	border-radius: 50%;
}

.menu {
	position: absolute;
}

.menu a.option {
	display: inline-block;
	
	min-width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	
	color: #333;
	background-color: attr(data-color);
	border: 0.25em solid rgba(255, 255, 255, 0.25);
	border-radius: 10%;
	
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	
	transition: all 250ms ease-in-out;
}

.menu a.option:hover {
	border: 0.25em solid rgba(255, 255, 255, 1.0);
	
	transition: all 250ms ease-in-out;
}

.menu a.option.selected {
	border: 0.25em solid rgba(255, 255, 255, 1.0);
	border-radius: 50%;
}

.menu.color {
	bottom: 1em;
	right: 1em;
}

.menu.method {
	top: 1em;
	left: 1em;
}

.menu.options {
	top: 1em;
	right: 1em;
}

.menu.options a.option {
	padding: 0 0.5em;
	
	background-color: #b6b87c;
}

/**
 * Breathe cycles.
 **/
@keyframes breathe-standard {
	0% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(1.0, 1.0);
	}
	
	46% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(0.1, 0.1);
	}
	
	50% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(0.1, 0.1);
	}
	
	96% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(1.0, 1.0);
	}
	
	100% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(1.0, 1.0);
	}
}

@keyframes breathe-box {
	0% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(0.1, 0.1);
	}
	
	25% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(1.0, 1.0);
	}
	
	50% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(1.0, 1.0);
	}
	
	75% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(0.1, 0.1);
	}
	
	100% {
		background-color: rgba(255, 255, 255, 1.0);
		transform: scale(0.1, 0.1);
	}
}