@font-face {
	font-family: 'VCR OSD Mono';
	src: url('/assets/vcr-osd-mono-1-001.woff2') format('woff2'),
		url('/assets/vcr-osd-mono-1-001.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

	body, html {
		margin: 0;
		padding: 0;
		height: 100%;
		overflow: hidden;
		background: #000;
	}

#player1 {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    z-index: 1;  /* ensure player has a z-index but is below overlay */
}

#blocker {
    position: absolute;
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    z-index: 2;  /* ensure blocker is above player but below overlay */
}

#overlay {
    position: absolute;
    top: -7%;
    left: 0;
    width: 100%;
    height: 114%;
    pointer-events: none;
    background: rgba(0, 0, 0, 0); /* semi-transparent bright green for debugging */
    z-index: 3;  /* ensure overlay is on top */
}

#spacebarOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 13vw; /* scales based on viewport width */
    width: 100%; /* takes full width, but bounded by max-width */
    display: flex;  /* Flexbox to align items in the center */
    align-items: center; /* Vertically aligns children to the center */
    justify-content: center; /* Horizontally aligns children to the center */
    z-index: 5; /* ensure it's above everything else */
}

#spacebarOverlay a {
	text-decoration: none;
}

#spacebarOverlay span {
    font-family: 'VCR OSD Mono';
    color: white;
    margin-left: 20px;
}

#unmuteIcon {
    height: 0.67em; /* scales with the font size */
    margin-right: 2vw; /* maintains spacing relative to viewport width */
    fill: white; /* setting SVG color to white */
	margin-top: 2vh;
}

@keyframes simpleBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

#spacebarOverlay {
    animation: simpleBlink 1s steps(1, end) infinite;
}


#infoTableContainer {
    position: fixed;
    bottom: 0;
    table-layout: fixed;
    width: 100%;
    z-index: 4; /* Ensuring it's below the spacebarOverlay */
    opacity: 1;
    transition: opacity 1s ease-in-out;  /* 1s fade duration */
    display: flex;
}

#infoTableContainer table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'VCR OSD Mono';
    color: white;
	text-transform: uppercase;
	border-collapse: collapse;
}

#infoTableContainer td {
    padding: 10px;
	width: 33.33%;
}

#infoTableContainer td:first-child {
    text-align: left;
}


#infoTableContainer td:last-child {
    text-align: right;
}

.rotated-arrow {
    display: inline-block;  /* Makes the span behave like a block while inline */
    transform: rotate(-90deg);  /* Rotate 90 degrees counter-clockwise */
    transform-origin: center;  /* Center of the rotation */
}