/* Estilo inspirado en iOS */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 16px; /* Base font size for better mobile readability */
}

/* Background */
body {
  background-color: #fff; /* White background */
  color: #333; /* Dark gray text */
  font-family: San Francisco, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 0;
  margin: 0;
}

/* Buttons, inputs and selects */
button, input, select {
  font-family: San Francisco, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f2f2f2; /* Light gray background for buttons */
  border: 1px solid #ddd; /* Light border for buttons */
  border-radius: 4px; /* Rounded corners */
  padding: 8px 16px; /* Consistent padding */
  font-size: 17px; /* Adjust slightly for mobile readability */
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100vw;
}

.content {
  height: 100vh;
  display: flex;
}

.raw-markdown, .rendered-html {
  min-height: 100%;
  max-width: 50%;
  flex-grow: 1;
  padding: 1em;
  overflow: scroll;
  font-size: 16px;
}

/* Textarea */
.raw-markdown {
  font-family: monospace;
}

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
  color: #000; /* Black for headings */
  margin-bottom: 0.5em; /* Consistent margin */
}

/* Enlaces */
a {
  color: #007bff; /* Blue for links */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Tipografía */
body {
  line-height: 1.5;
}

/* Tamaños de encabezados (adjust based on preference) */
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

/* Images */
img {
  border: none; /* Remove border for cleaner look */
  margin: 10px;
}

/* Listas */
ul {
  list-style: none;
  padding: 0;
  margin: 0; /* Remove margin for cleaner look */
}

li {
  padding: 5px;
  /* Remove bottom border for cleaner look */
}