html, body{ margin: 0px; padding: 0px; background-color: #2b2c2e; display: flex; align-items: center; justify-content: center; overflow: hidden; } #canvas{ max-height: 100vh; max-width: 100vw; } #phoneContainer.hidden{ position: absolute; right: 20px; top: 100%; } #phoneContainer.visible{ position: absolute; right: 20px; bottom: 5%; } #phoneDiv{ position: relative; } #phone{ width: 200px; } #phoneScreen{ background-color: #322b2a; position: absolute; left: 7%; top: 12%; right: 7%; bottom: 13%; } #chatHeader{ height: 10%; width: 100%; border-bottom: 1px solid black; text-align: center; color: white; line-height: 7%; padding: 0px; overflow: hidden; font-weight: bold; background-color: #232120 ; } #chatHeader > p{ line-height: 10%; } #chatMessages{ height: 80%; width: 100%; overflow: scroll; } #chatInputDiv{ height: 10%; width: 100%; text-align: center; } #chatInput{ width: 90%; box-sizing: border-box; appearance: none; background-color: transparent; border-radius: 10px; border: 1px solid black; color: white; padding-left: 10px; height: 85%; margin-bottom: 15%; outline: none; } .message{ color: white; font-family: sans-serif; margin: 3%; } .messageTitle{ font-size: 75%; margin: 0px; } .messageContent{ margin: 0px; font-size: 60%; }