Chemically-motivated/PythonCodeAssistantProject

1/* Base Styles */2:root {3    --primary-color: #3572A5;4    --secondary-color: #FFD43B;5    --background-color: #f5f5f5;6    --text-color: #282c34;7}8 9[data-theme="dark"] {10    --primary-color: #FFD43B;11    --secondary-color: #3572A5;12    --background-color: #282c34;13    --text-color: #f5f5f5;14}15 16* {17    box-sizing: border-box;18    padding: 0;19    margin: 0;20    font-family: sans-serif;21}22 23html, body {24    height: 100%;25    width: 100%;26}27 28body {29    background-color: var(--background-color);30    color: var(--text-color);31    padding: 16px;32    display: flex;33    flex-direction: column;34    align-items: center;35    justify-content: flex-start;36    transition: background-color 0.3s, color 0.3s;37}38 39#container {40    width: 100%;41    max-width: 640px;42    margin: 1rem;43    border: 2px dashed var(--primary-color);44    border-radius: 0.75rem;45    padding: 16px;46    background-color: var(--secondary-color);47    color: var(--text-color);48    text-align: center;49    transition: background-color 0.3s, border-color 0.3s;50}51 52textarea {53    width: 100%;54    height: 180px;55    padding: 10px;56    margin: 10px 0;57    border: 1px solid var(--primary-color);58    border-radius: 5px;59    background-color: #ffffff;60    font-family: 'Courier New', Courier, monospace;61    font-size: 16px;62    resize: vertical;63}64 65button {66    padding: 10px 20px;67    background-color: var(--primary-color);68    color: var(--text-color);69    border: none;70    border-radius: 5px;71    cursor: pointer;72    font-size: 16px;73    transition: background-color 0.3s;74}75 76button:hover {77    background-color: var(--secondary-color);78    color: var(--primary-color);79}80 81#results {82    width: 100%;83    max-width: 640px;84    background-color: #f0f0f0;85    border: 1px solid #ddd;86    border-radius: 5px;87    padding: 10px;88    margin-top: 10px;89    overflow: auto;90    color: #333;91}92 93/* Toggle for Light/Dark Mode */94#toggle-theme {95    margin: 10px;96    cursor: pointer;97    color: var(--primary-color);98}99 100/* Responsive Design */101@media (max-width: 768px) {102    body {103        padding: 8px;104    }105 106    #container, #results {107        width: 100%;108        padding: 12px;109        font-size: 16px;110    }111 112    textarea {113        height: 120px;114    }115 116    button {117        width: 100%;118    }119}120