body {
 padding: 0;
 margin: 0;
}

#unity-container {
 position: absolute;
}

#unity-container.unity-desktop {
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}

#unity-container.unity-mobile {
 width: 100%;
 height: 100%;
}

#unity-canvas {
 background: #231F20;
 border: 1px solid #ddd;
 box-shadow: 0 0 10px #ccc;
}

.unity-mobile #unity-canvas {
 width: 100%;
 height: 100%;
}

#unity-loading-bar {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 display: none;
}

#unity-logo {
 width: 154px;
 height: 130px;
 background-image: url('cleverbooks.png');
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
}

#unity-progress-bar-empty {
 width: 141px;
 height: 18px;
 margin-top: 10px;
 background: url('progress-bar-empty-dark.png') no-repeat center;
}

#unity-progress-bar-full {
 width: 0%;
 height: 18px;
 margin-top: 10px;
 background: url('progress-bar-full-dark.png') no-repeat center;
}

#unity-footer {
 position: relative;
}

.unity-mobile #unity-footer {
 display: none;
}

#unity-webgl-logo {
 float:left;
 width: 204px;
 height: 38px;
 background: url('cleverbooks.png') no-repeat center;
}

#unity-build-title {
 float: right;
 margin-right: 10px;
 line-height: 38px;
 font-family: arial;
 font-size: 18px;
}

#unity-fullscreen-button {
 float: right;
 width: 38px;
 height: 38px;
 background: url('fullscreen-button.png') no-repeat center;
}

#unity-mobile-warning {
 position: absolute;
 left: 50%;
 top: 5%;
 transform: translate(-50%);
 background: white;
 padding: 10px;
 display: none;
}