html,
body {
    --ui-width: 23em;
    --bg-color: hsl(255, 0%, 5%);
    --label-color: hsl(255, 0%, 15%);
    --input-color: hsl(255, 0%, 25%);
    --button-color: hsl(255, 0%, 35%);
    --hover-color: hsl(255, 0%, 55%);
    --off-color: hsl(255, 0%, 68%);
    --on-color: hsl(255, 0%, 50%);
    --hover-color: hsla(255, 0%, 80%);
    --color: hsl(255, 0%, 89%);
    --main-color: hsl(255, 0%, 100%);
    --main-border-color:  hsla(255, 0%, 100%);
    --grid-color1: 30%;
    --grid-color2: 20%;

    --slidera-color: hsl(255, 0%, 23%);
    --sliderb-color: hsl(255, 0%, 27%);
    --sliderc-color: hsl(255, 0%, 59%);

    --grid-color-o: hsl(255, 0%, 75%);
    --grid-color-s: hsl(255, 0%, 90%);

    background-color: var(--bg-color);
    color: var(--color);
    pointer-events: none;
    margin: 0;
    padding: 0;
    text-align: center;
    height: 100vh;
    width: 100vw;
    font-family: monospace;
}

@font-face {
    font-family: "KongText";
    src: url(kongtext.ttf) format("truetype");
}

.initTile {
    width: var(--ui-width);
}

.tile.introTile {
    position: absolute;
    width:  30em;
    top: 25%;
    left: 50%;
    margin-left: -15em;
    z-index: 100;
    border: 0.3em solid var(--bg-color);
    pointer-events: auto;
}

.t1 {
    text-align: center;
}

body.introMode .mainFrame {
    pointer-events: none;
}

body.introMode .center,
body.introMode .mainFrame .tile:not(.initTile):not(.terraLoadTile) {
    filter: brightness(0.23);
}

.introTile .fl>* {
    flex: 1;
}



.tileLabel {
    background-color: var(--bg-color) !important;
    padding: 0;
    margin: 0.5em;
    margin-bottom: 0;
    cursor: hand;
    user-select: none;
    display: flex;
    text-decoration: none !important;
}

.tileLabel>div {
    flex: 1;
    padding: 0.7em;
    color: var(--on-color);
    font-family: "KongText", monospace !important;
    font-size: 9px !important;
    text-shadow: none !important;
}

.authorizeAddress {
    font-size: .8em !important;
}

.centerInner {
    width: 100%;
    aspect-ratio: .69/1;
    position: relative;
}

.centerOuter {
    height: 100%;
    max-width: 100%;
    aspect-ratio: .69/1;
    position: relative;
}

svg,
.svgWrapper {
    position: relative;
    /*height: 100%;*/
    width: 100%;
    aspect-ratio: .69/1;
}


.baseImg {
    position: absolute;
    z-index: 19;
    top: 0;
    left: 0;
    display: none;
}

.baseCanvas {
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
}

.cropMask {
    position: absolute;
    z-index: 21;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none !important;
}

.resultCanvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: inherit;
    z-index: 22;
    opacity: 0;
    cursor: crosshair;
}

.mainFrame {
    display: flex;
    flex-direction: row;
    align-items: top;
    position: relative;
    width: 100vw;
    height: 100vh;
    pointer-events: auto;
}

/*.terraformMode .terraformOptions {
    height: auto;
    visibility: visible;

}*/


.mainFrame.initMode,
.mainFrame.loadingMode,
.mainFrame.buildingMode,
.mainFrame.renderingMode {
    pointer-events: none;
}

.renderingMode .cancel {
    pointer-events: auto !important;
}

.current,
.square,
.portrait {
    margin-right: 0 !important;
}

.terrain,
.portrait,
.landscape {
    margin-left: 0 !important;
}

.rightClickTile {
    background-color: var(--bg-color) !important;
    pointer-events: none;
    user-select: none;
}

body:not(.introMode) .introTile,
.commitMode .editGrid,
.mode0 .authorize,
.mode0 .commitDream,
.mode0 .commitDream,
.mode1 .enterDream,
.mode2 .commitDream,
.mode3 .enterDream,
.mode4 .commitDream,
.mode0 .terrain,
.mode3 .terrain,
.mode4 .terrain
 {
    display: none !important;
}

