@font-face {
  font-family: "commodore";
  src: url("Commodore-64-v6.3.TTF");
}

* {border: 0; margin: 0; padding: 0; box-sizing: border-box;}
img{max-width: 100%}
a:link, a:visited, a:active {color: #ffffff;text-decoration: none;}
a:hover {color: #ffff00;}
body { background-color: #000000; }
header{margin-bottom: 1em}
header div{display: inline-block; width: 50%;}
header img{width: 50%;}

footer {margin-top:1em; font-family: commodore }
footer p, .webgl-logo, footer a{display: inline-block; vertical-align: middle;}
footer p{text-align: right; width: 75%;}

#unityContainer{ max-height: 600px; }
.webgl-logo{width: 25%}
.logo-bio{ text-align: right}

.webgl-content{width: 80%; max-width: 960px;}
.webgl-content,.logo, .webgl-content .progress  {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1000 }

/*barra pgogreso*/
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
/*fin barra*/

/*footer*/
.title,.help, .fullscreen { vertical-align: middle;}
.title {margin-right: 0.5em; color: #ffffff; }
.help {margin-right: 1.5em;  color: #ffff00;  cursor: hand;}
.fullscreen{cursor: pointer;}

@media all and (max-width:768px){
	body{ font-size: 0.8em}
	.fullscreen{width: 2em}
}
@media all and (max-width:480px){
	body{ font-size: 0.6em}
}