.frame-wrapper iframe {
border: none;
width: 100% !important;
top: 0;
height: calc(100% - 40px);
color:#fff;
transform: scale(1.001);
}

span {
	position: absolute;
	background-color: transparent;
	font-family: 'Algerian';
	color: #50f050;
	display: flex;
	text-align: center;
	font-size: 18px;
	line-height: 20px;
	-webkit-text-stroke: 0.35px black;
}

iFrame {
	background-color: black;
}

.frame-wrapper {
	flex: 1; /* All frames start equal */
	position: relative;     /* Anchors the text/time spans */
    transition: all 6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s; /* Smoothly animate changes */
	overflow: hidden;
	opacity: 1;
    min-width: 0;           /* Allows collapsing */
	display:flex;
	flex-direction: column;
	height: 100dvh;
}

/* When this class is added via JS */
.frame-wrapper.hidden { /*document.getElementById('myFrameDiv').children[3].classList.toggle('hidden');*/
flex: 0 0 0px;  /* Force Grow to 0, Shrink to 0, and Basis to 0 */
/*opacity: 0;      /* Fades out */
margin: 0;       /* Removes gaps */
pointer-events: none; /* Prevents interaction while hidden */
    visibility: hidden;     /* Extra safety for hiding content */
}

#myFrameDiv {
    display: flex;
flex-direction: row; /* Ensure they stay side-by-side */
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Position your Titles/Time without manual calc() */
.frame-wrapper span {
    position: absolute;
    text-align: center;
/*    color: white;
    width: 100%;
    background: rgba(0, 0, 0, 0.6); */
    left: 0;
/*    pointer-events: none; */
}

/* Bottom Title */
.frame-wrapper span:nth-child(2) {
    top: calc(100% - 40px);
    font-size: 17px;
}

/* Bottom Clock */
.frame-wrapper span:nth-child(3) {
    top: calc(100% - 20px);
    font-size: 20px;
}

body {
margin: 0;
}