@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap');

body { padding: 0; margin: 0; background: #000; background-image: url('/img/web/bg.webp'); background-attachment: fixed; font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; }
#unity-container { position: absolute }
#unity-container.desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.mobile { width: 100%; height: 100% }
#unity-container > div { position: relative; width: 100%; height: 100%; }
.mobile #canvas { width: 100%; height: 100% }
#loading-area { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; color: white; justify-content: center; align-items: center; flex-direction: column; }
#progress-container { display: flex; align-items: center; justify-content: flex-end; flex-direction: column; height: 30vmin; }
#progress-fill { display: flex; align-items: flex-end; background-color: #fff8ee; background-clip: text; }
#progress-text { color: #0000; font-size: 30vmin; letter-spacing: -2px; font-weight: 700; line-height: 1; -webkit-text-stroke: 1px #FFF8EE; -webkit-font-smoothing: subpixel-antialiased; }
#loading-text { color: #fff8ee; text-align: center; font-family: Teko, Arial, sans-serif; font-size: 1.5rem; font-weight: 600; margin-top: 1rem; }
#loading-dots { display: inline-block; width: 2em; text-align: left; }
#footer { position: relative }
.mobile #footer { display: none }
#fullscreen-button { float: right; width: 38px; height: 38px; background: url('/img/web/fullscreen-button2.png') no-repeat center; background-size: cover; cursor: pointer; transition: opacity 2s; }
#warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }