/* style/main.css */
html, body {
  height: 100%;
  margin: 0;
}

body {
  color: #ddd;
  display: grid;
  grid-template: 100% / max-content 1fr;
  background: #070707;
}

body header {
  display: grid;
  grid-template: max-content 1fr / 100%;
  grid-area: 1 / 1 / 2 / 2;
  background: #111;
  padding: 10px;
}

body header h1 a {
  color: #ccc;
  text-decoration: none;
  grid-area: 1 / 1 / 2 / 2;
}

body header nav {
  overflow-y: scroll;
}

body header nav a {
  color: #ccc;
  text-decoration: none;
  display: block;
  grid-area: 2 / 1 / 3 / 2;
  background: #222;
  border-radius: 10px;
  margin: 10px;
  padding: 5px;
  transition: all .3s;
}

body header nav a:hover {
  background: #282828;
}

body main {
  grid-area: 1 / 2 / 2 / 3;
}

body main article {
  display: none;
}

body main article.active {
  display: grid;
  grid-template: max-content 1fr / 100%;
  grid-gap: 10px 10px;
  height: calc(100% - 20px);
  padding: 10px;
}

body main article.active .input {
  grid-area: 1 / 1 / 2 / 2;
}

body main article.active .input textarea {
  color: #fff;
  resize: vertical;
  display: block;
  grid-area: 2 / 1 / 3 / 2;
  background: #222;
  width: calc(100% - 20px);
  max-height: 70vh;
  margin: 10px;
}

body main article.active samp {
  color: #fff;
  word-break: break-all;
  overflow-y: scroll;
  display: block;
  grid-area: 2 / 1 / 3 / 2;
  background: #222;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  margin: 10px;
  padding: 10px;
}

input {
  color: #fff;
  background: #222;
  border: 1px solid #444;
  border-radius: 3px;
}

input.mini {
  width: 50px;
}