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

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

#captions {
	font-family:"Poppins";
	font-weight:600;
	color:#FFFFFF;
	text-align:center;
	border-radius:0 0 1.43em 1.43em;
	background-color:rgba(0,53,124,0.9);
	z-index:10;
	display:none;
}


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

#captioncontainer {
	position:absolute;
	display:flex;
	width:100%;
	justify-content:center;
	pointer-events:none;
}
#captioncontainer.bottom {
	bottom: 0;
}
#captioncontainer.bottom #captions {
	border-radius:1.43em 1.43em 0 0;
}

#buildpanel {
	width: 80%;
	height: 80%;
	background-color: white;
	position: absolute;
	left: 10%;
	top: 10%;
	padding: 1em;
	border: 1px solid grey;
}

#levelName {
	border: 1px solid grey;
	font-size: 22px;
	font-family: "Poppins";
}

#savedlevels {
	overflow-y: scroll;
	max-width: 90%;
	max-height: 90%;
}

#closebtn {
	position: absolute;
	right: 2px;
	top: 2px;
	width: 50px;
	height: 50px;
	background-color: red;
}

#savewarning {
	color: red;
}

.hidden {
	display:none;
}


.fontload {
	position: absolute;
	top: 0;
	left: 0;
}
.poppins {
	font-family: "Poppins";
}.poppins-bold {
	font-family: "Poppins";
}.poppins-medium {
	font-family: "Poppins Medium";
}.poppins-semi {
	font-family: "Poppins SemiBold";
}