#app {
	background-image: url(../img/bg-stars.png);
	background-position: center center;
}

@font-face {
	font-family: Star Jedi;
	src: url('Starjedi.ttf') format('true type'),
		 url('starjedi.woff2') format('woff2'),
         url('starjedi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'star_jediregular';
    src: url('starjedi-webfont.woff2') format('woff2'),
         url('starjedi-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#edit-logo {
	font-family: 'star_jediregular', arial;
	font-size: 80px;
	line-height: 86%;
    letter-spacing: normal;
    text-align: center;
    color: #ffd54e;
    min-height: 160px;
}

#edit-title {
	font-family: monospace;
	color: #4bd5ee;
	text-align: left;
	min-height: 50px;
}

#edit-episode, #edit-subtitle, #edit-text {
	font-family: 'Libre Franklin', sans-serif;
	font-size: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #ffd54e;
    height: 30px;
    font-weight: 700;
}

#edit-subtitle {
	text-transform: uppercase;
}

#edit-text {
	text-align: left;
	height: auto;
    min-height: 150px;
    overflow-y: auto;
}

.edit-text {
	background-color: transparent;
    overflow: hidden;
    width: calc(97% - 22px);
    border: 1px dashed #475475;
    padding: 10px;
}

.logo{
	font-size: 24px;
	text-align: center;
}

.title, .episode, .subtitle. .text {
	text-align: center;
}

.edit {
	width: 100%;
	text-align: center;
	margin-bottom: 15px;
}

#buttons {
	margin: 0px auto 0px auto;
    text-align: center;
}

.button-cont {
	text-align: center;
	display: inline-block;
}

.button {
	border-radius: 30px;
	width: 30px;
    height: 30px;
    padding: 10px;
    line-height: 2.8;
    display: inline-block;
}

.button.blue {
	background-color: #4bd5ee;
}

.button.green {
	background-color: #709B09;
}

.white-text {
	color: #fff;
	margin: 5px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
    font-size: 14px;
}

.white-icon > i {
	color: #fff;
}

#preview {
	text-align: center;
}

.button-spacing {
	margin: 40px auto 40px auto;
}

#output {
	text-align: center;
	max-width: 380px;
}

.hidden {
	display: none;
}

.processing-cont, .ready-cont, .error-cont, .download-cont {
	margin: 10px auto 10px auto;
}

.processing-msg, .ready-msg, .error-msg, .download-msg {
	border-radius: 30px;
	background-color: #E0FEFE;
	color: #333;
	text-align: center;
	padding:10px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
    font-size: 14px;
}

.ready-msg {
	background-color: #B5EAD7!important;
}

.error-msg {
	background-color: #f44336!important;
	color: #fff!important;
}

.download-msg {
	border-radius: 0px!important;
	background-color: #B5EAD7!important;
    border-radius: 0px!important;
    margin: 0px 5px 0px 5px;
    padding: 20px!important;
}

#header {
	background-color: #83DEE2;
	padding: 10px;
    margin: 15px 5px 15px 5px;
}

#swCanvas, #swCanvasProcess {
	max-width: 100%;
	height: auto;
}

#output > video {
	max-width: 100%;
    height: auto;
}

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
	#app {
		width: 800px;
    	margin: 0px auto;
	}
}