@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;
}

.debug p {
    text-align: center;
}

.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 {
    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);
}