.div_btn { position: fixed; cursor: pointer; width: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; font-size: 0.8rem; line-height: 32px; text-align: center; z-index: 999; } .div_btn a { color: #FFF; text-decoration: none; } #div_support { bottom: 120px; right: 20px; background-color: rgba(0, 0, 0, .3); } #btn-make { bottom: 170px; right: 20px; background-color: rgba(0, 0, 0, .3); } * { position: relative; box-sizing: border-box; } html, body { height: 100%; } html { background-color: #000; } body { overflow: hidden; color: rgba(255, 255, 255, 0.5); font-family: "Russo One", arial, sans-serif; line-height: 1.25; letter-spacing: 0.06em; } .hide { opacity: 0; visibility: hidden; } .remove { display: none !important; } .blur { -webkit-filter: blur(12px); filter: blur(12px); } .container { height: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .loading-init { width: 100%; align-self: center; text-align: center; text-transform: uppercase; } .loading-init__header { font-size: 2.2em; } .loading-init__status { margin-top: 1em; font-size: 0.8em; opacity: 0.75; } .stage-container { overflow: hidden; box-sizing: initial; border: 1px solid #222; margin: -1px; } @media (max-width: 840px) { .stage-container { border: none; margin: 0; } } .canvas-container { width: 100%; height: 100%; -webkit-transition: -webkit-filter 0.3s; transition: -webkit-filter 0.3s; transition: filter 0.3s; transition: filter 0.3s, -webkit-filter 0.3s; } .canvas-container canvas { position: absolute; mix-blend-mode: lighten; -webkit-transform: translateZ(0); transform: translateZ(0); } .controls { /* display: none !important; */ position: absolute; top: 0; width: 100%; padding-bottom: 50px; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; } @media (min-width: 840px) { .controls { visibility: visible; } .controls.hide:hover { opacity: 1; } } .menu { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.42); -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; } .menu__inner-wrap { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .menu__header { margin-top: auto; margin-bottom: 8px; padding-top: 16px; font-size: 2em; text-transform: uppercase; } .menu__subheader { margin-bottom: auto; padding-bottom: 12px; font-size: 0.86em; opacity: 0.8; } .menu form { width: 100%; max-width: 400px; padding: 0 10px; overflow: auto; -webkit-overflow-scrolling: touch; } .menu .form-option { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin: 16px 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .menu .form-option label { display: block; width: 50%; padding-right: 12px; text-align: right; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .menu .form-option--select select { display: block; width: 50%; height: 30px; font-size: 1rem; font-family: "Russo One", arial, sans-serif; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.5); } .menu .form-option--select select option { background-color: black; } .menu .form-option--checkbox input { display: block; width: 26px; height: 26px; margin: 0; opacity: 0.5; } @media (max-width: 840px) { .menu .form-option select, .menu .form-option input { outline: none; } } .close-menu-btn { position: absolute; top: 0; right: 0; } .btn { opacity: 0.16; width: 50px; height: 50px; display: -webkit-box; display: flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .btn--bright { opacity: 0.5; } @media (min-width: 840px) { .btn:hover { opacity: 0.32; } .btn--bright:hover { opacity: 0.75; } } .btn svg { display: block; margin: auto; } .credits { margin-top: auto; margin-bottom: 10px; padding-top: 6px; font-size: 0.8em; opacity: 0.75; } .credits a { color: rgba(255, 255, 255, 0.5); text-decoration: none; } .credits a:hover, .credits a:active { color: rgba(255, 255, 255, 0.75); text-decoration: underline; } .help-modal { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: fixed; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; -webkit-transition-property: visibility; transition-property: visibility; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } .help-modal__overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } .help-modal__dialog { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; max-width: 400px; max-height: calc(100vh - 100px); margin: 10px; padding: 20px; border-radius: 0.3em; background-color: rgba(0, 0, 0, 0.4); opacity: 0; -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } @media (min-width: 840px) { .help-modal__dialog { font-size: 1.25rem; max-width: 500px; } } .help-modal__header { font-size: 1.75em; text-transform: uppercase; text-align: center; } .help-modal__body { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 1em 0; padding: 1em 0; border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25); line-height: 1.5; color: rgba(255, 255, 255, 0.75); } .help-modal__close-btn { flex-shrink: 0; outline: none; border: none; border-radius: 2px; padding: 0.25em 0.75em; margin-top: 0.36em; font-family: "Russo One", arial, sans-serif; font-size: 1em; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.06em; background-color: rgba(255, 255, 255, 0.25); -webkit-transition: color 0.3s, background-color 0.3s; transition: color 0.3s, background-color 0.3s; } .help-modal__close-btn:hover, .help-modal__close-btn:active, .help-modal__close-btn:focus { color: #FFF; background-color: #09F; } .help-modal.active { visibility: visible; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .help-modal.active .help-modal__overlay { opacity: 1; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .help-modal.active .help-modal__dialog { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } .hide { display: none !important; } .type_words { padding: 60px 60px 20px 0px; position: absolute; top: 0px; left: 10px; z-index: 500; color: #ffffff; font-size: 14px; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 }