* {
  box-sizing: border-box;
}

body {
  background-color: rgb(47, 45, 44);
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
  font-weight: 500;
}

button {
  background-color: rgb(82, 79, 76);
}

input[type="text"],
input[type="number"],
input[type="color"] {
  background-color: rgb(65, 62, 60);
  font-size: 20px;
}

input[type="text"],
input[type="number"],
input[type="color"],
button {
  border: none;
  border-radius: 5px;
  color: white;
  width: 49%;
  height: 48px;
  padding: 5px;
}

input[type="text"],
input[type="color"],
button {
  display: block;
}

button {
  margin: 5px 0;
}

button:hover, button:focus {
  background-color: rgb(99, 95, 91);
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

.terminal {
  background-color: rgb(65, 62, 60);
  border: none;
  color: white;
  display: block;
  font-size: 16px;
  margin: 0;
  padding: 5px;
  position: absolute;
  overflow-x: hidden;
  z-index: 1;
}

input:focus,
.terminal:focus {
  outline: none;
  border-bottom: solid 5px rgb(246, 165, 58);
}

textarea#history {
  height: 100%;
  right: 0;
  top: 0;
  width: 50%;
  word-break: break-all;
}

.button-input {
  /* display: inline-block; */
  display: none;
}

.button-input > button {
  width: 50em;
  display: inline-block;
}

.button-input > input {
  width: auto;
  padding: 5px;
}

.danger {
  background-color: rgb(145, 68, 68);
}

.danger:hover, .danger:focus {
  background-color: rgb(202, 64, 64);
}

@media only screen and (max-width: 1000px) {

  input[type="text"],
  input[type="color"],
  button {
    width: 100%;
  }
  
  .terminal {
    border-radius: 5px;
  }

  textarea#history {
    height: 15rem;
    top: 5px;
    position: relative;
    width: 100%;
    max-width: 100%;
  }
}