/* Derived from https://codepen.io/jacobcs1996/pen/geQKLJ */

:root {
	--button-height: 0.7rem;
	--button-color: #edd;
}

.play-button {
	box-sizing: content-box;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--button-height);
	height: var(--button-height);
	padding: calc(1.5 * var(--button-height));
	border: 0.2rem solid var(--button-color);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.4);
	filter: drop-shadow(0 0 3.1rem rgba(255,255,255, 0.8));
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

button {
	margin: 0;
	padding: 0;
}

.play {
	height: 0;
	width: 0;
	margin-left: calc(2 * 0.14 * var(--button-height));
	background: none;
	border: none;
	border-top: var(--button-height) solid transparent;
	border-bottom: var(--button-height) solid transparent;
	border-left: calc(var(--button-height) * 2 * 0.86) solid var(--button-color);
}

.pause {
	position: relative;
	background: none;
	border: none;
	height: calc(var(--button-height) * 2);
	width: calc(var(--button-height) * 2 * 0.86);
}

.pause:before, .pause:after {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	width: 33%;
	background: var(--button-color);
}

.pause:before {
	left: 0;
}

.pause:after {
	right: 0;
}

.hidden {
	display:none;
}