* { margin: 0; padding: 0; user-select: none; box-sizing: border-box; }

body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: repeating-linear-gradient(to right, transparent 7%, #d8d8d8 10%);
}
fieldset {
	width: 600px;
	border: 3px solid #000;
	border-radius: 40px;
	text-align: center;
	overflow: hidden;
	position: relative;
}
@keyframes legend {
	50% { padding: 0 210px; }
}
fieldset legend {
	font: bold 30px cursive;
	padding: 0 20px;
	animation: legend 5s infinite;
}
fieldset form {
	position: relative;
	z-index: 1;
	transition: .8s;
}
fieldset form .display {
	display: flex;
	justify-content: center;
	column-gap: 10px;
	align-items: center;
	height: 300px;
	border-bottom: 1px solid #000;
	background: linear-gradient(45deg, #0069ff, #799dff);
}
fieldset form .display .eye {
	width: 250px;
	height: 250px;
	border: 3px solid #000;
	border-radius: 50%;
	position: relative;
	background: #fff;
	box-shadow: inset 0 0 31px #000000e6;
	transition: .1s;
}
fieldset form .display .eye::after {
	content: '';
	position: absolute;
	bottom: 40px;
	left: 40px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #000;
}
fieldset form .insert {
	padding: 30px;
	display: grid;
	grid-row-gap: 15px;
	background: #0000004d;
    box-shadow: inset 0 0 30px 8px #000000b3;
}
fieldset form .insert .item input {
	width: 100%;
	height: 55px;
	text-indent: 15px;
	font: bold 18px cursive;
	outline: 0;
	border: 2px solid #000;
	border-radius: 15px;
}
fieldset form .insert .item input[type=submit] {
	text-indent: 0;
	cursor: pointer;
	background: linear-gradient(0, #0069ff, #91afff);
	color: #fff;
	text-shadow: 1px 1px 3px #000;
	transition: .3s;
}
fieldset form .insert .item input[type=submit]:hover {
	letter-spacing: 3px;
	background: linear-gradient(180deg, #0069ff, #91afff);
}
fieldset form .insert .item input::placeholder {
	transition: .3s;
}
fieldset form .insert .item input:hover::placeholder {
	letter-spacing: 3px;
}
fieldset .player {
	height: 80px;
	background: #00000096;
	position: absolute;
    top: 0;
    left: 50%;
    width: 87%;
    transform: translateX(-50%);
    border-radius: 80px 80px 0 0;
    box-shadow: inset 0 0 17px 10px #1e1e1e85;
	border: 6px double #72acff;
    border-bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 15px;
}
fieldset .player .btn {
	width: 60px;
	height: 60px;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	box-shadow: inset 0 0 10px #fff;
	transition: .5s;
}
fieldset .player .btn:hover {
	box-shadow: inset 0 0 10px 25px #fff;
}
fieldset .player :is(.prev, .next) {
	width: 50px;
	height: 50px;
}
fieldset .player .btn.play::after {
	content: '';
	position: absolute;
	top: 14px;
	left: 20px;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 20px solid #fff;
	transition: .5s;
}
fieldset .player .btn.play:hover::after {
	border-left-color: #0069ff;
}
fieldset .player .btn.pause::after {
	--bg: #fff;
	content: '';
	position: absolute;
	top: 15px;
	left: 15px;
	width: 26px;
	height: 28px;
	background: linear-gradient(to right, var(--bg) 35%, transparent 35% 65%, var(--bg) 65%);
}
fieldset .player .btn.pause:hover::after {
	--bg: #0069ff;
}
fieldset .player .btn.stop::after {
	content: '';
	position: absolute;
	top: 15px;
	left: 15px;
	width: 26px;
	height: 28px;
	background: #fff;
}
fieldset .player .btn.stop:hover::after {
	background: #0069ff;
}
fieldset .player .btn.next::before,
fieldset .player .btn.next::after {
	content: '';
	position: absolute;
	top: 14px;
	left: 14px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 13px solid #fff;
	transition: .5s;
}
fieldset .player .btn.next::after {
	left: 25px;
}
fieldset .player .btn.prev::before,
fieldset .player .btn.prev::after {
	content: '';
	position: absolute;
	top: 14px;
	right: 14px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 13px solid #fff;
	transition: .5s;
}
fieldset .player .btn.prev::after {
	right: 25px;
}
fieldset .player .btn.next:hover::before,
fieldset .player .btn.next:hover::after {
	border-left-color: #0069ff;
}
fieldset .player .btn.prev:hover::before,
fieldset .player .btn.prev:hover::after {
	border-right-color: #0069ff;
}
fieldset form .insert .item {
	position: relative;
}
fieldset form .insert .item .showHide {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(0, #0069ff, #91afff);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	transition: .5s;
	padding: 0 15px;
	border-radius: 0 15px 15px 0;
	text-shadow: 1px 1px 3px #000;
}
fieldset form .insert .item .showHide:hover {
	background: linear-gradient(180deg, #0069ff, #91afff);
}