@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");


body {
    font-family: "Poppins", sans-serif;
    background-color: #e9ecef;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "navbar"
    "main"
    "footer";
    height: 100vh;
}

nav {
    min-height: 80px;
    max-height: 80px;
    top: 0px;
    position: sticky;
    grid-area: navbar;
    display: flex;
    background-color: #4d904d;
    color: white;
    padding: 20px;
    align-items: center;
    justify-content: end;
    z-index: 1000;
}

#logo {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    margin-right: auto;
}

#nav_links {
    color: white;
}

main {
    grid-area: main;
    padding: 10px;
    border-radius: 5px;
    background-color: #e9ecef;
}

section {
    margin:10px 0;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px #545454;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    width: 100%;
    max-width: 1200px;
    height: 650px;
    margin: 1rem auto 0;
    display: flex;
    gap: 1rem;
    justify-content: start;
    align-items: start;
    padding: 1rem;
}

.editor {
    width: 100%;
    max-width: 100%;
    height: calc(700px - 13rem);
}

.output {
    height: calc(700px - 6.9rem);
    transition: all 20ms ease;
    width: 0%;
    max-width: 0%;
    padding: 1rem;
    overflow: auto; /* Add this line */
}

.output.active {
    width: 100%;
    max-width: 100%;
    border: 1px solid #ccc;
}

.button-container {
    display: flex;
    gap: 1rem; /* Uniform spacing between buttons */
    justify-content: center; /* Center the buttons horizontally */
    margin-top: 1rem; /* Add spacing above the container */
}

.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: medium;
}

.btn_toggle {
    padding: .5rem 1rem;
    color: white;
    border: none;
    border-radius: 2rem;
    cursor: pointer;
}
.preview-button {
    background-color: #0275d8;
    color: white;
}
.copy-button {
    background-color: #4d904d;
    color: white;
}

.copy-button:hover {
    background-color: #3c763c;
}

.clear-button {
    background-color: #d9534f;
    color: white;
}

.clear-button:hover {
    background-color: #c9302c;
}

.btn:hover {
    opacity: 0.9; /* Slight hover effect for all buttons */
}

.output img {
    width: 100%;
}

footer {
    bottom: 0;
    grid-area: footer;
    text-align: center;
    font-size: 0.9em;
    padding: 20px;
    background-color: #4d904d;
    color: white;
}

footer a {
    color: #59ff67;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.code-block {
  font-family: monospace;
  background: #f4f4f4;
  color: #4d904d;
  padding: 2px 6px;
  border-radius: 3px;
}

body.dark {
  background-color: #262626;
  color: #e0e0e0;
}

body.dark nav,
body.dark footer {
  background-color: #4d904d;
  color: #e0e0e0;
}

body.dark main {
  background-color: #262626;
}

body.dark section {
  background-color: #363636;
  color: #e0e0e0;
  box-shadow: 0 2px 5px #2d2d2d;
}

body.dark .output,
body.dark .editor {
  background-color: #363636;
  color: #e0e0e0;
  border-color: #444;
}

/* body.dark .btn {
  background-color: #444 !important;
  color: #e0e0e0 !important;
} */

body.dark .btn_toggle {
  background-color: #444 !important;
  color: #e0e0e0 !important;
}

body.dark .copy-button {
  background-color: #4d904d !important;
}

body.dark .code-block {
  background: #222627;
  color: #59ff67;
}

body.dark .ql-toolbar.ql-snow {
  background: #23272a;
  border-color: #444;
}
body.dark .ql-toolbar.ql-snow .ql-picker-label,
body.dark .ql-toolbar.ql-snow .ql-picker-item,
body.dark .ql-toolbar.ql-snow button {
  color: #e0e0e0;
}
body.dark .ql-toolbar.ql-snow .ql-picker-label,
body.dark .ql-toolbar.ql-snow .ql-picker-item {
  background: #23272a;
}
body.dark .ql-toolbar.ql-snow .ql-picker-options {
  background: #23272a;
  color: #e0e0e0;
  border-color: #444;
}
body.dark .ql-toolbar.ql-snow button:hover,
body.dark .ql-toolbar.ql-snow button.ql-active {
  color: #59ff67;
}
body.dark .ql-container.ql-snow {
  background: #363636;
  border-color: #444;
}
body.dark .ql-editor {
  background: #363636;
  color: #e0e0e0;
}
body.dark .ql-editor a {
  color: #59ff67;
}
body.dark .ql-snow .ql-stroke {
  stroke: #e0e0e0;
}
body.dark .ql-snow .ql-fill {
  fill: #e0e0e0;
}
body.dark .ql-snow .ql-picker {
  color: #e0e0e0;
}

a,
.output a,
main a {
  color: #0eb51b;
  text-decoration: underline;
}

a:hover,
.output a:hover,
main a:hover {
  color: #014409;
}

/* Dark mode: override link color */
body.dark a,
body.dark .output a,
body.dark main a {
  color: #59ff67;
}

body.dark a:hover,
body.dark .output a:hover,
body.dark main a:hover {
  color: #3ad14b;
}

.toggle-switch {
  display: flex;
  align-items: center;
  height: 40px;
}
.toggle-switch input[type="checkbox"] {
  display: none;
}
.toggle-switch label {
  cursor: pointer;
  width: 60px;
  height: 30px;
  background: #222;
  display: block;
  border-radius: 50px;
  position: relative;
  transition: background 0.3s;
}
.toggle-switch .toggle {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
  z-index: 2;
}
.toggle-switch .sun,
.toggle-switch .moon {
  position: absolute;
  top: 7px;
  width: 16px;
  height: 16px;
  z-index: 3;
}
.toggle-switch .sun {
  left: 8px;
  background: url('data:image/svg+xml;utf8,<svg fill="yellow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><g><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></g></svg>') no-repeat center/contain;
}
.toggle-switch .moon {
  right: 8px;
  background: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 0112.21 3a7 7 0 100 14 9 9 0 008.79-4.21z"/></svg>') no-repeat center/contain;
}
.toggle-switch input[type="checkbox"]:checked + label {
  background: #222;
}
.toggle-switch input[type="checkbox"]:checked + label .toggle {
  left: 32px;
  background: #0088ff;
}

body.dark .ql-tooltip {
  background: #23272a;
  color: #e0e0e0;
  border: 1px solid #444;
}
body.dark .ql-tooltip input {
  background: #363636;
  color: #e0e0e0;
  border: 1px solid #444;
}
body.dark .ql-tooltip a {
  color: #59ff67;
}