* {
  box-sizing: border-box;
}

body {
  padding: 5px;
  margin: 0;
  /* 
  margin: 0 auto;
  max-width: 1536px; 
  */
  font-family: sans-serif;
  background-color: #e3e3e3;
}

header {
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer {
  margin-top: 5px;
  padding: 2px;
}

section {
  margin-top: 5px;
  height: 93vh;
  display: flex;
  padding: 1px;
}

button {
  cursor: pointer;
  background-color: green;
  color: white;
  border: 1px solid forestgreen;
  border-radius: 3px;
  padding: 2px 4px;
}

#input,
#output {
  width: 50%;
  padding: 2px;
}

.divider {
  width: 1px;
}

.logo {
  font-weight: bolder;
  font-family: monospace;
}

.hidden {
  visibility: hidden;
}

#input textarea,
#output #html {
  width: 100%;
  height: 100%;
  border: 0;
  overflow-y: auto;
}

#input textarea:focus {
  outline: none;
}

#input textarea {
  font-family: monospace;
  resize: none;
}

#output #html {
  font-family: sans-serif;
  background-color: white;
}

#theme-toggle {
  background: transparent;
  border: transparent;
}

/* dark mode */
.dark {
  background-color: #202020;
  color: #bbb;
}

.dark textarea,
.dark #output #html {
  background-color: #555;
  color: #ccc;
}

.dark a {
  color: lightskyblue;
}

/* html preview */
#html h1,
#html h2,
#html h3,
#html h4,
#html h5,
#html h6,
#html p {
  margin-top: 4px;
  margin-bottom: 2px;
}

/* pdf */
.html2pdf__container {
  background-color: white;
  color: black;
}

.html2pdf__container a {
  color: blue;
}