html { background-color:#000; font-family: 'prstart'; min-width: 180px; min-height: 320px; }
body { margin:0; overflow: hidden; height: 100%; }
canvas { display: block; width: 100%; height: auto; background-color: #000000; }

/* GRIX - CSS Grid library */
.row{display:flex;flex-wrap:wrap}.row>[class*="col-"]{box-sizing:border-box;padding:0 12px;flex-grow:0}.row>.col{box-sizing:border-box;-ms-flex-preferred-size:0;-ms-flex-positive:1;flex:1 0 0;padding:0 12px;width:100%}.row>.col-1-m{width:8.3334%}.row>.col-2-m{width:16.6667%}.row>.col-3-m{width:25%}.row>.col-4-m{width:33.3334%}.row>.col-5-m{width:41.6667%}.row>.col-6-m{width:50%}.row>.col-7-m{width:58.3334%}.row>.col-8-m{width:66.6667%}.row>.col-9-m{width:75%}.row>.col-10-m{width:83.3334%}.row>.col-11-m{width:91.6667%}.row>.col-12-m{width:100%}.row>.col-1{width:8.3334%}.row>.col-2{width:16.6667%}.row>.col-3{width:25%}.row>.col-4{width:33.3334%}.row>.col-5{width:41.6667%}.row>.col-6{width:50%}.row>.col-7{width:58.3334%}.row>.col-8{width:66.6667%}.row>.col-9{width:75%}.row>.col-10{width:83.3334%}.row>.col-11{width:91.6667%}.row>.col-12{width:100%}@media (max-width: 768px){.row>[class*="col-"].col-1-m{width:8.3334%}.row>[class*="col-"].col-2-m{width:16.6667%}.row>[class*="col-"].col-3-m{width:25%}.row>[class*="col-"].col-4-m{width:33.3334%}.row>[class*="col-"].col-5-m{width:41.6667%}.row>[class*="col-"].col-6-m{width:50%}.row>[class*="col-"].col-7-m{width:58.3334%}.row>[class*="col-"].col-8-m{width:66.6667%}.row>[class*="col-"].col-9-m{width:75%}.row>[class*="col-"].col-10-m{width:83.3334%}.row>[class*="col-"].col-11-m{width:91.6667%}.row>[class*="col-"].col-12-m{width:100%}.row>.col-1{width:100%}.row>.col-2{width:100%}.row>.col-3{width:100%}.row>.col-4{width:100%}.row>.col-5{width:100%}.row>.col-6{width:100%}.row>.col-7{width:100%}.row>.col-8{width:100%}.row>.col-9{width:100%}.row>.col-10{width:100%}.row>.col-11{width:100%}.row>.col-12{width:100%}}

#content { margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.options { background-color: #fff; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 14px; color: #5c5c5c; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.options .wrapper { padding: 8px 16px; }
.options #version { position: absolute; top: 56px; left: 16px; font-size: 10px; color: #fff; }
.options a { color: inherit; text-align: center; display: block; text-decoration: none; }
.options .banner { min-height: 150px; position: relative; }
.options .banner img { max-width: 100% !important; display: block; }
.options .banner p { position: absolute; margin: 0; color: #fff; left: 16px; right: 16px; }
.options .banner .title { top: 12px; font-family: 'RobotoBlack'; font-size: 22px; line-height: 22px; }
.options .banner .google-icon { max-width: 16px !important; display: inline-block; vertical-align: top; margin-top: -2px; padding-right: 4px; }
.options .banner .subtitle { top: 128px; font-style: italic; font-size: 12px; word-break: break-word; }
.options .banner .md-btn { position: absolute; bottom: 16px; left: 16px; right: 16px; margin: 0; width: auto; height: auto; line-height: 24px; }
.options .banner .md-btn:hover + .caption,
.options .banner .caption:hover { display: block; }
.options .banner .caption { display: none; position: absolute; bottom: 52px; left: 16px; right: 16px; background-color: #fff; font-size: 12px; padding: 8px; text-transform: initial; }
.options .banner .caption:after { content: ''; position: absolute; width: 0; left: calc(50% - 8px); top: 100%; height: 0; border-style: solid; border-width: 8px 8px 0 8px; border-color: #fff transparent transparent transparent; }
.options .banner .caption a { display: inline; text-decoration: underline; }
.options p#dev-message { font-size: 10px; background-color: #eee; padding: 6px; height: 80px; margin: 0 0 6px; border: 2px solid #c37ae5; box-sizing: border-box; overflow: hidden; }
.options p#dev-message a { display: inline-block; text-decoration: underline; }
.options .switch-input { display: none; }
.options .switch-label { box-sizing: border-box; position: relative; display: inline-block; cursor: pointer; font-weight: 500; text-align: left; padding: 6px 0 6px 48px; user-select: none; width: 100%; line-height: 16px; }
.options .switch-label:before, .switch-label:after { content: ""; position: absolute; margin: 0; outline: 0; top: 50%; transform: translate(0px, -50%); transition: all 0.3s ease; }
.options .switch-label:before { left: 1px; width: 34px; height: 10px; background-color: #9e9e9e; }
.options .switch-label:after { left: 0; width: 16px; height: 16px; background-color: #e6e6e6; }
.options .switch-input:checked + .switch-label:before { background-color: #995fb3; }
.options .switch-input:checked + .switch-label:after { background-color: #de5ced; transform: translate(20px, -50%) rotate(180deg); }
.options .switch-label:hover:after { background-color: #cccccc; transform: translate(0, -50%) rotate(90deg); }
.options .strike { position: relative; opacity: 0.5; }
.options .strike:after { position: absolute; content: ''; width: 100%; border-bottom: 1px solid #fff; left: 0; bottom: 50%; }
.options .buttons { display: flex; }
.options .buttons #id-browse { border-right: 4px solid #fff; padding: 0; width: 52px; background-color: #e6e6e6; color: #5c5c5c; }
.options .buttons #id-browse:hover { background-color: #ccc; }
.options .buttons #id-browse .material-icons { color: #5c5c5c; }
.options .md-btn { font-family: 'Roboto', Arial, Helvetica, sans-serif; display: block; height: 36px; width: 100%; margin: 8px 0; padding: 6px 16px; text-align: center; touch-action: manipulation; cursor: pointer; user-select: none; border: 0; background: #de5ced; color: #fff; outline: 0; text-transform: uppercase; text-decoration: none; }
.options .md-btn:hover { background-color: #802e8d; }
.options .social { text-align: center; display: block; }
.options .social #id-social { cursor: pointer; } 
.options .social #id-social .material-icons { color: #dc265a; font-size: 16px; vertical-align: middle; animation: 1s ease-in-out throb infinite; } 
.browser { height: 100vh; background-color: #f4f4f4; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 14px; color: #5c5c5c; text-align: center; overflow-y: scroll; }
.browser .wrapper { max-width: 80%; margin: auto; padding: 32px 12px; }
.browser .icon { padding: 24px 0; max-width: 64px; }
.browser h1 { margin: 0; padding: 0; font-weight: normal; }
.browser nav { padding: 36px 12px 48px; }
.browser nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.browser nav ul li { display: inline-block; padding-bottom: 12px; margin-right: 4px; }
.browser nav ul li:last-of-type { margin: 0 0 0 auto; }
.browser nav ul li a { background-color: #ddd; display: block; text-decoration: none; color: inherit; padding: 12px; }
.browser nav ul li a:hover { background-color: #ccc; }
.browser nav ul li a.active { background-color: #de5ced; color: #fff; pointer-events: none; }
.browser nav ul li form { height: 100%; display: flex; }
.browser nav ul li form input { border: none; background-color: #ddd; padding: 0 12px; width: 80px; font-size: 14px; }
.browser nav ul li form button { cursor: pointer; border: none; background-color: #de5ced; color: #fff; padding: 12px; }
.browser .levels { justify-content: center; position: relative; min-height: 200px; }
.browser .levels .level { background-color: #fff; margin: 0 6px 12px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); padding: 12px; }
.browser .levels .level.col-6 { width: calc(50% - 6px); }
.browser .levels .level.col-6:nth-of-type(odd) { margin: 0 6px 12px 0; }
.browser .levels .level.col-6:nth-of-type(even) { margin: 0 0 12px 6px; }
.browser .levels .level.col-12 { margin: 0 0 12px; }
.browser .levels .level.limit { margin: 0; padding: 64px; }
.browser .levels .level.limit a { font-weight: bold; color: #c37ae5; }
.browser .levels .level.censor .tip { opacity: 0.1; }
.browser .levels .level.censor .level_map img { opacity: 0.1; }
.browser .levels .level .tip { text-align: left; font-size: 14px; line-height: 24px; color: #a1a1a1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser .levels .level .tip:first-letter { text-transform: capitalize; }
.browser .levels .level .level_map { cursor: pointer; overflow-x: auto; overflow-y: hidden; height: 120px; padding-bottom: 17px; }
.browser .levels .level .level_map img { image-rendering: pixelated; height: inherit; width: auto; }
.browser .levels .level .stats { display: flex; justify-content: flex-end; font-size: 14px; color: #a1a1a1; padding-top: 12px; }
.browser .levels .level .stats .material-icons { font-size: 16px; vertical-align: middle; padding-left: 12px; }
.browser .levels .level .stats .report { margin: 0 auto 0 0; cursor: pointer; }
.browser .levels .level .stats .report .material-icons { padding: 0; }
.browser .levels .level .stats .report:hover,
.browser .levels .level .stats .report.active { color: #de5ced; }
.browser .levels .level .stats > div { position: relative; cursor: default; }
.browser .levels .level .stats > div:before { display: none; background-color: #de5ced; color: #fff; content: ''; position: absolute; bottom: calc(100% + 12px); padding: 8px; white-space: nowrap; z-index: 1; }
.browser .levels .level .stats > div:after { display: none; background-color: #de5ced; color: #fff; content: ''; position: absolute; bottom: calc(100% + 8px); left: 16px; padding: 4px; transform: rotate(45deg); z-index: 1; }
.browser .levels .level .stats > div:hover:before { display: block; }
.browser .levels .level .stats > div:hover:after { display: block; }
.browser .levels .level .stats .level_id:before { content: 'Level code'; }
.browser .levels .level .stats .completed:before { content: 'Completions'; }
.browser .levels .level .stats .downloads:before { content: 'Downloads'; }
.browser .levels .level .stats .report:before { content: 'Is this level inappropriate?'; }
.browser .levels .level .stats .report.active:before { content: 'Your report has been recorded'; }
.browser .disclaimer { padding-top: 64px; }
.browser .disclaimer a { color: #de5ced; font-family: 'RobotoBlack'; }
.browser #app-container .message { margin: 0 0 12px; padding: 12px; background-color: #eee; }
.browser #app-container .message a { color: #de5ced; font-family: 'RobotoBlack'; }
.browser #app-container #app { position: sticky; top: 24px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); }
.browser #app-container #content { margin: 0; width: 100% !important; height: 100% !important; }

/* loader styling */
.loading { position: relative; }
.loading:before, .loading:after { z-index: 1; }
.loading:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #eee; }
.loading:after { content: ''; position: absolute; left: 50%; top: 50%; border: 8px solid #ddd; border-radius: 50%; border-top: 8px solid #de5ced; width: 24px; height: 24px; animation: spin 1s ease-in-out infinite; margin-left: -12px; margin-top: -12px; }

@font-face { font-family: icons; src: url('../fonts/Boxel-Icons.woff2') format('woff2'), url('../fonts/Boxel-Icons.woff') format('woff'); }
@font-face { font-family: prstart; src: url('../fonts/prstart.woff2') format('woff2'), url('../fonts/prstart.woff') format('woff'); }
@font-face { font-family: Roboto; src: url('../fonts/Roboto-Regular.woff2') format('woff2'), url('../fonts/Roboto-Regular.woff') format('woff'); }
@font-face { font-family: RobotoBlack; src: url('../fonts/Roboto-Black.woff2') format('woff2'), url('../fonts/Roboto-Black.woff') format('woff'); }

@keyframes throb { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); }}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); }}