:root {
  --bg1: white;
  --bg2:#9d9d9d54;
  --col1: black;
  --col2: #7b7b7b78;
  --sp1:10px;
  --sp2:20px;
  --sp3:30px;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  font-family: serif;
}

body {
  background-color: var(--bg1);
}

header, main, footer {
  max-width: 8.3in;
  margin: auto;
  padding: 20px;
}

header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: sticky;
  top: 0;
  background-color: var(--bg1);
}
header a {
  text-decoration: none;
}
header a:hover {
  text-decoration: none;
}

header::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 20px; /* Add left padding of 20px */
  width: calc(100% - 40px); /* Adjust width to account for the left padding */
  border-bottom: solid 1px var(--col2);
}

h1, h2, h3 {
  font-weight: 400;
}

pre, img, blockquote, ul, ol {
  margin: var(--sp3) 0;
}

h1, h2 {
  padding: var(--sp3) 0 var(--sp1) 0;
}

h3, h4, h5, h6 {
  padding-top: var(--sp1);
}

p {
  padding-bottom: var(--sp1);
}

ul, ol {
  padding-inline-start: var(--sp2);
}

a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline 1px var(--col2);
  text-underline-position: under;
  color: var(--col1);
}
a:hover {
  text-decoration: underline 1px var(--col1);
}
a:active {
  text-decoration: none;
  background: var(--col1);
  color: var(--bg1);
}

img {
  max-width: 100%;
  display: block;
}

pre {
  background-color: var(--bg2);
  overflow-x: scroll;
  padding: var(--sp1);
  font-size: small;
}
pre::-webkit-scrollbar {
  display: none;
}

@media print {
  pre {
    white-space: break-spaces;
  }
}

/*# sourceMappingURL=main.css.map */