@font-face {
	font-family: FOT-RodinNTLGPro-B_0;
	src: url(../Fonts/FOT-RodinNTLGPro-B_0.woff2) format('woff');
}

@font-face {
	font-family: FOT-RodinNTLGPro;
	src: url(../Fonts/FOT-RodinNTLGPro-M.woff2) format('woff');
}

@font-face {
	font-family: FOT-RodinNTLGPro;
	src: url(../Fonts/FOT-RodinNTLGPro-DB.woff2) format('woff');
	font-weight: bold;
}

@font-face {
	font-family: Orbitron-Black;
	src: url(../Fonts/Orbitron Black.woff2) format('woff');
}

@font-face {
	font-family: Orbitron-Bold;
	src: url(../Fonts/Orbitron Bold.woff2) format('woff');
}

@font-face {
	font-family: Orbitron-Light;
	src: url(../Fonts/Orbitron Light.woff2) format('woff');
}

@font-face {
	font-family: Orbitron-Medium;
	src: url(../Fonts/Orbitron Medium.woff2) format('woff');
}

@font-face {
	font-family: SourceCodePro-Regular;
	src: url(../Fonts/SourceCodePro-Regular.woff2) format('woff');
}

@-webkit-keyframes smallbounce { 
	from { transform: translate(0, 5px); } 
	to  { transform: translate(0, -5px); } 
}
@-moz-keyframes smallbounce { 
	from { transform: translate(0, 5px); } 
	to { transform: translate(0, -5px); } 
}
@keyframes smallbounce {
    from { transform: translate(0, 5px); }
    to  { transform: translate(0, -5px); }
}

.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

.hidden { opacity: 0; }

.shown { opacity: 0; }

#app-container { position: relative; width: 1334px; height: 750px; display: flex; justify-content: center; align-items: center; }

#parent-container { display: flex; flex-direction: column; align-items: center; }

#text-container { position: absolute; margin: auto; height: 750px; width: 1334px; font-family: 'FOT-RodinNTLGPro'; }

#text-container #title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 20px; transition: opacity 0.3s; }

#text-container #diva { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 34px; transition: opacity 0.3s; }

#text-container #dialog-box { box-sizing: border-box; position: absolute; bottom: 0; text-align: left; width: 100%; height: 200px; }

#text-container #main-ui-img { width: 100%; transition: opacity 0.1s; }

#dialog-box { color: white; font-weight: bold; text-shadow: 1px 1px 6px black; transition: opacity 0.1s; }

#dialog-box #character { position: absolute; top: -5px; left: 70px; font-size: 30px;  }

#dialog-box #dialog { overflow: hidden; position: absolute; padding: 0 30px 0 70px; margin-top: 60px; box-sizing: border-box; height: 120px; width: 100%; font-size: 28px; font-weight: normal; line-height: 68px; }

#dialog #dialog-inner { max-width: 1125px; }

#dialog b { font-weight: bold; }

#dialog-box #ui-buttons { right: 20px; top: -50px; position: absolute; }

#dialog-box .ui-button { position: relative; height: 85px; }

#dialog #dialog-controls { position: fixed; right: 0; display: flex; height: 135px; align-items: center; }

#dialog-controls #dialog-next { margin-right: 37px; animation: smallbounce 0.5s ease-in-out 0s infinite alternate; }

#dialog-next img { height: 80px; }

#dialog-controls #dialog-scroll { display: flex; flex-direction: column; height: 80px; margin-right: 30px; justify-content: space-between; }

#dialog-scroll #dialog-scroll-up { transform: scale(1, -1); }

#dialog-scroll img { height: 35px; }

#other-controls-container { display: flex; width: 550px; justify-content: center; }

#select-mission { min-width: 0; }

#select-language { margin-left: 10px; }

#volume-control { display: flex; margin-right: 10px; }

#volume-control #mute-button { cursor: pointer; }

@media screen and (max-width: 550px) {
	#other-controls-container { width: 100vw; }
}