@import "./pre.scss";
@import "./theme.scss";
@import "./atom.scss";
@import "./md.scss";
@import "./syntax.scss";

:root {
  --max-w: 640px;
  --nav-s: 1.5rem;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media screen and (min-width: 480px) {
  :root {
    --nav-s: .5rem;
  }
}


html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  box-sizing: border-box;
  border-collapse: collapse;
}

body {
  margin: 0 16px;
  font-family: var(--font);
  font-weight: 400;
  background-color: var(--back);
  color: var(--text);
  transition-property: background-color, border-color, color;
  transition-duration: 0.5s;
}

main {
  animation: showup 0.7s;
}

main p a {
  color: var(--prime);
}

@keyframes showup {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}