Changed around line 1
+ :root {
+ --bg-color: #000;
+ --text-color: #00ff00;
+ --border-color: #00ff00;
+ --button-bg: #333;
+ --button-hover: #555;
+ }
+
+ body {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ font-family: 'Courier New', Courier, monospace;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ }
+
+ .dos-container {
+ width: 90%;
+ max-width: 800px;
+ border: 2px solid var(--border-color);
+ padding: 20px;
+ box-shadow: 0 0 10px var(--border-color);
+ }
+
+ .dos-header {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ .notes-section {
+ margin-bottom: 20px;
+ }
+
+ .dos-textarea {
+ width: 100%;
+ height: 300px;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ border: 1px solid var(--border-color);
+ padding: 10px;
+ font-family: 'Courier New', Courier, monospace;
+ font-size: 16px;
+ resize: none;
+ }
+
+ .dos-footer {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .dos-button {
+ background-color: var(--button-bg);
+ color: var(--text-color);
+ border: 1px solid var(--border-color);
+ padding: 10px 20px;
+ cursor: pointer;
+ font-family: 'Courier New', Courier, monospace;
+ font-size: 16px;
+ }
+
+ .dos-button:hover {
+ background-color: var(--button-hover);
+ }
+
+ @media (max-width: 600px) {
+ .dos-container {
+ width: 100%;
+ padding: 10px;
+ }
+
+ .dos-textarea {
+ height: 200px;
+ }
+ }