body { margin: 0; padding: 0; background-color: #181818; overflow-x: hidden; } #header { background-color: #242424; } #login { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; flex-direction: column; margin: 0; padding: 0; } #error .logo { font-size: 100px; } .desc { font-size: 40px; } input { flex: 0; background-color: #242424; color: white; border: 1px solid #606770; } input:focus { outline: none; } #admin { margin: 1.75em; margin-top: 5em; width: calc(100% - 1.75em * 2); height: calc(100% - 5em - 1.75em); display: flex; flex-direction: column; } #queryinput { display: flex; width: calc(100% - 2em); justify-content: space-between; flex-direction: row; margin: 1em; } #queryinput #query { width: 50em; margin: 0; flex: 10; } form { width: 100%; display: flex; justify-content: center; align-content: center; } #buttons .submit, .view { all: unset; font-family: sfpro; margin: 0; padding: 10px 30px; background-color: #242424; border-radius: 5px; font-size: 18px; margin-left: 2em; cursor: pointer; border: 1px solid #30ab5a; color: #30ab5a; } #buttons .submit:active { background-color: #181818; } #buttons .view { background-color: #242424; color: #707882; border: 1px solid #606770; } #buttons .view:active { background-color: #181818; } table { margin: 1em 0em; border-collapse: separate; border-spacing: 15px; table-layout: fixed; width: 100%; } th, td { font-family: sfpro; color: white; padding: 20px; border-radius: 10px; background-color: #242424; border-radius: 10px; word-wrap: break-word; } th { font-family: sfprobold; } .value { color: white; } .bool { color: aqua; } .null { color: blue; } .number { color: yellow; } .string { color: #4ae04a } .key .string { color: white; }