* {
	margin:0;
	padding:0;
	overflow:hidden;
}
body {
	width:100%;
	height:100vh;
	background-image:linear-gradient(to right,#ff758c 0%,#ff7eb3 100%);
	display:flex;
	justify-content:center;
	align-items:center;
}
.container {
	width:200px;
	height:200px;
	background:#000;
	background-image:linear-gradient(-20deg,#ddd6f3 0%,#faaca8 100%,#faaca8 100%);
	border-radius:50%;
	box-shadow:0 0 5px rgba(0,0,0,0.15),0 2px 10px rgba(0,0,0,0.1);
	display:flex;
	justify-content:center;
	align-items:center;
}
#app {
	width:80px;
	height:80px;
	position:relative;
	border-radius:50%;
}
.pause,.play {
	width:100%;
	height:100%;
	cursor:pointer;
	position:absolute;
}
.line {
	position:absolute;
	width:8px;
	height:50%;
	background:#000;
	border-radius:10px;
	transition:all 400ms cubic-bezier(0.8,0,0.33,1);
}
.pause .line_1 {
	margin:25% 0;
	left:28%;
}
.pause .line_2 {
	margin:100% -16%;
	right:45%;
	transition-delay:200ms;
}
.pause.active .line {
	opacity:1;
}
.pause.active .line_1 {
	margin:25% 0;
	left:28%;
}
.pause.active .line_2 {
	margin:25% 0;
	right:28%;
}
.play .line {
	margin:25% 0;
}
.play .line_1 {
	left:28%;
}
.play .line_2 {
	height:56%;
	left:60%;
	transform:rotate(-55deg) translateY(-128px) translateX(16px);
	transition-delay:100ms;
}
.play .line_3 {
	height:56%;
	left:60%;
	transform:rotate(55deg) translateY(-128px) translateX(16px);
	transition-delay:200ms;
}
.play.active .line {
	opacity:1;
	height:62%;
	margin:20% 0;
}
.play.active .line_1 {
	left:28%;
	transform:translateY(-2px);
}
.play.active .line_2 {
	height:56%;
	left:63%;
	transform:rotate(-55deg) translateY(-16.5px) translateX(2px);
}
.play.active .line_3 {
	height:56%;
	left:63%;
	transform:rotate(55deg) translateY(16px) translateX(2px);
}
.support {
	position:absolute;
	right:10px;
	bottom:10px;
	padding:10px;
	display:flex;
}
a {
	margin:0 20px;
	color:#fff;
	font-size:2rem;
	transition:all 400ms ease;
}
a:hover {
	color:#222;
}