:root { font-size: 2.5rem; --font-family: "Berkeley Mono", "Fira Code", monospace; } body { margin: 0; } h1 { margin: 0; font-variant: small-caps; } #top { color: #bfbdb6; background-color: #222222; height: 4em; display:flex; align-items: center; justify-content: center; flex-flow: column; } #top a { font-size: .8em; } #top a:visited { color: #bfbdb6; } #content { display: grid; grid-template-areas: "input" "output" "query"; gap: 1em; grid-template-rows: 1fr 1fr auto; padding: 1em; height: 90vh; } @media only screen and (min-width: 1000px) { /* For Desktops */ :root { font-size: 1.2rem; } #content { grid-template-areas: "query query query query" "input input output output"; grid-template-rows: auto 1fr; } #top { flex-flow: row; } #top a { position: absolute; right: 2em; } } textarea { font-family: var(--font-family); font-size: inherit; border: none; border-radius: .3em; padding: .5em; background: #e8e8e8; resize: none; } #content label { font-family: var(--font-family); font-size: 1.3em; font-weight: bold; height: 1.5em; } #query { grid-area: query; display: grid; grid-template-areas: "label" "filter" "options"; } #filter-label { grid-area: label; font-weight: 400; } #filter { grid-area: filter; height: 2em; font-size: 1.1em; font-family: var(--font-family); background: #e8e8e8; border: none; border-radius: .3em; padding-left: .5em; } #options { grid-area: options; list-style-type: none; display: flex; font-weight: bold; margin: 0; padding: 0; padding-left: .5em; flex-direction: column; } #options li { margin-top: auto; margin-bottom: auto; margin-left: 1em; font-size: .7em; font-weight: normal; } input[type=checkbox] { transform: scale(2.5); height: 2.5em; margin-right: 1em; } @media only screen and (min-width: 1000px) { /* For Desktops */ input[type=checkbox] { transform: scale(1.3); height: 1em; margin-right: .1em; } #options { flex-direction: row; } } #input { grid-area: input; display: grid; grid-template-areas: "input-label" "input-json"; grid-template-rows: auto 1fr; } #input-label { grid-area: input-label; } #input-json { grid-area: input-json; } #output { grid-area: output; display: grid; grid-template-areas: "output-label" "output-json"; grid-template-rows: auto 1fr; } #output-label { grid-area: output-label; } #output-json { grid-area: output-json; }