@font-face {
   font-family: "Muli";
   src: url("fonts/Muli-Regular.ttf");
   font-style: normal;
   font-weight: 400;
}
@font-face {
   font-family: "MuliBold";
   src: url("fonts/Muli-Bold.ttf");
   font-style: normal;
   font-weight: 400;
}
@font-face {
   font-family: "Poppins";
   src: url("fonts/Poppins-Regular.ttf");
   font-style: normal;
   font-weight: normal;
}
@font-face {
   font-family: "Poppins";
   src: url("fonts/Poppins-Bold.ttf");
   font-style: normal;
   font-weight: bold;
}
@font-face {
   font-family: "Poppins SemiBold";
   src: url("fonts/Poppins-SemiBold.ttf");
   font-style: normal;
   font-weight: 600;
}
@font-face {
   font-family: "Poppins Medium";
   src: url("fonts/Poppins-Medium.ttf");
   font-style: normal;
   font-weight: 500;
}
body {
   margin: 0;
   padding: 0;
   background: #000;
   font-family: "Poppins", sans-serif;
}
#frame {
   max-height: 100vh;
   max-width: 100vw;
   overflow: hidden;
}

#captions {
   background: rgba(4, 57, 75, 0.9);
   border-radius: 0 0 20px 20px;
   bottom: auto;
   color: #fff;
   font-family: "Poppins", Helvetica, sans-serif;
   left: 24vw;
   font-size: clamp(11px, 2vw, 18px);
   line-height: 1.4;
   padding: 1vw;
   pointer-events: none;
   position: absolute;
   text-align: center;
   top: 0;
   user-select: none;
   visibility: hidden;
   width: 52vw;
   justify-content: center;
   z-index: 3;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
}
.fontload {
   position: absolute;
   top: 0;
   left: 0;
}
.muli {
   font-family: "Muli";
}
.muli-bold {
   font-family: "MuliBold";
}
.poppin {
   font-family: "Poppins";
}
.poppin-bold {
   font-family: "Poppins";
   font-weight: bold;
}
.poppin-semibold {
   font-family: "Poppins SemiBold";
   font-weight: 600;
}
.poppin-medium {
   font-family: "Poppins Medium";
   font-weight: 500;
}