/* The person who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law. You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. See https://creativecommons.org/publicdomain/zero/1.0/ for details. */ @import url('themes.css'); @font-face { font-family: 'C'; font-style: normal; font-weight: 400; src: url('Celestia-Redux.woff') format('woff'); } @font-face { font-family: 'Sans'; font-style: normal; font-weight: 400; src: url('FiraSans-Regular.woff') format('woff'); } @font-face { font-family: 'Emoji'; font-style: normal; font-weight: 400; src: url('AndroidEmoji.woff') format('woff'); } html { font-family: 'C', 'Sans', 'Emoji', sans-serif; overflow: hidden; border-style: solid; border-width: 24px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } *, *:after, *:before { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; -webkit-tap-highlight-color: transparent !important; padding: 0; margin: 0; text-decoration: none; cursor: default; border-color: inherit; color: inherit; text-align: center; font-weight: normal; box-sizing: border-box; outline: none !important; } [href], [onclick] { cursor: pointer; } body { -webkit-touch-callout: none; background-color: inherit; border-width: 0px; border-radius: 16px; position: absolute; left: -20px; right: -20px; top: -20px; bottom: -20px; font-size: 6vmin; } #overlay { position: fixed; left: -50%; right: -50%; top: -50%; bottom: -50%; background-color: black; opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; z-index: 3; pointer-events: none; } .dialog { font-size: 8vmin; position: absolute; bottom: 10%; left: 16.6667%; right: 16.6667%; border-style: solid; border-width: 3px; border-radius: 9px; background-color: inherit; padding-bottom: 3vh; transform: translateX(150%); -webkit-transform: translateX(150%); transition: transform 0.5s; -webkit-transition: -webkit-transform 0.5s; z-index: 4; } .dialog.open { transform: translateX(0); -webkit-transform: translateX(0); } .dialog.open ~ #overlay { opacity: 0.5; pointer-events: auto; } .dialog p { font-size: 5vmin; } .dialog h1 { font-size: 7vmin; } .change { border: none; font-size: 6vh; height: 7vh; line-height: 7vh; margin: 0; padding: 0; position: absolute; top: 4px; right: 4px; width: 7vh; } .mark:after { content: "?"; } .back { border: none; top: 4px; font-size: 6vh; height: 7vh; left: 4px; line-height: 7vh; margin: 0; padding: 0; position: absolute; width: 7vh; font-family: Sans, sans-serif; } .back:after { content: "⬅"; } .background.mark { opacity: 0.1; position: absolute; font-size: 60vmin; line-height: 100vh; display: block; top: 0; bottom: 0; width: 100%; left: 0; right: 0; pointer-events: none; } .statusbar { top: -4px; } .spinner { position: absolute; z-index: 2; opacity: 0; color: white; left: 40vw; right: 40vw; height: 1em; width: 20vw; top: 2vh; transform: rotateZ(0deg); transition: transform 1.5s, opacity 0.5s 6.5s; -webkit-transform: rotateZ(0deg); -webkit-transition: -webkit-transform 1.5s, opacity 0.5s 6.5s; font-size: 20vw; line-height: 1em; pointer-events: none; } .spinner:after { display: inline-block; content: "↓"; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } @keyframes roll { 0% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; } 2% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; } 5% { opacity: 1; width: 1em; } 90% { opacity: 1; width: 1em; } 95% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; } 100% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; } } @-webkit-keyframes roll { 0% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; } 2% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; } 5% { opacity: 1; width: 1em; } 90% { opacity: 1; width: 1em; } 95% { opacity: 0; width: 1em; margin-left: 0.2em; margin-right: 0.2em; } 100% { opacity: 0; width: 0em; margin-left: 0; margin-right: 0; } } .die { display: inline-block; opacity: 1; transform: rotateY(0); -webkit-transform: rotateY(0); transition: transform 1.5s linear; -webkit-transition: -webkit-transform 1.5s linear; font-family: Sans; width: 1em; height: 1em; line-height: 1em; vertical-align: middle; } .rolling { animation: roll 7.5s forwards; -webkit-animation: roll 7.5s forwards; } .die:after { width: 1.35em; height: 1.35em; line-height: 1.35em; border-width: 1px; border-style: solid; border-color: black; background-color: rgba(255, 255, 255, 0.85); color: black; border-radius: 0.25em; display: block; content: attr(data-roll); font-size: 0.75em; } a { display: inline-block; line-height: 1em; border-radius: 0.5em; } .button { border-style: solid; border-width: 1px; border-radius: 1em; margin: 0.5em auto; font-size: 5vmin; width: 90%; display: block; border-radius: 1em; border-style: solid; border-width: 1px; line-height: 1.5em; }