.mainFrame.authorizeMode .authorizeInfo,
.mainFrame.enterDreamMode.mode0 .enterDreamInfoTerrain,
.mainFrame.enterDreamMode.mode4 .enterDreamOriginInfo,
.mainFrame.enterDreamMode.mode2 .enterDreamInfo,
.mainFrame.commitDreamMode.mode3 .commitDreamOriginInfo,
.mainFrame.commitDreamMode:not(.mode3) .commitDreamInfo {
    display: block !important;
}

.commitTile .fl:not(.genInfo):not(.functions) {
    display: none
}

.mainFrame.authorizedMode.notMineMode.mode0 .commitTile,
.mainFrame.authorizedMode.notMineMode.mode0 .commit,
.mainFrame.authorizedMode.notMineMode.mode2 .commitTile,
.mainFrame.authorizedMode.notMineMode.mode2 .commit,
.mainFrame.authorizedMode.notMineMode.mode4 .commitTile,
.mainFrame.authorizedMode.notMineMode.mode4 .commit,
.mainFrame.authorizedMode .commitTile .togBox:not(.commitDream),
.mainFrame:not(.renderMode) .renderTile,
.mainFrame:not(.mineMode) .mineTile,
.mainFrame:not(.tokenMode) .tokenTile,
.mainFrame:not(.commitMode) .commitTile,
.mainFrame:not(.hasImage) .imgTile *:not(.chooseImage),
.mainFrame:not(.showImage) .imgLayer,
.mainFrame:not(.hasImage) .imgLayer,
.mainFrame:not(.showImage) .imgTile,
.mainFrame:not(.showImage):not(.hasImage) .imgTile *:not(.chooseImage),
.mainFrame.hasImage:not(.showImage) .imgButton,
.mainFrame:not(.viewMode) .cropMask,
.mainFrame:not(.viewMode) .viewTile,
.noWalletMode .commitTile,
.noWalletMode .mineTile,
.noWalletMode .mineTileButton,
.noWalletMode .connectTile,
.noWalletMode .commit,
.notMineMode .commit,
.notMineMode .commitTile,
.notConnectedMode .commitTile,
.notConnectedMode .commit,
.notConnectedMode .mineTile,
.mainFrame:not(.notConnectedMode) .connectTile,
.mainFrame:not(.netWorkError) .netWorkErrorTile {
    display: none !important;
}

.initMode .tileLabel,
.loadingMode .tileLabel,
.buildingMode .tileLabel,
.renderingMode .tileLabel,
.txWaitingMode .tileLabel,
.mainFrame:not(.hasImage) .imgTile *:not(.chooseImage),
.mainFrame:not(.showImage) .imgLayer,
.mainFrame:not(.showImage) .imgTile,
.mainFrame:not(.showImage):not(.hasImage) .imgTile *:not(.chooseImage),
.mainFrame.hasImage:not(.showImage) .imgButton,
.mainFrame:not(.viewMode) .cropMask,
.mainFrame:not(.viewMode) .viewTile,
.noWalletMode .commitTile,
.noWalletMode .mineTile,
.noWalletMode .connectTile,
.noWalletMode .commit,
.notConnectedMode .commitTile,
.notConnectedMode .commit,
.notConnectedMode .mineTile,
.mainFrame:not(.notConnectedMode) .connectTile {
    display: none !important;
}

.mainFrame:not(.terraformMode) .draw,
.mainFrame:not(.initMode) .initTile,
.initMode .tile:not(.initTile),
.mainFrame:not(.txWaitingMode) .txWaitingTile,
.txWaitingMode .tile:not(.txWaitingTile),
.mainFrame:not(.renderingMode) .renderingTile,
.renderingMode .tile:not(.renderingTile),
.mainFrame:not(.buildingMode) .buildingTile,
.buildingMode .tile:not(.buildingTile),
.mainFrame:not(.loadingMode) .terraLoadTile,
.loadingMode .tile:not(.terraLoadTile) {
    height: 0px;
    visibility: hidden;
}

.genInfo {
    font-weight: bold;
}


input {
    box-sizing: border-box;
    border: none;
    background-color: var(--input-color);
}

