html{
	height:100%;
}

body{
	font: 28px arial;
	background: radial-gradient(gray, black);;
	text-align:center;
}


#player-wrap{
	margin: 0 auto;
	width:1000px;
	height:700px;
	margin-top:3%;
	display:flex;
	justify-content: center;
	border-radius: 8px 8px 0px 0px;
	background-image:url('back.jpg');

}

#player{
	display:none;
	margin-top:30px;
	border-radius: 8px;
}

#choices{
	height:60px;
	display:flex;
	justify-content: center;
	align-items: center;
}

#title{
	width:992px;
	margin:0px auto;
	padding:4px;
	color:white;
	background:black;
	font-style: italic;
	border-radius: 0px 0px 8px 8px;
}

#unsupported{
	background:black;
	color:gold;
}

small{font-size:18px;color:gold;margin-left:8px;}

@property --color-start{
  syntax: '<color>';
  inherits: false;
  initial-value: white;
}

@property  --color-stop{
  syntax: '<color>';
  inherits: false;
  initial-value: gray;
}

button{
	min-width:80px;
	padding:6px; 
	margin:6px;
	font-size:24px;
	border-radius:4px;
	cursor:pointer;
	border:1px outset;
  	background: linear-gradient(var(--color-stop), var(--color-start), var(--color-stop));
  	transition: all 1.5s;
  	transition-property: --color-start, --color-stop;
}

button:hover{
	 --color-start: cyan;
	 --color-stop:blue;
}

button:last-child:hover{
	 --color-start:yellow;
	 --color-stop: red;
}