# Only the main Sass file needs front matter (the dashes are enough)


@charset “utf-8”;

// Global @import “colors”; @import “layout”; @import “typography”;

// Components @import “byline”; @import “code”; @import “featured”; @import “figures”; @import “nav”; @import “tags”; @import “twitter-cards”;

:root {

color-scheme: light dark;

}

}

body, html {

background-color: var(--bg-color);
color: var(--fg-color);
fill: var(--fg-color);
margin: 0;
overflow-x: hidden;

}

html {

// To blend with the footer on short pages
background-color: var(--secondary-bg-color);

}

svg {

fill: inherit;

}

.error {

max-width: 22rem;
margin: 8em auto;
text-align: center;

p {
  font-family: var(--ui-font);
}

}

nav.pagination {

font-size: 0; // Fix percentage issues with whitespace
margin: 2rem auto;
text-align: center;

a {
  display: inline-block;
  font-size: 1rem;
  font-family: var(--ui-font);
  padding: 1em;

  &.next::after {
    content: " →";
  }

  &.previous::before {
    content: "← ";
  }
}

}

.social {

font-size: 0; // Fix percentage issue with whitespace
margin: 4rem auto;
text-align: center;

h2 {
  font-size: 1.5rem;
}

div {
  display: inline-block;
  font-size: 1rem;
  width: 50%;
}

a {
  display: inline-block;
  margin: 0.75rem;

  img {
    width: 32px;
    height: 32px;
  }
}

}

.center {

margin-left: auto;
margin-right: auto;
text-align: center;

}

.button {

border: 1px solid;
border-radius: 0.25em;
font-family: var(--ui-font);
padding: 0.5em 1em;
text-decoration: none;

}

pre {

-webkit-text-size-adjust: none;

}