html, body {
    height: 100%;
    min-height: 400px;
}

h1 {
    margin: 0;
    font-weight: bold;
}

#title-div h1 {
    text-shadow: 0px 0px 8px rgba(255, 243, 40, 0.6);
}

#container {
    padding-top: 45px;
    height: 100%;
}

#nav, #input-div {
    position: relative;
    float: left;
    width: 100%;
    color: rgb(255, 243, 40);
}

#nav {
    background: rgb(34, 61, 74);
    margin-top: -45px;
    height: 45px;
}

#input-div, #textarea-div {
    background: rgb(55,68,74);
    height: 100%;
    padding: 0;
    margin: 0;
}

textarea#input {
    height: 100%;
    font-family: monospace;
    background: rgb(55,68,74);
    color: rgb(255,243,40);
    border: 1px solid rgb(255,243,40);
}

textarea#input:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255,243,40,.6);
}

textarea#input::placeholder {
    color: rgba(255,243,40,0.4);
}

#title-div, #status-div {
    padding-right: 10px;
    float: left;
}

#title-div, #controls-div {
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

#status-div {
    padding-top: 22px;
}

#controls-div {
    float: right;
}

@media screen and (min-width: 768px) {
    .wide-modal {
        width: 75%;
    }
}