/* defaults */
html, body { 
    background-image: url('background.webp');
    color: white; font-family: font; font-size: 20px; white-space: nowrap; 
    position: absolute; width: 100%; height: 100%; margin: 0px; overflow: hidden; user-select:none; 
    top: 0px; left: 0px; }
@font-face { font-family: font; src: url('font.otf'); }

/* generic */
.centered { position: absolute; top: 50%; left: 50%; }
br { line-height: 6px; }
.inactive { pointer-events: none; }
.cont { overflow: hidden; }
.abs { position: absolute; }
.rel { position: relative; }
.valign { transform: translate(0px,-50%); }
.clr { clear: both; }
.fw { width: 240px; height: 300px; }
.hw { width: 240px; height: 52px; }
.dot { width: 1px; height: 1px; }
.cent { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.corn { border-radius: 3px; }
.corn2 { border-radius: 6px; }
.sha1 { box-shadow: 0px 0px 5px #2a2a2a, 0px 0px 1px #000; }
.sha2 { box-shadow: 0px 0px 4px #212121, 0px 0px 1px #000; }
.sha3 { filter: drop-shadow(0px 0px 1px #000) drop-shadow(0px 0px 4px #333); }
.tsha1 { text-shadow: 0px 0px 3px black, 0px 0px 3px black, 0px 0px 1px black; }
.tsha2 { text-shadow: 0px 0px 1px #000000, 0px 0px 2px #000000, 0px 0px 3px #000000, 0px 0px 4px #303030; }
.ins { box-shadow: 0px 0px 5px #131313 inset, 0px 0px 1px #000 inset; }
.d3 { border-top: 1px solid #ffffff30; border-bottom: 1px solid #00000082; }
.gray { background: gray; } .darkgray { background: #585858; } 
.gold { background: #aba468; } .blue { background: #688dab; } .green { background: #6c9b7a; }
.red { background: #ab6868; } .brown { background: #8b7b6d; } .pink { background: #ab688b; }

.view { background: pink; }

/* animations */
.drawing { animation: drawing 0.25s ease-in-out infinite alternate forwards; }
.floater { animation: floater 0.8s ease-in-out forwards; }
.shake { animation: shake 0.2s ease-in-out; }
.spin { animation: spin 0.3s ease-in-out forwards; }
.chat { animation: chat 0.4s ease-in-out forwards; }
@keyframes drawing { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes floater { 0% { transform: translate(0px, 0px) rotate(0deg); opacity: 1; } 30% { transform: translate(5px, -50px) rotate(6deg); opacity: 1; } 70% { opacity: 0; } 100% { transform: translate(10px, 0px) rotate(15deg); opacity: 0; } }
@keyframes shake { 0% { transform: rotate(0deg); } 33% { transform: rotate(-10deg); } 66% { transform: rotate(10deg); } 100% { transform: rotate(0deg); } }
@keyframes spin { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 100% { transform: scale(0.4) rotate(180deg); opacity: 0; } }
@keyframes color { 0% { fill: #bebdbd; } 100% { fill: #ffffff; } }
@keyframes chat { 0% { opacity: 0; transform: rotate(-90deg) scale(0.1); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } }