@import url("https://cdnjs.cloudflare.com/ajax/libs/gridly/1.4.13/gridly.min.css");

body {
    margin: 0;
    font-family: monospace;
}

h1, p, input, button, textarea {
    font-family: inherit;
}

body, html {
    height: 100%;
}

pre#result {
    border: 1px solid #ccc;
    padding: 12px;
    margin: 0;
    width: 100%;
    white-space: pre-wrap;
}

* {
    box-sizing: border-box;
}

.col {
    padding: 17px;
}

body {
    font-size: 22px;
    color: #17202a;
    background: #f0f3f4;
}

textarea#text-input {
    width: 100%;
}

.controls {
    padding: 17px;
    border-bottom: 2px solid #5499c7;
}

.row {
    background: #fff;
    height: calc(100% - 100px);
}



input#key, textarea {
    font-size: inherit;
    padding: 8px;
    border-radius: 4px;
    border: 2px solid #5499c7;
}

input#key {}

textarea {
    height: 100%;
}