style.css

@import url('https://fonts.googleapis.com/css?family=Oswald');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Oswald';
}
#canvas {
display: block;
margin: 0 auto;
background-image: url("img/mars_bg.svg")
}
#console {
width: 550px;
display: flex;
margin: 0 auto;
background-color: #333;
padding: .25rem;
}
#form {
display: flex;
align-items: stretch;
outline: none
}
#input {
color: grey;
outline: none;
padding: 0.25rem;
margin-right: 0.25rem;
border: 0;
}
#submit-button {
color: whitesmoke;
text-align: center;
font-weight: bold;
outline: none;
border: none;
cursor: pointer;
background-color: #FB3B49;
padding: 0.25rem;
}

#submit-button:hover {
background-color: #561519;
}

.input-element {
display: flex;
align-items: center;
background-color: #CADC9F;
color: #0f380f;
flex-grow: 1;
font-size: 2em;
margin-right: 0.25rem;
overflow: hidden;
white-space: nowrap;
}

#stats {
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
max-width: 25px;
min-width: 25px;
}

#stats div {
display: flex;
align-items: center;
line-height: 0.2em;
font-size: 0.3em;
font-weight: bold;
flex-grow: 1;
border: 1px solid grey;
}

#control-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
margin-right: 0.25rem;
max-width: 50px;
color: whitesmoke;
font-size: 0.7em;
}

input,textarea{
width:100%;
}

.display-grid-wrap{
display: flex;
align-items: center;
}

#rock-number {
outline: none
}

.red-background{
background-color: #D92100;
}