html{overflow:auto; user-select:none; background-color:black;}
body, .modal {
  padding:0px 0.5rem 0.5rem;
  color:#000c;
}
.page, .page:not(:last-child) {max-width:360px; margin:56px auto 0px; margin-bottom:0px;}
p{margin:1rem 0rem;}
.page h2{margin-top:3em;}


.em{background:#ffe08a; border-radius:0.5rem; padding:0.2rem 0.25rem 0.25rem; margin:-0.25rem;}
a[href], a[onclick]{text-decoration:underline;}
.hidden{position:absolute; left:-100000px; top:-100000px;}
.modal-content{max-width:360px; position:absolute; margin:0 auto;}

div.bg {
    position:fixed;
    z-index:-1;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background: url(bg.jpg) top center no-repeat;
    background-size:auto max(800px,100vh);
    opacity:0.67;
}

.modal-content{max-height:calc(100vh - 80px)}
.button.glyph{padding:0px; width:2.5rem; height:2.5rem;}
.button.glyph.is-fullwidth{width:100%;}
.button.is-rounded{box-shadow:0 0 4px #f1f1f1;}

.radio{line-height:1.5rem;}


nav.panel{background:white; padding:2.5rem 0px;}
a.panel-block, .panel-tabs a{text-decoration:none;}
a.panel-block:hover{border-radius:0px;}

.panel-block{padding: 0.5rem 1.5rem; max-width:360px; white-space: nowrap; overflow: hidden; background:url(icons/star.svg) no-repeat right 34px center; background-size:auto 16px;}
.panel-block.half {background-image:url(icons/half.svg);}
.panel-block.full {background-image:url(icons/full.svg);}





h1.top img{height:28px; margin-top:14px; border-radius:0px;}
h1.top {text-align:center;}
.page, .modal-content, .top {max-width:360px; margin: 0px auto;}
h1.top {height:4rem; margin-bottom:-4rem; padding-top:4px;}
.button {border-radius:0.5rem; height:unset;}

:root {
    --light-green: #5a5; /*#bfe5bf;*/
    --light-orange: #ffe5bf;
    --light-red: #f2bfbf;
    --light-purple: #e5bff2;
    --light-blue: #bfd9e5;
    --red:#cc0000;
    --brown:#cc6600;
    --orange:#ff9900;
    --green:#009900;
    --blue:#006699;
    --purple:#9900cc;
    --dark:#4a4a4a;
}

@keyframes bg-move {
  0%   { background-position: -500px 0; }
  100% { background-position: 1000px 0; }
}

.panel-block.top {display:block; border-radius:44px; border-top-left-radius:8px;}
.box {overflow:hidden; color:#000c;}
.page h2.subtitle {margin:1rem 0px; text-align:center;}
.column p {text-align:center;}
.box {border-radius:0.75rem; padding:12px 24px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgb(255, 255, 255) 100%);}
.column .button {box-shadow:none; border:0px;}
.column.selected div{background:#bfe5bf; border-radius:1.25rem;}
.column div {padding-bottom:}
.column.selected button {background-color:#f2bfbf; }
.is-dark, .button.is-dark{background:#000c; color:white;}



.buttons .button.empty:hover {border-color:whitesmoke;}
h3 {margin:2rem 0px 0.75rem; font-weight:bold;}
.modal .box {border-radius:44px; border-top-left-radius:8px;}
.button {height: 40px;}
.page .columns, .modal .columns {margin:0.75rem -0.75rem -0.75rem;}
.no-margin {margin-left:-1.5rem; margin-right:-1.5rem;}
.no-margin img {max-width:calc(100%);}
label.radio {display:block;}
.box .panel {box-shadow: unset;
margin: 0px -1.5rem;
padding: 1rem 0px;}
.button.go {margin:0 0 1px 0.5rem}
a.button {text-decoration:none}

.glyph {background-repeat:no-repeat; background-position:center; background-size: 20px;}
.glyph.inside {background-image:url(icons/inside.svg);}
.glyph.idea {background-image:url(icons/idea.svg);}
.glyph.wand {background-image:url(icons/wand.svg);}
.glyph.pause {background-image:url(icons/pause.svg);}
.glyph.play {background-image:url(icons/play.svg);}
.glyph.playone {background-image:url(icons/play.svg);}
.glyph.like {background-image:url(icons/like.svg);}


a {color:var(--red);}
a:hover {color:var(--red);}
.button.is-warning, .button.is-warning:hover, .button.is-warning:focus, .button.is-warning:active {background-color:var(--light-orange);}
.button.is-warning:hover {background-color:var(--light-red);}


.panel-block .buttons a {width:2.5rem; padding:0; overflow:hidden; border:0;}
.panel-block .buttons {width:220px;}
.panel-block .buttons:last-child {margin-bottom:0px;}
.panel-block .buttons .button.id {background:var(--blue); color:white;}
.panel-block .buttons .button:not([href]) {cursor:default; background:whitesmoke;}

abbr {font-family:monospace;}

.min .panel-block {background: url(icons/down.svg) no-repeat right 34px center; background-size: 20px;}
.max .panel-block {background: url(icons/up.svg) no-repeat right 34px center; background-size: 20px;}
.panel-block.sub, .panel-block.sup {background:unset;}
.min .panel-block.sub {display:none;}
.max .panel-block.sub {display:flex;}

.colored {margin:-24px; padding:24px; background:var(--light-orange);}
.buttons .button {margin-bottom:0px;}




.top, #go nav a, form, .tags {user-select:none;}



#text-ru {background:#000c url(edge.png) bottom repeat-x; background-size:360px; color:white; padding:0.75rem 1.5rem; border-top-right-radius:0.75rem; border-top-left-radius:0.75rem; border-left: 1px solid #fff2; border-top: 1px solid #fff4; border-right: 1px solid #fff2; min-height:calc(6rem + 1px);}
#text-ru x{opacity:0.8; color:var(--light-green)}
#text-ru y{opacity:0.5;}
#text-en-container {border-left:24px solid white; margin-bottom:-24px; padding:0px 24px 6px 0px;}
#text-en-container span, #text-en-container x[onclick] {background:white; padding:2px 4px 8px 0px; border-right:1px solid #0006;}
#text-en-fix {overflow: hidden; margin-bottom: -23px; padding-bottom: 23px;}

#space {height:4rem;}
#text {background:white; border-bottom: 1px solid #0009;}
#words {text-align:center;}
#words x{background:#fffc; padding:4px 8px; margin:4px; display:inline-block; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transform: rotate(-5deg); font-size:1.25rem; cursor:pointer;}
#words x.true{background:gold; sssscolor:var(--green);}


#hint {text-align:center; margin-top:2rem; cursor:pointer;}
#hint x {/*background:var(--red); color:white; padding:4px 12px 6px; border-radius:8px; */text-decoration:underline; cursor:pointer;}
#progress {text-align:center; margin-top:2rem;}
#progress span, #hint span {color:white; border-radius:0.75rem; border: 1px solid #fff2; border-top: 1px solid #fff4; border-bottom: 1px solid #fff1; display:inline-block; padding:2rem 0px 0px; overflow:hidden; background: linear-gradient(#0009, #000c); border-top-left-radius: 6rem; border-top-right-radius: 6rem;}
#hint span {background:linear-gradient(#0009, #000c); color:gold; width:calc(12rem + 2px); height:calc(6.5rem + 2px); padding-top:2rem;}

.travelers.table thead td {font-weight:bold; text-align:center;}
table.travelers {margin-left: -24px; width: calc(100% + 24px); background: none;}
.travelers.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {background: linear-gradient(to left, transparent 16px, white);}
.travelers.table td {text-align:left; padding: 0.5rem 1.5rem;}
.travelers.table td:nth-child(2n) {text-align:right; padding: 0.5rem 0.75rem 0.5rem 0rem;}
.travelers.table td:nth-child(3n) {width: 40px; padding: 0px;}
.travelers.table td:nth-child(3n) a {background: #0003 url(user-icon.svg) no-repeat center; background-size: 100%; cursor:pointer; border-radius:100%; display:block; margin:2px; aspect-ratio:1; position:relative; right:-2px;}
#subscribed, #sound, #autoplay, #voice {text-align:center; width:100%;}
#subscribed span, #sound span, #autoplay span, #voice span {text-decoration:underline;}

table {width:100%; text-align:center; margin-top:2rem;}
.table td {vertical-align:middle; border:0px;}
td.arrow-tail {width:20px; background: url(arrow-tail.png) no-repeat right center; background-size:12px;}
td.arrow-head {width:20px; background: url(arrow-head.png) no-repeat left center; background-size:12px;}
td button.button {border:0px;}
td .button.ava {background-color:#00000033; background-size:2.5rem; background-position:center; border:2px solid white; cursor:default;}
#home table {text-align:center; margin:2rem auto; width:unset;}
#home td button {width:2.5rem; height:2.5rem; border-radius:1.25rem;}
#home td {width:5rem; height:2.5rem;}

#home .has-addons {width:fit-content; margin:auto;}
#home .has-addons button {background-color:transparent; border-radius:0px; border:0px; width:4rem; box-shadow: unset;}
#home .has-addons p {margin:0.5rem 0px 0px;}


td.arrow-body {background: url(arrow-body.png) center repeat-x; background-size:12px;}

.right {animation: push 0.2s forwards}
#text-en a{display:none;}
#text-en x[onclick]{text-decoration:underline; display:inline; padding-right:0px; border:0px; color:var(--light-green); cursor:pointer;}
#hint, #progress, [data-name="home"] table, label {user-select:none;}
#progress y {color:gold;}


#animation x{display:inline-block; height:12rem; width:12rem; background:url(animation.gif) center no-repeat; background-size:256px; position:relative; top:32px; border-radius:160px; opacity: 0.8; border: 1px solid #fff2; border-top: 1px solid #fff4; border-bottom: 1px solid #fff1;}
#animation {height:10rem; text-align:center; position: absolute; margin-top: -22.5rem; left:0px; width:100%;}

#liked img, #finish img {border-radius:0.5rem}


.button, .button:hover, .button.is-hovered, .subtitle {
  color: #000c;
}
.apps a{font-size:0.875rem; color:white; text-decoration:underline;}
.apps .column div{text-align:center; background:#4a4a4a; border-radius:0.5rem; overflow:hidden; padding-bottom:0.5rem}


em {color:#0006}
p.note-red {border-right: 3px solid var(--red); border-radius: 0.5rem; margin-bottom:3rem;}
.travelers hr {background:var(--dark); margin:0px; width:calc(100% + 1.5rem)}
img {border-radius:0.5rem;}