@import "./buttons.css";
body {
	/* background-color: #26b4bc; */
	background-color: #802392;
	font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
	max-inline-size: 900px;
	margin: auto;
}

.player {
	margin-block-start: 100px;
	position: relative;
}

.player video {
	inline-size: 100%;
	aspect-ratio: 16/9;
	vertical-align: middle;
	object-fit: cover;
}

.player-title {
	color: white;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 20px;
}

.player-actions {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.player-progress {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	padding: 10px;
}

.player-progress input {
	flex: 1;
}

.player-overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: 0.3s opacity;
}

.player-overlay:hover {
	opacity: 1;
}