a {
    color: var(--color);
}

.info,
.infoTitle {
    user-select: none;
    white-space: normal;
}

.infoTitle {
    color: var(--on-color);
}

.stillMode .r p {
    animation: none !important;
} 

.button {
    background-color: var(--button-color);
    padding: 0.2em 0.5em;
    cursor: hand;
    user-select: none;
    text-decoration: none !important;
}

.linksTile {
    white-space: normal !important;
}

.mineIds {
    flex-wrap: wrap;
}

.mineButton {
    display: inline-block;
}

.main {
    font-weight: bold;
    font-size:  1.13em;
    color: var(--main-color);

}

.togBox:not(.tileLabel>div) {
    user-select: none;
    cursor: hand;
    background-color: var(--button-color);
    padding: 0.2em 0.5em;
    box-shadow: inset 0.2em 0.2em var(--input-color);
}

.togBox:hover,
.button:hover,
.input:hover {
    background-color: var(--hover-color) !important;
    color: var(--button-color) !important;
    text-shadow: none !important;

}

.togBox.on:not(.tileLabel>div) {
    box-shadow: inset 0.2em 0.2em var(--on-color);
    color: var(--color);
}

.togBox.off:not(.tileLabel>div) {
    box-shadow: inset 0.2em 0.2em var(--input-color);
    color: var(--off-color);
}

.slider {
    position: relative;
}

.sliderButtons {
    display: flex;
    position: absolute;
    /*top:  0;*/
    left: 0;
    width: 100%;
    /*height: 100%;*/
    /*height: calc(100% + 0.4em);*/
    z-index: 21;
}

.sliderButtons>div {
    flex: 1;
    pointer-events: inherit;
}

.sliderButtons>div:hover {
    background-color: var(--color) !important;
    /*filter: brightness(1.2);*/
}

.sliderButtons>div.active {
    /*background-color: var(--color) !important;*/
    filter: brightness(1.7);
}

.sliderButtons>div.activeEnd {
    background-color: var(--sliderc-color) !important;
    /*filter: brightness(3.0);*/
}

.sliderLabel {
    background-color: none;
    position: relative;
    z-index: 22;
    padding: 0.2em 0.5em;
    pointer-events: none;
}


.sliderButtons:nth-child(even)>div:nth-child(even) {
    background-color: var(--sliderb-color);
}

.sliderButtons:nth-child(even)>div:nth-child(odd) {
    background-color: var(--slidera-color);
}

.sliderButtons:nth-child(odd)>div:nth-child(even) {
    background-color: var(--slidera-color);
}

.sliderButtons:nth-child(odd)>div:nth-child(odd) {
    background-color: var(--sliderb-color);
}


.sense,
.fade,
.duration,
.outW,
.algo,
.seek,
.render {
    flex: 1;
}

.fl {
    display: flex;
    align-items: center;
}

.editTile {
    position: absolute !important;
    left: 0;
    top: 0;
    display: none;
    z-index: 50;
    pointer-events: auto !important;
    border: 0.3em solid var(--bg-color);

}

.imgButton {
    background-color: var(--button-color);
    display: inline-block;
    padding: 0.2em 0.5em;
    cursor: hand;
}

.imgButton:hover {
    background-color: var(--color);
    color: var(--button-color);
    text-shadow: none;

}

.tile {
    background-color: var(--label-color);
    padding: 0.2em;
    margin: 0.5em;
    margin-top: 0;
}

.tile {
    overflow: hidden;
    position: relative;
    pointer-events: inherit;
    box-sizing: border-box;
}

.linksTile {
    display: none;
}

.inputFile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputFile+label {
    display: inline-block;
    margin: 0.2em;
}

/*.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}*/

.input {
    font-family: monospace;
    color: hsla(255, 0%, 85%, var(--text-opacity));
    padding: 0.2em 0.5em;
}

.input:focus {
    outline: none !important;
    background-color: var(--color);
    color: var(--bg-color);

}

.fl>* {
    margin: 0.2em;
}

.quest {
    animation: x 1000ms 0ms linear alternate both infinite;
}

.time {
    white-space: nowrap;
}

.t1 {
    font-weight: bold;
    font-size: 1.89em;
}

.t2 {
    margin-top: -0.8em;
}


