html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
}

canvas {
    display: block;
}

body {
    margin: 0;
}

#unity-container {
    width: 100%;
    height: 100%;
	position: relative;
}

#unity-canvas {
    width: 100%;
    height: 100%;
    background: #e1f5fe;
}

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 154px; background: url('favicon.png') no-repeat center; animation: skew-x-shake 1.3s infinite; background-size: contain; }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; 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-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }

@keyframes skew-x-shake {
  0% { transform: skewX(-5deg); }
  5% { transform: skewX(5deg); }
  10% { transform: skewX(-5deg); }
  15% { transform: skewX(5deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}