body.dark{background-color:#333}body.light{background-color:#f0f0f0}.app{text-align:center;justify-content:center}.light{background-color:#f0f0f0;color:#333}.dark{background-color:#333;color:#f0f0f0}.dark-mode-btn{margin-bottom:12px;padding:8px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.dark-mode-btn:hover{background-color:#0056b3}p.story-body{margin:0}.story-div{display:flex;justify-content:center}p.story-content{margin:0;max-width:400px;text-align:justify}p.story-header{margin:0}.dark div.story-container{background-color:#747474;margin:0 auto;border-radius:2em;padding:2em;width:50%}.light div.story-container{background-color:#e1e1e1;margin:0 auto;border-radius:2em;padding:2em;width:50%}.user-form{display:flex;flex-direction:column;max-width:400px;margin:0 auto;padding:20px;border-radius:8px}.light.user-form{background-color:#f0f0f0;color:#333}.dark.user-form{background-color:#333;color:#f0f0f0}.user-form label{font-weight:700;margin-top:12px}.user-form input,.user-form select{width:100%;padding:6px;margin-top:4px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}.dark.user-form input,.dark.user-form select{background-color:#444;color:#f0f0f0;border-color:#999}.user-form button{margin-top:12px;padding:8px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.user-form button:hover{background-color:#0056b3}.error{color:red}