@font-face { font-family: 'Nunito'; font-weight: 700; font-style: normal; src: url(/fonts/nunito-cyrillic-700-normal.woff2) format('woff2'), url(/fonts/nunito-cyrillic-700-normal.woff) format('woff'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-weight: 700; font-style: normal; src: url(/fonts/nunito-latin-700-normal.woff2) format('woff2'), url(/fonts/nunito-latin-700-normal.woff) format('woff'); }
@font-face { font-family: 'Nunito'; font-weight: 900; font-style: normal; src: url(/fonts/nunito-cyrillic-900-normal.woff2) format('woff2'), url(/fonts/nunito-cyrillic-900-normal.woff) format('woff'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-weight: 900; font-style: normal; src: url(/fonts/nunito-latin-900-normal.woff2) format('woff2'), url(/fonts/nunito-latin-900-normal.woff) format('woff'); }

html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #14122b; color: #fff5e1;
  font-family: 'Nunito', 'Roboto', 'Trebuchet MS', 'Segoe UI', sans-serif; font-weight: 700;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  overflow: hidden;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
.row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; }
.col { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; }
.center { -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.grow { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.ava { border-radius: 50%; background-size: cover; background-position: center; display: inline-block; border: 4px solid #fff; background-color: #2a2550; }
.card { border-radius: 12px; background-size: cover; background-position: center; background-color: #2a2550; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); position: relative; }
.card.back { background-image: url(/art/back.webp); }

@-webkit-keyframes pulse { 0% { opacity: 1; } 50% { opacity: .45; } 100% { opacity: 1; } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: .45; } 100% { opacity: 1; } }
@-webkit-keyframes popin { 0% { -webkit-transform: scale(.6); opacity: 0; } 70% { -webkit-transform: scale(1.06); opacity: 1; } 100% { -webkit-transform: scale(1); } }
@keyframes popin { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@-webkit-keyframes floatup { 0% { -webkit-transform: translateY(10px); opacity: 0; } 20% { opacity: 1; } 100% { -webkit-transform: translateY(-30px); opacity: 0; } }
@keyframes floatup { 0% { transform: translateY(10px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
@-webkit-keyframes bob { 0% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(-8px); } 100% { -webkit-transform: translateY(0); } }
@keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.pulse { -webkit-animation: pulse 1.4s infinite; animation: pulse 1.4s infinite; }
.popin { -webkit-animation: popin .45s ease-out both; animation: popin .45s ease-out both; }
.bob { -webkit-animation: bob 2.4s ease-in-out infinite; animation: bob 2.4s ease-in-out infinite; }