@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Open+Sans:wght@300&display=swap); @import url(https://fonts.googleapis.com/css2?family=Hubballi&display=swap); .bg, body, html { height: 100%; margin: 0; padding: 0; width: 100% } #shootingstars, #sky, .bg, .bg_inner { position: fixed } .button, label { user-select: none } @font-face { font-family: Movement; src: url(/static/Movement.ttf) format("truetype") } body { font-family: Hubballi } .bg { z-index: -2; background: #111 } .bg_inner { animation: 1s ease-in-out 1s forwards fadein; opacity: 0; width: 90%; height: 90%; padding: 0; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: -1; border-radius: 50%; background: #075; filter: blur(100px); transition: background-color .5s } #shootingstars, #sky, .wish { margin: 0; padding: 0; overflow: hidden } @keyframes fadein { from { opacity: 0 } to { opacity: 1 } } #sky { width: 100vw; height: 100vh } #shootingstars { width: 150vh; height: 100vw; transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%)) rotate(120deg) } .wish { height: 2px; top: 300px; width: 100px; opacity: 0; background-color: #fff; position: absolute; background: linear-gradient(-45deg, #fff, rgba(0, 0, 255, 0)); filter: drop-shadow(0 0 6px white) } #root, .darken { top: 0; margin: auto; left: 0; bottom: 0; right: 0 } .description, .title { text-align: center; z-index: 2; position: relative; font-family: Hubballi } .title { font-size: 50px; color: #fff; width: 100%; height: 50px; line-height: 50px } .darken, .wrapper { width: 100%; height: 100% } .description { font-size: 24px; color: #eee; width: 100%; line-height: 1.3 } #root, .darken, .wrapper { position: absolute } .wrapper { justify-content: center; align-items: center; display: flex; flex-direction: column } .darken { z-index: 1; background: #00000019 } .blur, .center, .gg-smartphone { position: relative } #block_2fa, #block_api_hash, #block_api_id, #block_custom_bot, #block_phone, #block_qr_login, #continue_btn, #denyqr, #monkey-close, .enter.tgcode, .finish_block, .main_content, .mountains { display: none } .center { justify-content: center; align-items: center; display: flex; z-index: 2; margin-top: 20px } .blur { padding: 3rem 6rem; border-radius: .375rem; background-color: #16181d7f; border: 1px solid #2a2e37ff; backdrop-filter: blur(6px); z-index: 99 } @media screen and (max-width:736px) { .blur { width: 100%; height: 100%; padding: 1.5rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center } .title { height: auto; line-height: auto } .auth, .finish_block { display: flex; flex-direction: column; align-items: center; justify-content: center } } .button, input { padding: 10px 20px; background: 0 0; transition: box-shadow .2s } .horiz_center, .vert_center { justify-content: center; display: flex } @keyframes floating { from, to { transform: translateY(-10px) } 50% { transform: translateY(10px) } } .button { border-radius: 3px; border: 1px solid #aaa; color: #eee; cursor: pointer; min-height: 42px; box-sizing: border-box } .confirm_auth, .waiting_for_auth, input { color: #fff; text-align: center } .button:hover, input:focus { box-shadow: inset 3px 3px 1px #ffffff19, inset -3px -3px 1px #ffffff19 } input { outline: 0; border-radius: 5px; border: 1px solid #aaa } label { margin: 0 10px; color: #eee } .red_state .bg_inner { background: #933 } .horiz_center { align-items: center } .vert_center { align-items: center; flex-direction: column } #installation_icon { height: 200px; margin-bottom: 35px } .lights { animation: .8s ease-in-out .5s forwards fadein; opacity: 0 } .light { position: absolute; width: 3px; filter: blur(4px); top: 100vh; bottom: 0; left: 0; right: 0; margin: auto; z-index: -1; background: #fff } .x1, .x2, .x3 { filter: blur(3px) } .x1 { -webkit-animation: 4s linear infinite floatUp; -moz-animation: 4s linear infinite floatUp; -o-animation: 4s linear infinite floatUp; animation: 4s linear infinite floatUp; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1) } .x2 { -webkit-animation: 7s linear infinite floatUp; -moz-animation: 7s linear infinite floatUp; -o-animation: 7s linear infinite floatUp; animation: 7s linear infinite floatUp; -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); left: 15% } .x3 { -webkit-animation: 2.5s linear infinite floatUp; -moz-animation: 2.5s linear infinite floatUp; -o-animation: 2.5s linear infinite floatUp; animation: 2.5s linear infinite floatUp; -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5); left: -15% } .x4 { filter: blur(5px); -webkit-animation: 4.5s linear infinite floatUp; -moz-animation: 4.5s linear infinite floatUp; -o-animation: 4.5s linear infinite floatUp; animation: 4.5s linear infinite floatUp; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); left: -34% } .x5 { filter: blur(6px); -webkit-animation: 8s linear infinite floatUp; -moz-animation: 8s linear infinite floatUp; -o-animation: 8s linear infinite floatUp; animation: 8s linear infinite floatUp; -webkit-transform: scale(2.2); -moz-transform: scale(2.2); -o-transform: scale(2.2); transform: scale(2.2); left: -57% } .x6 { filter: blur(4px); -webkit-animation: 3s linear infinite floatUp; -moz-animation: 3s linear infinite floatUp; -o-animation: 3s linear infinite floatUp; animation: 3s linear infinite floatUp; -webkit-transform: scale(.8); -moz-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8); left: -81% } .x7 { filter: blur(3px); -webkit-animation: 5.3s linear infinite floatUp; -moz-animation: 5.3s linear infinite floatUp; -o-animation: 5.3s linear infinite floatUp; animation: 5.3s linear infinite floatUp; -webkit-transform: scale(3.2); -moz-transform: scale(3.2); -o-transform: scale(3.2); transform: scale(3.2); left: 37% } .x8 { filter: blur(6px); -webkit-animation: 4.7s linear infinite floatUp; -moz-animation: 4.7s linear infinite floatUp; -o-animation: 4.7s linear infinite floatUp; animation: 4.7s linear infinite floatUp; -webkit-transform: scale(1.7); -moz-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); left: 62% } .x9 { filter: blur(3px); -webkit-animation: 4.1s linear infinite floatUp; -moz-animation: 4.1s linear infinite floatUp; -o-animation: 4.1s linear infinite floatUp; animation: 4.1s linear infinite floatUp; -webkit-transform: scale(.9); -moz-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9); left: 85% } @keyframes floatUp { 0% { top: 100vh; opacity: 0 } 25%, 75% { opacity: 1 } 50% { top: 0; opacity: .8 } 100% { top: -100vh; opacity: 0 } } .gg-smartphone { background: linear-gradient(to left, currentColor 5px, transparent 0) 5px 12px/1px 1px no-repeat; box-sizing: border-box; display: block; transform: scale(var(--ggs, 1)); width: 13px; height: 20px; border: 1px solid; border-radius: 2px } .gg-add, .gg-brackets { border: 1px solid; position: relative; transform: scale(var(--ggs, 1)); display: block; box-sizing: border-box } .gg-add { width: 20px; height: 20px; border-radius: 20px } .gg-add::after, .gg-add::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 9px; height: 1px; background: currentColor; border-radius: 5px; top: 9px; left: 5px } .gg-add::after { width: 1px; height: 9px; top: 5px; left: 9px } .gg-brackets { width: 18px; height: 18px; border-radius: 2px } .gg-brackets::after, .gg-brackets::before { content: ""; display: block; box-sizing: border-box; position: absolute; border: 1px solid; width: 4px; height: 11px; top: 2px } .gg-brackets::before { border-right: 0; left: 3px } .gg-brackets::after { border-left: 0; right: 3px } .gg-chevron-right-o { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 20px; height: 20px; border: 1px solid; border-radius: 100px } .auth, .enter { display: none } .gg-chevron-right-o::after { content: ""; display: block; box-sizing: border-box; position: absolute; width: 6px; height: 6px; border-bottom: 1px solid; border-right: 1px solid; transform: rotate(-45deg); left: 5px; top: 6px } .button i { margin-left: .5em } .button { margin: 10px 5px } #tg_icon { height: 40vh } .auth { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 50%; height: 60%; padding: 2rem } .auth-code-form, .eula-form, .lights { top: 0; right: 0; bottom: 0; left: 0; margin: auto } .confirm_auth { font-size: 36px; padding: 10px 0 } .waiting_for_auth { font-size: 22px; padding: 15px 0 } .lights { width: 100%; height: 100%; position: fixed; z-index: -1; overflow: hidden } .auth-code-form, .eula-form { display: none; width: 60%; height: 80%; padding: 0; border-radius: 15px; position: absolute; z-index: 101; text-align: center } .eula-form .code-caption { padding: 0 30px } .eula-form { height: 60%; width: 50% } .enter { padding: 5px 10px; border: 1px solid #d17; color: #d17; font-size: 30px; border-radius: 8px; width: 50%; margin-left: 25%; margin-top: 10px; box-sizing: border-box; transition: .15s } @media screen and (max-width:736px) { .auth, .auth-code-form, .eula-form { width: 100%; height: 100%; margin: 0 } .enter { display: block } } .enter:active { background: #d17; color: #fff } #law, #monkey, #monkey-close { height: 200px; margin-top: 30px } .code-input { width: 50%; margin-top: 25px; height: 32px; border-radius: 15px; border: 1px solid #111; background: #222; transition: border .2s ease-in; font-size: 18px } .code-input:focus { border: 2px solid #87d } .code-caption { font-size: 26px; color: #fff; padding-top: 50px } .tg_guide ol li::before { content: counter(item); display: flex; justify-content: center; align-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0; margin: 0 .75rem 0 0; background: #87d; border-radius: 50%; font-size: smaller; color: #fff } .tg_guide ol { list-style: none; counter-reset: item; padding: 0 1.75rem } .tg_guide ol li { counter-increment: item; text-align: left; margin: .75rem 0; display: flex; color: #fff; font-size: 20px } .qr_inner { display: inline-block; position: relative; left: 50%; transform: translateX(-50%); padding: 15px; border-radius: 15px; background: #ffffffcc } .heroku_label { display: inline-block; background: #fff; padding: 10px 15px; border-radius: 30px; font-family: Movement; color: #000; font-size: 30px; line-height: 30px } .label_inner { display: flex } .ringed_planet { height: 30px }