@font-face {
    font-family: "Muli";
    src: url("fonts/Muli-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Muli Bold";
    src: url("fonts/Muli-Bold.ttf");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Muli SemiBold";
    src: url("fonts/Muli-SemiBold.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Muli SemiBoldItalic";
    src: url("fonts/Muli-SemiBoldItalic.ttf");
    font-style: normal;
    font-weight: 400;
}

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

@font-face {
    font-family: "Grandstander";
    src: url("fonts/Grandstander-clean.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Granstander Clean"; /* [sic] */
    src: url("fonts/Grandstander-clean.ttf");
    font-style: normal;
    font-weight: 400;
}

body, div {
	margin:0;
	padding:0;
	border:0;
}

#frame {
	
	width:100vw;
}

#content{
	width:100%;
	height:100%;
	position:relative;
}




canvas{
	width:100vw;
	height:100vh;
	display:block;
	margin:0 auto;
}

@media screen and (min-aspect-ratio: 2/1) {
	canvas {
		width:200vh;
		height:100vh;
		margin:0 auto;
	}
}

@media screen and (max-aspect-ratio:4/3) {
	canvas {
		width:100vw;
		height:75vw;
		margin:auto 0;
	}
}

@media screen and (min-width: 500px) and (max-width:800px) {

}


body {
	font-family:"Muli";
}

.fontload {
	position:absolute;
	top:0;
	left:0;
}

.muli {
    font-family:"Muli"
}

.muli-bold {
    font-family:"Muli Bold"
}

.muli-extrabold {
    font-family:"Muli ExtraBold"
}

.muli-semibold {
    font-family:"Muli SemiBold"
}

.muli-semibold-italic {
    font-family:"Muli SemiBoldItalic"
}

.grandstander {
	font-family:"Grandstander"
}
.grandstander2 {
	font-family:"Granstander Clean"
}

#frame{
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}
*{
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}


#captions {
	font-family:"Muli SemiBold";
	font-weight:600;
	color:#FFFFFF;
	text-align:center;
	border-radius:0 0 1em 1em;
	background-color:rgba(0,27,40,0.85);
	z-index:10;
	display:none;
}

#captiontext {
	padding:0 0.5em;
	margin:auto;
}

#captioncontainer {
	position:absolute;
	display:flex;
	width:100%;
	top:0;
	justify-content:center;
	pointer-events:none;
}