* { font-family: Verdana; font-size: 16px; color: #abb2bf; margin: .5em; padding: 0; } html { margin: 0; padding: 0; height: 100% } body { background-color: #282c34; display: flex; justify-content: space-between; flex-wrap: nowrap; flex-direction: column; height: 100%; margin: 0; padding: 0; } a { text-decoration: none; color: #61afef; margin: 0; } svg, img { vertical-align: middle; width: 1em; height: 1em; margin: 0; padding: 0; } header, footer { flex-grow: 0; background-color: #353b45; padding: .5em; margin: 0; display: flex; justify-content: space-between; align-items: center; } header > span { margin: 0; } header > span > img { width: 1.5em; height: 1.5em; } main { flex-grow: 1; } header { border-bottom: 1px solid #3e4451; } footer { border-top: 1px solid #3e4451; font-size: 75%; } h1 { margin-top: 1em; font-size: 150%; } table { border-collapse: collapse; width: 100%; margin: 0; } tr:hover { background-color: #353b45; } th, td { border: 1px solid #3e4451; padding: 0.5em; } td:nth-child(2) { width: 5em; text-align: right; } td:nth-child(3) { width: 6em; text-align: right; } th { background-color: #353b45; } form { width: calc(100% - 1em); } form > input { width: calc(100% - 2em); padding: .5em; } button { padding: .5em; margin: 0; } pre { margin: 0; font-family: monospace; } input[type="file"] { display: none; } .right { float: right; color: #545862; } label { border-radius: 0.25em; background-color: #61afef; margin: 0; padding: .5em; cursor: pointer; color: #fff; text-shadow: 1px 1px 1px #000; }