* {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	outline: none;
}

body, html {
	padding: 0; margin: 0;
}

html {
	scroll-behavior: smooth;
	background: white;
}

body {
	max-width: 750px; /*body max-width*/
	margin: 0 auto;
	padding-bottom: 50px;
	background: white;
}

h1, h2, h3, h4, h5, h6, b { font-weight: 600; margin: 20px auto; }

h1 { margin: 20px auto; }

a { text-decoration: none; color: #337DFF; }

button, input[type=submit] { cursor: pointer; }

textarea { width: 100%!important; resize: vertical; }

.imp-logo { background: url(logo_1000x1000_fffbg.png); background-position: 50% 50%; background-size: cover; width: 50px; height: 50px; border-radius: 10px; }

.nav-search-wrap { background: #fff; border-radius: 10px; padding: 10px 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, .1); display: table; width: calc(100% - 10px); }
.nav-search-wrap .nav-search-icon { width: 22px; overflow: hidden; position: relative; left: 5px; bottom: 2px; }
.nav-search-wrap .nav-search-icon div { display: inline-block; width: 7px; height: 7px; border-radius: 100vw; border: 1px solid black; }
.nav-search-wrap .nav-search-icon span { display: inline-block; width: 1px; height: 5px; border-radius: 100vw; position: relative; right: 5px; top: 3px; background: black; transform: rotate(-40deg); }
.nav-search-wrap .nav-search-bar input { width: calc(100% - 40px); border: 1px solid #fff; }
.td { display: table-cell; vertical-align: middle; }

#nav-r-search-wrap { width: calc(100% - 10px); background: #fff; border-radius: 0 0 10px 10px; padding: 10px 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, .1); display: none; }
.nav-r-search-result { padding: 5px 10px; cursor: pointer; }
.nav-r-search-result:not(:last-child) { border-bottom: 1px solid #F7F6F6; }
.nav-r-search-result:hover { background: #F7F6F6; }
.nav-r-search-result small { color: #bbb; }
.nav-r-search-result-nf { padding: 2px 10px; font-size: .9em; }

.nav-s-topics-wrap { white-space: nowrap; overflow: auto; }
.nav-s-topic-wrap { display: inline-block; white-space: normal; background: #fff; border-radius: 10px; padding: 7px 10px; color: white; max-width: 150px; word-wrap: break-word; border: 1px solid black; cursor: pointer; }
.nav-s-topic-wrap.--topic span.--ticon { display: inline-block; position: absolute; content: ''; padding: .5em; background: springgreen; color: black; border-radius: 100vw; transform: translate(-15px, -15px); transition: .2s ease; }
.nav-s-topic-wrap.--topic.--notfollowing span.--ticon { background: red; }
.nav-s-topic-info { display: inline-block; text-align: center; }
.nav-s-topic-info button { margin-top: 5px; border-radius: 5px; border: 1px solid lightgray; background: #fff; }
.nav-s-topic-wrap * { margin: 0; }

#nav-topics-wrap { scroll-snap-type: y mandatory; scroll-padding: 15px; overflow-y: scroll; height: calc(100vh - 50px); transition: .2s ease; }
.nav-topic-wrap { transition: .2s ease; background: #fff; padding: 5px; min-height: calc(100% - 10px); scroll-snap-align: start; }
/*.nav-topic-wrap:not(:first-child)::before { content: ''; display: block; width: 50%; height: 1px; margin: 10px auto; background: #ddd; }*/
.nav-topic-text { font-size: 2em; font-weight: bold; text-align: center; margin: 30px auto; }
.nav-topic-text small { font-size: .5em; font-weight: normal; }
.nav-topic-topic { margin-top: 10px; display: block; text-align: center; }
.nav-topic-topic span { background: #fff; padding: 1px 10px; border-radius: 100vw; color: #38AECC; margin-right: 5px; }
.nav-topic-topic a { cursor: pointer; border: 1px solid #38AECC; color: #38AECC; padding: 7px 10px; border-radius: 100vw; margin-right: 5px; }
.nav-topic-remove, .nav-topic-report, .nav-topic-test { color: #bbb; text-decoration: none; cursor: pointer; }
.nav-topic-nimage { height: 250px; max-height: 100%; max-width: 100%; border-radius: 5px; display: block; margin: 10px auto; }
.nav-topic-image { width: 100%; max-height: calc(100vh - 100px); border-radius: 5px; }
.nav-topic-caption { font-weight: bold; font-size: .9em; }
.nav-topic-player { margin: 20px; border-radius: 100vw; padding: 10px 30px; font-size: 1.2em; background: linear-gradient(45deg, #33DCFF, #3379FF); box-shadow: 0 1px 5px #33DCFF88; border: none; color: white; cursor: pointer; }
.nav-topic-player-wrap, .nav-topic-player-wrap + .nav-topic-caption { text-align: center; }
.nav-topic-disclaimer { color: #FF3333; display: inline-block; text-align: center; }
.nav-topic-disclaimer a { text-decoration: underline dashed; color: #FF3333; }

.nav-button { padding: 5px 10px; background: #fff; color: #38AECC; border: 1px solid #38AECC; border-radius: 5px; transition: .2s ease; }
.nav-button:hover { color: white; background: lightgray; }

.nav-up { transition: .2s ease; padding: 3px 10px; background: #EEAA98; color: #fff; position: sticky; cursor: pointer;display: block; z-index: 999999999999999; text-align: center; }
#nav-join-input-username { padding: 5px 10px; border: 2px solid #ededed; background: white; border-radius: 5px; }
#nav-topics-error-wrap { position: fixed; z-index: 999; background: white; top: 0; left: 0; width: calc(100% - 20px); min-height: calc(100% - 20px); padding: 10px; }

.-t-cursive, .-t-cursive * { font-family: 'ThisIsNotARealFont'; }
.-t-normal, .-t-normal * { font-family: 'Open Sans', sans-serif; }
.-s-padding { padding: 15px; }
.-d-big { display: none; }

#nav-none { position: fixed; top: -100vh; left: -100vw; display: none; width: 0; height: 0; color: transparent; background: transparent; overflow: none; }

.nav-s-topic-wrap:nth-child(4n+1), a:nth-child(4n+1) .nav-button { border-color: #38AECC!important; color: #38AECC!important; }
.nav-s-topic-wrap:nth-child(4n+2), a:nth-child(4n+2) .nav-button { border-color: #0090C1!important; color: #0090C1!important; }
.nav-s-topic-wrap:nth-child(4n+3), a:nth-child(4n+3) .nav-button { border-color: #046E8F!important; color: #046E8F!important; }
.nav-s-topic-wrap:nth-child(4n+0), a:nth-child(4n+0) .nav-button { border-color: #022F40!important; color: #022F40!important; }

/*XMAS--
.nav-s-topic-wrap:first-child { border-color: #FF3333!important; color: #FF3333!important; }*/

#nav-cookie { background-image: url(https://images.unsplash.com/photo-1558961363-fa8fdf82db35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=75); background-position: 50% 50%; background-size: cover; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999999999; }
#nav-cookie .--content { position: absolute; top: 0; left: 0; padding: 15px; width: calc(100% - 30px); height: calc(100vh - 30px); background: rgba(0, 0, 0, .5); color: white; }
#nav-cookie .--content button { background: transparent; color: #ddd; border: 1px solid #ddd; border-radius: 5px; padding: 5px 10px; cursor: pointer; outline: none; margin: 2px; }
#nav-cookie .--content button.--highlight { border-width: 2px; font-weight: bold; margin: 1px 2px; }
#nav-cookie a { color: white; text-decoration: underline!important; font-weight: bold; }

.nav-full-div { background-position: 50% 50%; background-size: cover; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999999999999; }
.nav-full-div .--content { position: absolute; top: 0; left: 0; padding: 15px; width: calc(100% - 30px); height: calc(100vh - 30px); background: rgba(0, 0, 0, .5); color: white; }
.nav-full-div .--content button { background: transparent; color: #ddd; border: 1px solid #ddd; border-radius: 5px; padding: 5px 10px; cursor: pointer; outline: none; margin: 2px; }
.nav-full-div .--content button.--highlight { border-width: 2px; font-weight: bold; margin: 1px 2px; }
.nav-full-div a { color: white; text-decoration: underline!important; font-weight: bold; }

#nav-request-intro { background: rgba(255, 255, 255, .8); cursor: pointer; border: 1px solid #046E8F; color: #046E8F; padding: 5px 10px; border-radius: 100vw; position: fixed; bottom: 20px; left: 20px; }

.nav-imessage { position: fixed; bottom: 0; left: 0; width: calc(100% - 20px); padding: 10px; z-index: 9999999999999; background: #046E8F; color: #fff; border-top: 1px solid #38AECC; }
.nav-imessage a { color: white; text-decoration: underline; }
.nav-imessage a:last-child { color: white; background: #046E8F; font-size: 1.1em; border: 1px solid #38AECC; padding: 2px 5px; border-radius: 5px; text-decoration: none; }

.nav-dailystreak-wrap{background:white;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:86%;max-width:500px;padding:2%;z-index:999;border-radius:10px;}.nav-dailystreak-back{z-index:998;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);}.nav-dailystreak-wrap,.nav-dailystreak-wrap *{margin:0;text-align:center}.nav-dailystreak-title{font-size:4em;}.nav-dailystreak-close{position:fixed;top:0;right:10px;color:gray;font-size:2em;}.nav-dailystreak-button{background:white;border:1px solid #ccc; border-radius: 5px; padding: 2px 5px;}

.nav-loader { background: url(https://piskel-imgstore-b.appspot.com/img/bbc22782-ca59-11e9-834e-69bb8b002849.gif); background-size: 200%; width: 100px; height: 5px; animation: nav-loader 2s linear infinite; }
@keyframes nav-loader { 0% { background-position: 0% 0%; } 100% { background-position: 200px 200px; } }

.nav-final-wrap, .nav-final-e { box-sizing: border-box; }
.nav-final-e { float: left; width: 50%; padding: 10px; }
.nav-final-wrap { content: ""; clear: both; display: table; }
@media screen and (max-width: 600px) {
	.nav-final-e { width: 100%; }
}

#nav-arch-text { text-align: center; background: #757575; color: white; font-weight: bold; font-size: 1em; padding: 5px; position: sticky; top: 0; }
#nav-arch-cover { text-align: center; background: white; z-index: 9999; color: white; font-weight: bold; font-size: 1em; padding: 5px; position: sticky; top: 0; }

.nav-intro-finger { animation: nav-intro-finger 5s ease infinite; position: relative; animation-delay: 2.5s; }
@keyframes nav-intro-finger { 0%, 10%, 20%, 100% { top: 0; } 5%, 15% { top: 5px; } }

@media screen and (min-width: 1000px) {
	#nav-intro-download-app { display: none!important; }
	#nav-cookie { height: 250px; }
	.nav-full-div { left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

.nav-review { position: fixed; padding: 10px; bottom: 0; right: -100%; width: calc(100% - 20px); background: #FF3342; color: white; }

#nav-currencymanager-showbalance { transition: 1s ease; position: fixed; top: -2em; right: 0; font-size: 1.5em; font-weight: bold; z-index: 9999999999; background: white; padding: 2px 5px; border-radius: 0 0 0 5px; }

#intro { position: relative; }
#intro p { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); width: 100%; }
#intro p x { font-size: initial; display: block; font-weight: 400; }

.nav-code { background: #eee; display: block; text-align: left; padding: 5px; border-radius: 5px; overflow: auto; }
.nav-code b { color: #f33; }

.nav-navigator-wrap { position: fixed; bottom: 0; left: 0; z-index: 9999; width: 100% }
.nav-navigator { padding: 10px; max-width: 750px; box-shadow: 0 0 5px rgba(0, 0, 0, .5); background: #fff; border-radius: 10px 10px 0 0; margin: 0 auto }
.nav-navigator a { width: calc(33% - 6px); display: inline-block; text-align: center; color: initial; text-decoration: none; position: relative; top: 5px; }
a.nav-navigator-notif::after { content: ""; display: block; background: #f33; width: 5px; height: 5px; border-radius: 100vw; position: relative; bottom: 1.5em; left: calc(50% - 1em); }