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

@font-face {
    font-family: "Courier Prime";
    src: url("../shared/CourierPrime-Regular.ttf") format("truetype");
}


body { background-color: #111; }
body, pre, button, textarea, input {
    font-family: "Font", monospace; 	
}

#ui { width: fit-content; margin: auto; }

input, textarea {
    background-color: #222;
    color:#fff;
}

textarea {
    overflow:hidden;
    line-height:1;
    margin: auto;
    display:block;
}

#itch {
    background: #555;
    border: 3px solid #000;
    padding: .5em;
    width: fit-content;
    margin: auto;
}

.editor p {
    text-align:center;
}

.editor button {
    padding: .5ch;
    margin: .25ch;
}

details {
    color:#ddd;
    background: #111;
    border: .2ch solid #222;
    max-width:90%;
    width: fit-content;
    margin:auto;
    padding: .3ch;
}

summary {
    background: #222;
    padding: .2ch;
}

button {
    border-radius: 0px;
    border: 2px #444 solid;
    color: #ddd;
    background-color: #333;
    line-height: 1;
}
button:disabled, button.inactive {
    opacity:50%;
}

.controls, .main {
    touch-action: manipulation;
}

#controls button, #history button {
    font-size:30px;
    padding: .1ch;
    margin: 0px;
}
#controls {
    margin-left: auto;
    margin-right: auto;
}

#arrows button {
    font-size: 42px;
}

#arrows, #specials, #extra {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50% 50%;
    place-items: center;
    gap: .5ch;
}

#slots { max-width: 15em;}
#slots {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    clear: left;
    gap: .25ch;
    padding-top: .5ch;
}
#slots button {
    text-align:center;
}

#arrows button:nth-child(1) {
    grid-column: 2 / span 1;
}
#arrows button:nth-child(2), #arrows button:nth-child(3), #arrows button:nth-child(4) {
    grid-row: 2 / span 1;
}
#specials button:nth-child(1), #specials button:nth-child(2), #specials button:nth-child(3) {
    grid-row: 1 / span 1;
}
#specials button:nth-child(4) {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
}

#main {
    margin-left: auto;
    margin-right: auto;
    width:fit-content;
    border: 2px solid #333;
    margin-bottom: -2px;
    font-size: 20px;
}

#main p {
	margin-left: 0;
}

.text {
    font-family: "Courier Prime";
    letter-spacing: 1px;
}

#revisions {
    background: #222;
    border: 2px solid #222;
    margin: -2px;
    margin-top: 1ch;
}

#revisions button {
    background: #222;
    border-color: #666;
    font-size: 1.5em;
    padding:0;
    margin:-.2px;
    margin-right: calc(.5em - 2px);
}

#revisions #reset {
    margin-left: calc(1em - 2px);
}

#revisions #eject {
    float: right;
    margin-right:0;
    margin-left: calc(.5em - 2px);
}

#log .ticklog {
    font-family: "Courier Prime";
    padding: 0;
    line-height: 1em;
    height: 50vh;
    overflow: scroll;
}

#log .step, #log .xy { background: #222; }
#log .step:hover, #log .xy:hover { background: #444; }
#log .tick:not([hidden]) {
    display: grid;
    grid-template-columns: 8em 7em 10em 15em;
}
.tick .details {
    grid-row: 2;
    grid-column: span 4;
    background: revert;
    margin-bottom: .5em;
    white-space: normal;
}
#log .tick span {
    overflow: scroll;
    white-space: nowrap;
}
#log .step {
    border-bottom: 1px solid #444;
    margin-top: 1em;
}
.target.forThing:hover {
    margin: -2px;
    border: 2px solid #557;
    background: #112;
}
.icon {
    text-align: justify;
    font-family: "Font";
    background: var(--boardbg);
    color: var(--boardfg);
    border: 1px solid black;
}
.icon .thing { margin:0; position: relative;}