Create simple responsive CSS element

First - take a look at the images attached to this project. The second image shows the chatbox in-game. I want you to create the CSS for adding this chatbox element to my website, and I want it responsive so it fits all screen sizes. The width of the element should be 26% of the screen width and it should fill the entire height of the screen. The current CSS is this: body { margin: 0; padding: 0; background-color: #000; } And the HTML structure for the chatbox is like this: <div class="chat-div"> <div class="chat-well"> <div class="chat-return"> [... chat messages ...] </div> <div class="chatInput-div"> <input type="text" name="chat-message" id="chat-message" class="chatInput" /> </div> </div> </div> (the div with class="chatInput-div" is optional.) You can add as many div as you want to make this work, but keep it as simple as possible. I designed this rather quickly, so please make a simple but better looking design for the chatbox so it fit's the game as good as possible. Furthermore, the input field and scrollbar should be changed a bit so it looks more "pretty" and fits the site better than the standard scrollbar & input field.