To make the chat interface look like a CRT monitor, several CSS styles have been added or modified: 1. Font: - The 'VT323' font from Google Fonts is used to give the text a retro, monospace look reminiscent of old CRT monitors. - The `@font-face` rule is used to import the font and apply it to the `body` and input elements. 2. Colors: - The `--text-color` variable is changed to a bright green (`#33ff33`) to mimic the phosphor green color commonly seen on CRT monitors. - The `--crt-bg` variable is introduced to set a darker background color for the CRT effect. 3. CRT effect: - The `#chatbot-container` is given a `border` with the `--text-color` to create a pronounced frame around the chat window. - The `border-radius` is increased to create rounded corners, resembling the curved screen of a CRT monitor. - The `background-color` of the `#chatbot-container` is set to `--crt-bg` to provide a dark backdrop for the CRT effect. - A `box-shadow` with `inset` is applied to the `#chatbot-container` to create a subtle glow effect around the edges. - A pseudo-element (`:before`) is added to the `#chatbot-container` to create scanlines and a subtle gradient overlay, simulating the appearance of a CRT screen. 4. Message styling: - The `.user-message` and `.bot-message` selectors are updated to remove the background color and border-radius, allowing the messages to blend into the CRT background. - The `line-height` and `white-space` properties are adjusted to improve readability and allow messages to wrap properly. 5. Input and button styling: - The `#user-input` and `#chat-form button` elements are given the 'VT323' font and a larger `font-size` to match the retro style. - The `background-color` of the input and button is set to `--crt-bg` to maintain consistency with the CRT look. - The button is given a left border with the `--text-color` to visually separate it from the input field. These modifications create a chat interface that resembles an old CRT monitor, with a dark background, bright green text, scanlines, and a glowing effect around the edges.