*
* Vieb - Vim Inspired Electron Browser
* Copyright (C) 2019-2021 Jelmer van Arnhem
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/
/*
 * COLORS
*/
:root {
    /* general */
    --bg: #282828;
    --fg: #ebdbb2;
    --tab-background: #32302f;
    --tab-suspended: #1d2021;
    --visible-tab: #b8bb26;
    --tab-split: #8ec07c;
    --tab-audio: #83a598;
    --tab-muted: #fbf1c7;
    --tab-muted-playing: #ff3;
    --tab-crashed: #fb4934;
    --tab-scrollbar: #5ff;
    --container-background: none;
    --mode-normal-fg: var(--bg);
    --mode-normal-bg: #83a598;
    --mode-command-fg: var(--bg);
    --mode-command-bg: #fb4934;
    --mode-insert-fg: var(--bg);
    --mode-insert-bg: #b8bb26;
    --mode-follow-fg: var(--bg);
    --mode-follow-bg: #d3869b;
    --mode-explore-fg: var(--bg);
    --mode-explore-bg: #8ec07c;
    --mode-search-fg: var(--bg);
    --mode-search-bg: #fabd34;
    --mode-pointer-fg: var(--bg);
    --mode-pointer-bg: #d65d0e;
    --mode-visual-fg: var(--bg);
    --mode-visual-bg: #fe8019;
    --url-default: #928374;
    --url-search: #8ec07c;
    --url-searchwords: #fcf;
    --url-url: #689d6a;
    --url-suggest: #8ec07c;
    --url-file: #fabd34;
    --url-invalid: #fb4934;
    --follow-text: #000;
    --follow-url-bg: #458588;
    --follow-url-border: #83a598;
    --follow-click-bg: #cc241d;
    --follow-click-border: #fb4934;
    --follow-insert-bg: #689d6a;
    --follow-insert-border: #8ec07c;
    --follow-onclick-bg: #98971a;
    --follow-onclick-border: #b8bb26;
    --follow-other-bg: #fbf1c7;
    --follow-other-border: #92837a;
    --suggestions-border: #928374;
    --suggestions-bg: #665c54;
    --suggestions-selected: #98971a;
    --suggestions-searchwords: #b16286;
    --suggestions-url: #8ec07c;
    --suggestions-file: #d79921;
    --notification-border: #b8bb26;
    --notification-date: #928374;
    --notification-permission: #bdae93;
    --notification-error: #fb4934;
    --notification-warning: #fabd34;
    --notification-info: #83a598;
    --notification-success: #b8bb26;
    --url-hover-fg: #000;
    --url-hover-bg: #fff9;
    /* special pages */
    --link-color: #0cf;
    --link-underline: #059;
    --scrollbar-bg: #444;
    --scrollbar-thumb: #bbb9;
    --button-disabled: #999;
    --code-fg: #fff;
    --code-bg: #111;
    --code-command: #f88;
    --placeholder-text: #ccc;
    --special-page-element-bg: #444;
    --special-page-element-border: #222;
    --input-unfocused: #666;
    --input-focused: #aaa;
    --download-progress-fg: #ccc;
    --download-progress-bg: #666;
    --helppage-h1: #d33;
    --helppage-h2: #f76;
    --helppage-h3: #fb9;
    --helppage-countable: #fc0;
}


