@charset "utf-8";

/* Center the player horizontally and vertically on the screen */

html,body {
    font-family: "Avenir", Helvetica, Verdana, Arial, sans-serif;
    background-color: #053786;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #FDFAC2;
    margin: 0;
    box-sizing: border-box;
	font-size: calc(12px + 0.6vw);
}

/* Container styling for structure and alignment */
.player-container {
    width: 100vmin;
    height: 62vmin;
    align-items: center;
    justify-content: center;
    background-color: #1a1a22;
    padding: 1.0vw;
    border-radius: 0.5vw;
    box-shadow: 0 2.0vmin 3.0vmin 1.5vmin rgba(255,255,150,0.5);
}

.player-container.test {
    height: 100vmin;
    width: 53.5vmin;
}

/* Responsive video element styling */
video {
    width: 100%;
    border-radius: 0.5vw;
	height: auto;
    background-color: #000;
    margin-left: auto;
    margin-right: auto;
	align-items: center;
	justify-content: center;
}

.flex-container {
	width: 100%;
	height: 2.5vh;
    display: inline-flex;
    align-items: start;
	justify-content: start;
    gap: 2.5vw;
    cursor: pointer;
}

.video-title {
    line-height: 2vh;
	font-size: 1.2rem;
	text-align: center;
    justify-content: center;
    background-color: #1a1a22;
    align-self: center;
    margin: 0.5vh 0.5vw 0 1vw;
}

.back-button {
    padding: 0;
	border: none;
	cursor: pointer;
	background-color: #1a1a22;
    align-self: start;
    justify-content: start;
    border-radius: 0.5vw;
}

.back-button img {
    height: 3.0vh;
    width: auto;
    align-self: start;
    margin: 0.5vh 0.5vw 0.5vh 0.5vw;
}

.back-button:hover {
	background-color: #4AC4CB;
}