html, body { height: 100%; margin: 0; padding: 0; background-color: #002b36; } #typingCanvas { --padding: 20px; width: calc(100% - 2 * var(--padding)); height: calc(100% - 2 * var(--padding)); border: none; outline: none; /* Removes the default focus outline */ /* background: transparent; /* Makes the textarea background transparent */ background-color: #073642; /* Makes the textarea background transparent */ margin: 0; padding: var(--padding); /* Adds some padding for better text positioning */ resize: none; font-family: "Monaco", sans-serif; font-size: 20px; color: #657b83; /* Darker text color for better contrast */ text-rendering: optimizeLegibility; font-smooth: always; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* Ensuring the cursor is always visible */ #typingCanvas:focus { outline: none; /* Removes the outline to keep the interface clean */ }