style.css

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
}

.toolbar {
   padding: 10px;
   background-color: #f0f0f0;
   border-bottom: 1px solid #ccc;
   -webkit-user-select: none;
   -webkit-app-region: drag;
}

button {
   margin-right: 10px;
   padding: 10px;
   font-size: 14px;
   cursor: pointer;
   -webkit-app-region: no-drag;
}

button:hover {
   background-color: #ddd;
}

.container {
   display: flex;
   /* Use flexbox for a side-by-side layout */
   height: calc(100vh - 50px);
   /* Full height minus toolbar */
}

#markdown {
   width: 50%;
   padding: 10px;
   border: 1px solid #ccc;
   height: 100%;
   resize: none;
}

#preview {
   width: 50%;
   padding: 10px;
   border: 1px solid #ccc;
   background-color: #f9f9f9;
   height: 100%;
}

/* Dark theme styles */
body.dark {
   background-color: #2e2e2e;
   color: #ffffff;
}

body.dark textarea,
body.dark #preview {
   background-color: #3e3e3e;
   color: #ffffff;
   border: 1px solid #555;
}