body {
  overflow-x: hidden;
  font-family: var(--ff-2);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--ff-1);
  font-weight: 700;
  transition: font-size .24s ease-in-out;
}

h1 {font-size: var(--f-size-1)}
h2 {font-size: var(--f-size-2)}
h3 {font-size: var(--f-size-3)}
h4 {font-size: var(--f-size-4)}

p, aside, button, label {
  font-size: var(--f-size-p);
  font-family: var(--ff-2);
}

hr {
  border-top: 1px solid hsla(var(--o-bg), .05);
  border-bottom: 1px solid hsla(var(--o-bg), .1);
  border-left: none;
  border-right: none;
  width: 100%;
}

/* --------- native selection --------- */
::-moz-selection {
  color: hsl(var(--bg));
  background: hsla(var(--o-bg), .99);
}
::selection {
  color: hsl(var(--bg));
  background: hsla(var(--o-bg), .99);
}

a,li,pre,code,p, label {
  font-size: var(--f-size-p);
  line-height: 1.4;
}
pre{
  white-space: unset;
}
code{
  border-radius: var(--size-unit);
  line-height: 1.2;
  background-color: hsla(var(--o-prim), .1);
  padding: 0 calc(var(--space-unit)*1/2);
}
a {
  text-decoration: none;
  color: currentColor;
  cursor: pointer;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-o-bg);
  opacity: 1;
  /* Firefox */
}

.page-padding {
  padding: 0 var(--page-padding-h);
  max-width: 1200px;
  margin: 0 auto;
}