@font-face {
   font-family: "Grandstand_updated";
   src: local("Grandstand_updated"), local("Grandstand updated"),
      url("fonts/Grandstand_updated.ttf");
   font-style: normal;
   font-weight: 400;
}

@font-face {
   font-family: "Muli";
   src: local("Mulish-Medium"), local("Mulish-Medium"),
      url("fonts/Mulish-Medium.ttf");
   font-style: normal;
   font-weight: 400;
}

body {
   margin: 0;
   padding: 0;
   background: #000;
}
#frame {
   max-height: 100vh;
   max-width: 100vw;
   overflow: hidden;
}

#fontLoader {
   visibility: hidden;
   position: absolute;
}

#captions {
   visibility: hidden;
   position: absolute;
   border-radius: 0 0 20px 20px;
   padding: 1vw;
   width: 84vw;
   left: 8vw;
   line-height: 1.6rem;
   text-align: center;
   pointer-events: none;
   color: #fff;
   background: rgba(4, 57, 75, 0.9);
   top: 0;
   bottom: auto;
   font-family: "KarlaRegular", Helvetica, sans-serif;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.f1 {
   font-family: "Muli";
}
.f2 {
   font-family: "Grandstand_updated";
}