:root {
  --bg-color: white;
  --text-color: #3a3a3a;
  --link-color: #3a3a3a;
  --link-hover-color: #5a6d8a;
  --border-color: #4e4e4e;
  --blockquote-border-color: #7c8495;
  --date-color: #6a6a6a;
  --link-underline-color: #c5c1c8;
  --selection: #e5e5e5;
  --content-width: 45em;
  --color-1: #e6194b;
  --color-2: #3cb44b;
  --color-3: #ffe119;
  --color-4: #4363d8;
  --color-5: #f58231;
  --color-6: #911eb4;
}

hr,
.intro p,
.bottom p
 {
  padding: 0;
  margin: 0; 
}


ul {
  margin-top: 0;
  margin-bottom: 0;
}

blockquote {
  border-left: 2px solid var(--blockquote-border-color);
  padding-left: 1em;
  font-style: italic;
  margin-block-end: 1rem;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.separator {
  border: 1px solid var(--border-color);
  margin: 1em 0;
}


body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh; 

  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;

}


table {
  border-collapse: collapse;

}


#content {
  display: flex;
  flex-direction: column;

  width: var(--content-width);
  max-width: 100%;
  margin: 3em auto;

  background: transparent;
  border: none;
}


html {
  scrollbar-gutter: stable;
}

@media (max-width: 768px) {
  #content {
    width: 90%;
    min-width: unset;
    margin: 1em;
  }
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
}


.email {
  background: rgb(212 212 212 / .5);
  border-radius: .25rem;
  padding: .25rem;
  font-family: monospace;
}