.enterDreamMode .enterDream, 
.authorizeMode .authorize, 
.commitDreamMode .commitDream {
    animation: x 1500ms 0ms linear alternate both infinite;
}

.l12 {
    /*animation: x 1500ms 150ms linear alternate both infinite;*/
}

.l13 {
    /*animation: x 1500ms 200ms linear alternate both infinite;*/
}

.l2 {
    /*animation: x 1500ms 250ms linear alternate both infinite;*/
    display: inline-block;
}

.l22 {
    animation: x 1500ms 500ms linear alternate both infinite;
}

.l23 {
    /*animation: x 1500ms 700ms linear alternate both infinite;*/
}

.t2 {
    font-size: 1.2em;
    font-weight: bold;
}

.inline>* {
    display: inline-block;
    white-space: nowrap;
}

.left {
    flex: 1;
    pointer-events: inherit;
}

.char {
    display: inline-block;
}

.heightButtons>div * {
    pointer-events: none;
}

.heightButtons>div {
    pointer-events: auto;
    text-shadow: none !important;
}


.heightButtons.over>div>div {
    /*text-shadow: -1px -1px white, 1px 1px black;*/
}

.right {
    flex: 1;
    text-align: left;
    pointer-events: inherit;
    z-index: 20;
    display: flex;
    flex-direction: row;
    position: relative;
    white-space: nowrap;
}

.menu {
    overflow-y: auto;
    position: relative;
}

.right,
.editTile {
    text-shadow: 0.07em 0.07em 0.07em hsla(255, 0%, 0%, 0.2),
        -0.07em -0.07em 0.07em hsla(255, 0%, 0%, 0.2),
        -0.07em 0.07em 0.07em hsla(255, 0%, 0%, 0.2),
        0.07em -0.07em 0.07em hsla(255, 0%, 0%, 0.2);
}

.lr {
    flex: 0;
}

.rr {
    flex: 1;
}


.center {
    position: relative;
    overflow: hidden;
    pointer-events: inherit;
}

.stillMode .editGrid {
    background: none;
}

.stillMode .rE p {
    box-shadow:  inset 1px 1px hsla(0, 0%, 100%, 20%), inset -1px -1px hsla(0, 0%, 0%, 20%);
    background: none !important;
    color: hsla(0,0%,0%,0%);
}

.stillMode .rE p:hover {
    background: none !important;
    box-shadow:  inset 3px 3px hsla(0, 0%, 100%, 75%), inset -3px -3px hsla(0, 0%, 0%, 75%);
    color: hsla(0,0%,0%,0%) !important;
}

.stillMode .rE p.gridSelected {
    box-shadow:  inset 1px 1px hsla(0, 0%, 0%, 100%), inset 2px 2px hsla(0, 0%, 100%, 100%), inset -1px -1px hsla(0, 0%, 0%, 100%), inset -2px -2px hsla(0, 0%, 100%, 100%);
}

.gridSelected {
    box-shadow: inset 1px 1px var(--grid-color-s), inset -1px -1px var(--grid-color-s);
}

.heightButtons {
    font-family: 'MathcastlesRemix-Regular', monospace;
    font-size: 0.8em;
}

.rE,
.rE p {
    pointer-events: inherit;
    user-select: none;
}

.gutter {
    flex: 1;
}

.rE p:hover {
    background: none !important;
    background-color: var(--grid-color-o) !important;
    color: black;
}

.editGrid {
    position: absolute;
    z-index: 23;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: inherit;
    display: none;
}

.editGrid .rE {
    box-sizing: border-box;
    width: 388px;
    height: 560px;
    padding: 24px;
    font-size: 0.7em;
    font-weight: bold;
    color: var(--color);
    display: grid;
    grid-template-columns: repeat(32, 3%);
    grid-template-rows: repeat(32, 16px);
    grid-gap: 0px;
    justify-content: space-between;

}

.stillMode .editGrid {
    background: none;
}

.editGrid {
    background: black;
}

.meta {
    width: 388px;
    height: 560px;
}

.editGrid p {
    margin: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-45deg, hsl(255, 0%, 20%), hsl(255, 0%, 30%));
    /*box-shadow: 1px 1px 3px black;*/
}