/*--------------------------------------------------------------
BASE.CSS - Typography and essential elements
--------------------------------------------------------------*/

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Body typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #404040;
  background: #fff;
}

/* Headings */
h1 { font-size: 2rem; margin-bottom: 0.5em; }
h2 { font-size: 1.75rem; margin-bottom: 0.5em; }
h3 { font-size: 1.5rem; margin-bottom: 0.5em; }
h4 { font-size: 1.25rem; margin-bottom: 0.5em; }
h5, h6 { font-size: 1rem; margin-bottom: 0.5em; }

/* Paragraphs */
p { margin-bottom: 1.5em; }

/* Links */
a {
  color: #4169e1;
}
a:visited { color: #800080; }
a:hover, a:focus { color: #191970; }

/* Lists */
ul { list-style: disc; margin-left: 1.5em; }
ol { list-style: decimal; margin-left: 1.5em; }

/* Tables */
th, td {
  padding: 0.5em;
  text-align: left;
  border: 1px solid #ddd;
}

/* Forms */
input, select, textarea, button {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.5em;
  font-family: inherit;
  font-size: 1rem;
}
input:focus, textarea:focus, select:focus {
  border-color: #4169e1;
  outline: none;
}

/* Code */
pre, code, kbd, samp {
  font-family: monospace, monospace;
}
pre {
  background: #f5f5f5;
  padding: 1em;
  overflow-x: auto;
}

/* Images */
img {
  display: block;
  max-width: 100%;
  height: auto;
}