/*
 * GLOBAL
*/
html {margin: 0;padding: 0}
body {color: var(--fg);font: 14px "DejaVu Sans Mono", "Courier", monospace;padding: 0;margin: 0;opacity: 0;}
#app {height: 100vh;width: 100vw;overflow: hidden;user-select: none;display: flex;flex-direction: column;background: var(--bg);opacity: 1;line-height: 1.3em;}
body:not(#app) input {background: transparent;color: var(--fg);font: inherit;width: 100%;border: .1em solid var(--input-unfocused);padding: .2em;margin-bottom: 1em;box-sizing: border-box;outline: none;height: 2em;}
body:not(#app) input:focus {border: .1em solid var(--input-focused);}
body:not(#app) kbd {background: var(--code-bg);color: var(--code-fg);padding: .1em;overflow-wrap: anywhere;}
body:not(#app) button {background: transparent;color: var(--fg);border: .1em solid var(--fg);font: inherit;}
body:not(#app) button:not(:disabled):hover {cursor: pointer;font-weight: bold;}
body:not(#app) button:disabled {border-color: var(--button-disabled);color: var(--button-disabled);}
body:not(#app) ::laceholder {color: var(--placeholder-text);}
::-webkit-scrollbar {width: 1em;background: var(--scrollbar-bg);}
::-webkit-scrollbar-thumb {background: var(--scrollbar-thumb);}


/*
 * APP
*/
/* navbar & tabs */
#navbar {z-index: 30;}
#tabs, #navbar {width: 100vw;display: flex;pointer-events: none;background: var(--bg);}
#logo {display:none;-webkit-app-region: drag;height: 1.8em;width: 1.8em;margin: .1em;min-width: 1.8em;min-height: 1.8em;}
#mode-container {display: flex;width: 7em;text-align: center;margin: .1em .1em;}
#mode {text-transform: capitalize;font-size: 1.3em;margin: auto;font-weight: bold;display: flex;}
#repeat-counter, #pressed-keys {margin: auto .2em;line-height: 2em;display: none;}
/* modes */
[current-mode=normal] #mode-container, #helppage .normal, .normal {color: var(--mode-normal-fg);background: var(--mode-normal-bg);}
[current-mode=command] #mode-container, #helppage .command, .command {color: var(--mode-command-fg);background: var(--mode-command-bg);}
[current-mode=insert] #mode-container, #helppage .insert, .insert {color: var(--mode-insert-fg);background: var(--mode-insert-bg);}
[current-mode=follow] #mode-container, #helppage .follow, .follow {color: var(--mode-follow-fg);background: var(--mode-follow-bg);}
[current-mode=explore] #mode-container, #helppage .explore, .explore {color: var(--mode-explore-fg);background: var(--mode-explore-bg);}
[current-mode=search] #mode-container, #helppage .search, .search {color: var(--mode-search-fg);background: var(--mode-search-bg);}
[current-mode=pointer] #mode-container, #helppage .pointer, .pointer {color: var(--mode-pointer-fg);background: var(--mode-pointer-bg);}
[current-mode=visual] #mode-container, #helppage .visual, .visual {color: var(--mode-visual-fg);background: var(--mode-visual-bg);}
/* tabs */
#tabs {display: flex;overflow: hidden;max-width: 100vw;width: 100vw;z-index: 2;}
#tabs > span {color: var(--fg);background: var(--tab-background);display: flex;margin: 0 .1em .1em 0;flex: 1;overflow: hidden;white-space: nowrap;height: 1.9em;}
#tabs > span > img {margin: auto 0 auto .25em;padding: 0;height: 1.5em;width: 1.5em;min-height: 1.5em;min-width: 1.5em;pointer-events: none;}
#tabs > span > span {margin: auto 0 auto .25em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#tabs .visible-tab {background: var(--visible-tab);color: var(--bg);}
#tabs [suspended] {background: var(--tab-suspended);}
#tabs.multiple #current-tab {border-left: solid .3em var(--tab-split);}
#tabs .pinned {min-width: 1.9em !important;max-width: 1.9em;width: 1.9em;padding: 0;}
#tabs .pinned[media-playing], #tabs .pinned[muted] {width: 2.2em;max-width: 2.2em;}
#tabs .pinned > img {padding: 0;margin: .2em;}
#tabs .crashed {background: var(--tab-crashed);}
#tabs [media-playing]::before {border-left: solid .3em var(--tab-audio);content: "";}
#tabs [muted]::before {border-left: solid .3em var(--tab-muted);content: "";}
#tabs [muted][media-playing]::before {border-left: solid .3em var(--tab-muted-playing);content: "";}
#tabs.scroll {overflow-x: auto;}
#tabs.wrap {flex-wrap: wrap;}
/* pages container */
.webview {pointer-events: none;position: fixed;display: none;}
#page-container, #current-page, .visible-page {display: flex;flex: 1;height: 100%;width: 100%;}
#pages.multiple .webview {border: solid .15em transparent;box-sizing: border-box;}
#pages.multiple #current-page {border-color: var(--tab-split);}
#pagelayout {display: flex;height: 100%;width: 100%;}
#pagelayout * {flex: 1;}
#pagelayout.hor, #pagelayout .hor {flex-direction: row;display: flex;}
#pagelayout.ver, #pagelayout .ver {flex-direction: column;display: flex;}
/* fullscreen */
#app.fullscreen #navbar, #app.fullscreen #tabs, #app.fullscreen .webview {display: none;}
#app.fullscreen #current-page {display: flex;border: none;width: 100vw !important;height: 100vh !important;top: 0 !important;bottom: 0 !important;left: 0 !important;right: 0 !important;}
/* conditionally hide tabs or navbar from the vieb window */
#app.tabshidden #tabs {display: none;}
#app.navigationhidden #navbar {position: absolute;top: -10em;}
#app.navigationhidden #suggest-dropdown {top: .1em;max-height: calc(100vh - .2em);}
/* Nav url/search/command */
#containername {display: flex;margin: auto;height: 1.8em;align-items: center;padding: 0 .5em;background: var(--container-background);color: var(--fg);}
#url {display: inline-block;flex: 1;border: solid .1em var(--url-default);margin: .1em;background: transparent;color: var(--fg);outline: none;font: inherit;min-width: 0;padding: .1em;width: 0;}
#url.search {border-color: var(--url-search);}
#url.searchwords {border-color: var(--url-searchwords);}
#url.url {border-color: var(--url-url);}
#url.suggest {border-color: var(--url-suggest);}
#url.file {border-color: var(--url-file);}
#url.invalid {border-color: var(--url-invalid);}
/* follow */
#follow {position: fixed;display: none;z-index: 1;}
#follow .follow-url, #follow .follow-inputs-click, #follow .follow-inputs-insert, #follow .follow-onclick, #follow .follow-other {position: absolute;color: var(--follow-text);cursor: pointer;padding: 0 .1em;}
.follow-url-border, .follow-inputs-click-border, .follow-inputs-insert-border, .follow-onclick-border, .follow-other-border {position: absolute;box-sizing: border-box;cursor: pointer;}
.follow-url {background: var(--follow-url-bg);border: solid .15em var(--follow-url-border);}
.follow-inputs-click {background: var(--follow-click-bg);border: solid .15em var(--follow-click-border);}
.follow-inputs-insert {background: var(--follow-insert-bg);border: solid .15em var(--follow-insert-border);}
.follow-onclick {background: var(--follow-onclick-bg);border: solid .15em var(--follow-onclick-border);}
.follow-other {background: var(--follow-other-bg);border: solid .15em var(--follow-other-border);}
.follow-url-border {border: solid .07em var(--follow-url-border);}
.follow-inputs-click-border {border: solid .07em var(--follow-click-border);}
.follow-inputs-insert-border {border: solid .07em var(--follow-insert-border);}
.follow-onclick-border {border: solid .07em var(--follow-onclick-border);}
.follow-other-border {border: solid .07em var(--follow-other-border);}
/* suggestions */
#suggest-dropdown {z-index: 15;position: fixed;top: 2.1em;left: .1em;width: calc(100vw - .2em);background: var(--suggestions-border);max-height: calc(100vh - 2.2em);overflow-y: auto;display: flex;flex-direction: column;}
#suggest-dropdown div {flex-grow: 1;flex-shrink: 0;display: flex;padding: .4em;margin: .1em;background: var(--suggestions-bg);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;pointer-events: none;}
#suggest-dropdown div .title, #suggest-dropdown div .file, #suggest-dropdown div .url {margin: auto .5em;min-width: 0;text-overflow: ellipsis;overflow: hidden;}
#suggest-dropdown div .title {flex-shrink: 0;max-width: 50%;}
#suggest-dropdown div .icon {height: 1.5em;width: 1.5em;}
#suggest-dropdown div .url {color: var(--suggestions-url);}
#suggest-dropdown div .file {color: var(--suggestions-file);}
#suggest-dropdown div .searchwords {color: var(--suggestions-searchwords);}
#suggest-dropdown div.selected {background: var(--suggestions-selected);}
/* mouse related */
#invisible-overlay {-webkit-app-region: drag;position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 50;}
#app.mouse .webview {pointer-events: all;}
#app.mouse #invisible-overlay {display: none;}
#app[current-mode=insert] #invisible-overlay {display: none;}
#app.mouse #navbar, #app.mouse #tabs {pointer-events: all;}
#mode-suggestions {background: var(--bg);max-height: 0;position: absolute;left: 2em;top:2em;z-index: 25;transition: .5s all;overflow: hidden;display: inline-block;width: 7em;text-transform: capitalize;display: flex;flex-direction: column;}
#mode-suggestions:hover {max-height: 100vw;}
#app.mouse #mode-container:hover #mode-suggestions {max-height: 100vw;}
#mode-suggestions div {font-size: 1.3em;transition: .1s all;}
#app.mouse #suggest-dropdown div:hover, #mode-suggestions div:hover, #tabs > span:hover {font-weight: bold;cursor: pointer;}
/* notifications & map suggestions */
#notifications, #app #mapsuggest {display: flex;position: fixed;flex-direction: column;z-index: 2;}
#notifications > span, #app #mapsuggest {background: var(--bg);margin-bottom: .5em;padding: .5em;display: flex;min-width: 25em;width: 33vw;max-width: 100em;border: .1em solid var(--notification-border);overflow-wrap: anywhere;}
#notifications > span.permission {color: var(--notification-permission);}
#notifications > span.error {color: var(--notification-error);}
#notifications > span.warning, #app #mapsuggest span.warning {color: var(--notification-warning);}
#notifications > span.info, #app #mapsuggest span.info {color: var(--notification-info);}
#notifications > span.success, #app #mapsuggest span.success {color: var(--notification-success);}
#app #mapsuggest {width: auto;max-width: 90vw;max-height: calc(100vh - 6.5em);overflow-y: auto;}
#app #mapsuggest span.warning {display: inline-block;margin-right: 1em;}
.bottomright {right: .7em;bottom: 0;}
.bottomleft {left: .7em;bottom: 0;}
.topright {right: .7em;top: 4.7em;}
.topleft {left: .7em;top: 4.7em;}
.bottomright {right: .7em;bottom: 0;}
.bottomleft {left: .7em;bottom: 0;}
.topright {right: .7em;top: 4.7em;}
.topleft {left: .7em;top: 4.7em;}
#app.tabshidden .topright, #app.tabshidden .topleft {top: 2.7em;}
#app.navigationhidden .topright, #app.navigationhidden .topleft {top: 2.7em;}
#app.navigationhidden.tabshidden .topright, #app.navigationhidden.tabshidden .topleft {top: .7em;}
#app.tabshidden #mapsuggest, #app.navigationhidden #mapsuggest {max-height: calc(100vh - 4.5em);}
#app.navigationhidden.tabshidden #mapsuggest {max-height: calc(100vh - 2.5em);}
/* scrollbar for overflowing tabs */
#tabs::-webkit-scrollbar {height: .2em;}
#tabs::-webkit-scrollbar-thumb {background: var(--tab-scrollbar);}
/* context menu */
#context-menu {padding: 0;margin: 0;background: var(--suggestions-bg);position: fixed;z-index: 50;white-space: nowrap;max-height: 100vh;overflow-y: auto;}
#context-menu:not(:empty) {border: .1em solid var(--suggestions-border);}
#context-menu > .menu-item {padding: .1em .8em;margin: 0;cursor: pointer;}
#context-menu > .menu-item.selected {background: var(--suggestions-selected);}
#context-menu > .menu-group {padding: .2em 0 0 0;font-weight: bold;}
/* other */
@keyframes pointer {0% {background: #f007;} 17% {background: #ff07;} 33% {background: #0f07;} 49% {background: #0ff7;} 66% {background: #00f7;} 83% {background: #f0f7;} 100% {background: #f007;}}
#app #pointer {display: none;position: fixed;height: 1em;width: .7em;z-index: 20;backdrop-filter: invert(100%);animation: 1s infinite pointer;}
#app[current-mode=pointer] #pointer {display: block;}
#app[current-mode=visual] #pointer {display: block;}
#url-hover {display: none;position: absolute;background: var(--url-hover-bg);color:var(--url-hover-fg);bottom: 0;left: 0;right: 0;pointer-events: none;padding: .1em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: fit-content;margin: auto;max-width: 80vw;text-align: center;z-index: 2;}


/*
 * SPECIAL PAGES
*/
.specialpage {width: 90vw;margin: auto;}
.specialpage a {color: var(--link-color);white-space: nowrap;overflow: hidden;}
.specialpage a:not([class]) {text-decoration: var(--link-underline) underline;}
.specialpage a[href^="https"]::after {background: url(../img/topright.png) no-repeat 0 0;background-size: .5em 1em;content: "";padding-right: .5em;}
.specialpage a:hover {text-decoration: var(--link-color) underline;}
.specialpage h1 {font-size: 2em;margin: 1em 0;padding: 0;}
.specialpage img {height: 1.9em;margin: .5em;float: right;}
.specialpage *[onclick] {cursor: pointer;}
.specialpage #remove-all {height: 2.4em;margin: .2em;cursor: pointer;}
.specialpage #list {display: flex;flex-direction: column-reverse;}
/* cookies */
#cookiespage .cookie {background: var(--special-page-element-bg);margin: .35em 0;padding: .35em;display: flex;border: .1em solid var(--special-page-element-border);}
#cookiespage .cookie * {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 33%;padding: .2em 0;}
#cookiespage .remove {height: 1em;width: 1em;margin: auto 0;cursor: pointer;}
/* downloads */
#downloadspage .download {background: var(--special-page-element-bg);margin-bottom: 1em;border: .1em solid var(--special-page-element-border);}
#downloadspage .title {margin: .4em;font-size: 1.5em;width: calc(100% - 4em);cursor:pointer;}
#downloadspage progress {-webkit-appearance: none;width: calc(100% - 1em);margin: .5em;}
#downloadspage progress::-webkit-progress-value {background: var(--download-progress-fg);}
#downloadspage progress::-webkit-progress-bar {background: var(--download-progress-bg);}
#downloadspage .misc {display: flex;margin: .5em;flex-direction: column;width: calc(100% - 1em);}
#downloadspage .filelocation {cursor: pointer;}
#downloadspage img {cursor: pointer;}
/* extensions */
#extensionspage img {height: 4em;width: 4em;margin-right: 1em;}
#extensionspage .extension {display: flex;align-items: center;background: var(--special-page-element-bg);border: .1em solid var(--special-page-element-border);margin: 1em 0;padding: 1em;}
#extensionspage .fullwidth {flex: 1;}
#extensionspage .title {margin: .4em 0;font-size: 1.5em;}
/* help */
#helppage {margin: 3vw;width: auto;line-height: 2;}
#helppage main {max-width: 65em;margin: auto;}
#helppage .header, #helppage .header > div {font-size: 5vw;display: flex;flex: 1;justify-content: center;}
#helppage .header > div > img {height: 10vw;margin: 0 1em 0 0;}
#helppage .cheatsheet {float: none;height: auto;width: 100%;filter: contrast(.5) invert() contrast(4) hue-rotate(180deg) saturate(4);}
#helppage a {overflow-wrap: anywhere;}
#helppage li {line-height: 1.5em;}
#helppage .section {display: flex;flex-wrap: wrap;align-items: center;}
#helppage .section h1, .section h2, .section h3, .section h4, .section h5, .section h6 {margin: 0;overflow-wrap: anywhere;}
#helppage .section .spacer {flex-grow: 1;}
#helppage .section {margin: 1em 0;}
#helppage .section > a {margin: auto 0;overflow-wrap: anywhere;text-align: right;}
#helppage h1 {font-size: 3em;margin: .7em 0 .5em;color: var(--helppage-h1);}
#helppage h2 {font-size: 2em;margin: .7em 0;color: var(--helppage-h2);}
#helppage h3 {font-size: 1.5em;margin: .7em 0;color: var(--helppage-h3);}
#helppage h4 {font-size: 1.25em;margin: .7em 0;}
#helppage h5, #helppage h6 {font-size: 1;margin: .7em 0;}
#helppage .setting-status {display: flex;flex-wrap: wrap;}
#helppage .setting-status * {margin: 0 .5em;overflow-wrap: anywhere;max-width: calc(100vw - 3em);}
#helppage .map-status * {display: block;}
#helppage .countable {height: 2em;margin: 0 1em;color: var(--helppage-countable);}
#helppage .command-block {color: var(--code-command);white-space: normal;overflow-wrap: anywhere;background: var(--code-bg);padding: .1em;}
#helppage .url-search {color: var(--url-search);}
#helppage .url-url {color: var(--url-url);}
#helppage .url-searchwords {color: var(--url-searchwords);}
#helppage .url-suggest {color: var(--url-suggest);}
#helppage .url-file {color: var(--url-file);}
#helppage .follow-url {background: var(--follow-url-bg);color: var(--follow-text);}
#helppage .follow-inputs-click {background: var(--follow-click-bg);color: var(--follow-text);}
#helppage .follow-inputs-insert {background: var(--follow-insert-bg);color: var(--follow-text);}
#helppage .follow-onclick {background: var(--follow-onclick-bg);color: var(--follow-text);}
#helppage .follow-other {background: var(--follow-other-bg);color: var(--follow-text);}
#helppage .example-buttons {margin: 1em;}
#helppage .example-buttons button {font-size: 1em;margin: .5em 2em;padding: .5em 2em;background: transparent;cursor: pointer;}
#helppage .nowrap, #helppage .nowrap.command-block {white-space: nowrap;}
/* history */
#historypage #list {display: inline;}
#historypage #no-results {margin-bottom: 1em;}
#historypage #breakpoints {display: flex;flex-direction: column;}
#historypage .hist-entry {background: var(--special-page-element-bg);margin: .7em 0;padding: .35em;border: .1em solid var(--special-page-element-border);}
#historypage .hist-entry .hist-date {width: auto;color: var(--notification-date);margin-right: 1em;}
#historypage .hist-entry span {display: inline-block;width: calc(100% - 16em);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#historypage .hist-entry a {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;}
#historypage img {height: 1.5em;float: right;margin: .35em .9em;cursor: pointer;}
#historypage .hist-entry img {height: 1em;margin: .1em;}
#historypage .hist-entry .favicon {float: none;margin: 0 .3em .1em 0;cursor: auto;}
#historypage .hist-entry.marked {background: var(--special-page-element-border);}
/* newtab */
#newtabpage {display: none;flex-direction: column;height: 100vh;}
#newtabpage main {margin: auto;max-width: 80vw;min-width: 450px;}
#newtabpage img {height: 2em;width: 2em;min-height: 2em;min-width: 2em;margin: 0 .5em 0 0;}
#newtabpage a {display: flex;padding: .5em;font-size: 1.4em;text-decoration: none;max-width: 80vw;align-items: center;}
#newtabpage a div {display: flex;flex-direction: column;}
#newtabpage a div, a div * {overflow: hidden;white-space: wrap;text-overflow: ellipsis;}
#newtabpage main > div {display: flex;flex-wrap: wrap;overflow: hidden;}
#newtabpage p {text-align: center;}
#favorites, #topsites {margin: 1em 0;display: none;max-width: 80vw;min-width: 40em;width: auto;flex-grow: 1;flex-basis: 50%;}
#newtabpage small {font-size: .7em;text-decoration: underline;}
/* notifications */
#notificationspage .notification {background: var(--special-page-element-bg);border: .1em solid var(--notification-border);margin: .35em 0;padding: .35em;}
#notificationspage .date {color: var(--notification-date);}
#notificationspage .permission {color: var(--notification-permission);}
#notificationspage .error {color: var(--notification-error);}
#notificationspage .warning {color: var(--notification-warning);}
#notificationspage .info {color: var(--notification-info);}
#notificationspage .success {color: var(--notification-success);}
#notificationspage .filelocation {cursor: pointer;}
/* version */
#versionpage {display: flex;width: 80vw;min-width: 450px;height: 100vh;text-align: center;}
#versionpage #title {font-size: 2.5em;}
#versionpage #subtitle {font-size: 1.5em;}
#versionpage .header {display: flex;flex-direction: column;margin: auto;}
#versionpage .header > img {width: 30vmin;height: 30vmin;margin: auto;}
#versionpage .info {width: 40em;min-width: 450px;max-width: 80vw;}
#versionpage #update-check {margin: .7em;}


/*
 * POPUPS
*/
.popup {box-sizing: border-box;height: 100vh;width: 100vw;overflow: hidden;user-select: none;background: var(--bg);color: var(--fg);border: .1em solid var(--notification-border);}
/* login */
#loginpopup {padding: 1em;}
#loginpopup * {pointer-events: none;}
#loginpopup p {word-wrap: break-word;overflow: hidden;}
/* notification */
#notificationpopup #notification {padding: 1em;height: calc(100% - 4.1em);overflow-wrap: break-word;overflow-x: hidden;overflow-y: auto;line-height: 1em;user-select: text;}
#notificationpopup footer {font-size: 1em;line-height: 2em;height: 2em;position: fixed;left: 0;bottom: 0; width: 100vw;border: .1em solid var(--notification-border);}p