@import url(https://fonts.googleapis.com/css?family=Pacifico);

/*
  0 Themes and Rhythm Overrides
*/

@media (max-width: 65rem) {
  * {
    --rhythm: 1.5rem;
  }
}

html[data-theme="dark"] {
    --color-primary-shade1: hsl(350, 80%, 60%);
    --color-primary: hsl(350, 80%, 45%);
    --color-primary-tint1: hsl(350, 80%, 35%);
    --color-accent-shade1: hsl(170, 80%, 60%);
    --color-accent: hsl(170, 80%, 45%);
    --color-accent-tint1: hsl(170, 80%, 35%);
    --color-link: hsl(230, 80%, 60%);
    --color-link-visited: hsl(290, 80%, 60%);
    --color-link-hover: hsl(230, 60%, 50%);
    --color-link-active: hsl(350, 60%, 50%);
    --color-neutral-shade4: hsl(170, 10%, 98%);
    --color-neutral-shade3: hsl(170, 10%, 94%);
    --color-neutral-shade2: hsl(170, 10%, 85%);
    --color-neutral-shade1: hsl(170, 10%, 68%);
    --color-neutral: hsl(170, 10%, 55%);
    --color-neutral-tint1: hsl(170, 10%, 41%);
    --color-neutral-tint2: hsl(170, 10%, 30%);
    --color-neutral-tint3: hsl(170, 10%, 18%);
    --color-neutral-tint4: hsl(170, 10%, 2%);
}

[data-rhythm="small"] * {
  --rhythm: 1.5rem;
}

[data-rhythm="large"] * {
  --rhythm: 2.5rem;
}

@media (max-width: 65rem) {
    [data-rhythm="small"] * {
        --rhythm: 1rem;
    }

    [data-rhythm="large"] * {
        --rhythm: 2rem;
    }
}

[data-grid="off"] body {
  background-image: none !important;
}

/*
  0.0 Head CSS Cacheables
*/

html {
  --breakpoint: 900px;
  --gutter-width: var(--rhythm);
}

body {
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  margin-top: var(--rhythm);
}

main {
}

footer {
  padding: var(--rhythm) var(--rhythm-half);
}

.site-nav {
  --grid-column-min: 7rem;

  grid-gap: 0;
  max-width: 100%;
}

@media screen and (min-width: 45rem){
  .site-nav {
    padding: 0 var(--rhythm-double);
  }
}

.nav-item-wrapper {
    border-bottom: 1px solid var(--color-neutral-tint2);
    margin-bottom: -1px;
    text-align: center;
}

.nav-item {
  display: inline-block;
  padding: var(--rhythm-half) var(--rhythm);
}

/*
  1. General
*/

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}

.sidebar a {
  text-decoration: none;
}

nav a {
  text-decoration: none;
}

/*
  1.1 Page Styles
*/

.page-header{
  text-align: center;
}

.page-title {
    margin-bottom: var(--rhythm);
}

.page-meta {
  color: var(--color-neutral-shade1);
  text-align: right;
}

.page-navigation {
  display: grid;
  column-gap: var(--gutter-width);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--rhythm);
}

.page-previous {
  text-align: right;
}

/*
  2: Layout
*/

body {
  margin: auto;
  max-width: initial;
}

.footer {
    --columns: 4;
    margin: 0 auto;
    max-width: 80rem;
    padding: var(--rhythm);
}

@media (max-width: 65rem) {
    .footer {
        --columns: 2;
    }
}

@media (max-width: 35rem) {
    .footer {
        --columns: 1;
    }
}

.footer ul {
    list-style-type: none;
    margin-left: 0;
}

/*
  2.1: Header
*/

.site-title:link,
.site-title:visited,
.site-title:hover,
.site-title:focus,
.site-title:active {
  color: var(--color-neutral-shade3);
  font-family: monospace;
  text-decoration: none;
}

.title {
  color: var(--color-primary-tint1);
  font-family: 'Pacifico', 'Avenir', 'Avenir Next','Helvetica Neue','Segoe UI', 'Verdana', sans-serif;
  font-weight: normal;
}

a.title:link,
a.title:visited,
a.title:active {
    color: var(--color-primary-tint1);
}
a.title:hover,
a.title:focus {
    color: var(--color-primary);
}

@media (max-width: 35rem) {
    .sublogo.-hide-small {
        display: none;
    }
}

.sublogo.-show-small {
    display: none;
}

@media (max-width: 35rem) {
    .sublogo.-show-small {
        display: inline;
    }
}



/*
  2.1.1: Toolbar
*/

html {
  margin-top: 4rem;
}

.toolbar {
  background-color: var(--color-neutral-tint4);
  border-bottom: 1px solid var(--color-neutral-tint1);
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding: var(--rhythm-half) var(--rhythm);
  position: fixed;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
}

.toolbar,
.toolbar * {
  --rhythm: 1.5rem;
}

.toolbar-logo {
  --sub-rhythm: 2rem;

  float: left;
  font-size: var(--font-size);
  line-height: var(--line-height);
  margin: 0;
}

.toolbar-controls {
    float: right;
    text-align: right;
}

.toolbar-label {
    display: none;
    padding-left: var(--rhythm-half);
}

@media (max-width: 28rem) {
    .toolbar-size {
      display: none;
    }
}

@media (min-width: 50rem) {
    .toolbar-label {
      display: inline-block;
    }
}

.toolbar-label + .toolbar-button {
    margin-left: var(--rhythm-half);
}

.toolbar-button {
  border: 1px solid var(--color-neutral-tint1);
  background-color: var(--color-neutral-tint3);
  border-radius: 2px;
  color: var(--color-neutral-shade3);
  cursor: pointer;
  display: inline-block;
  padding: var(--rhythm-eighth) var(--rhythm-half);
  vertical-align: middle;
}

.toolbar-button:hover,
.toolbar-button:focus {
  background-color: var(--color-neutral-tint2);
}

.toolbar-button.-small {
  --line-height-ratio: 2;
  font-size: var(--font-size);
}

.toolbar-button.-large {
  --line-height-ratio: 1;
  font-size: var(--font-size);
}

.toolbar-button.-light {
  background-color: var(--color-neutral-tint4);
  color: var(--color-neutral-shade2);
}

.toolbar-button.-dark {
  background-color: var(--color-neutral-shade2);
  color: var(--color-neutral-tint4);
}

.toolbar-button.-on {
  text-decoration: underline overline;
}

[data-theme="dark"] .toolbar-button.-light {
  background-color: var(--color-neutral-shade2);
  color: var(--color-neutral-tint4);
}

[data-theme="dark"] .toolbar-button.-dark {
  background-color: var(--color-neutral-tint4);
  color: var(--color-neutral-shade2);
}

[data-rhythm="small"] .toolbar-button.-small,
[data-rhythm="normal"] .toolbar-button.-normal,
[data-rhythm="large"] .toolbar-button.-large,
[data-theme="light"] .toolbar-button.-light,
[data-theme="dark"] .toolbar-button.-dark,
[data-grid="on"] .toolbar-button.-on,
[data-grid="off"] .toolbar-button.-off {
  cursor: normal;
  opacity: .5;
  pointer-events: none;
}

/*
  2.2 Sidebar
*/

.sidebar h4 {
  color: var(--color-neutral-shade1);
  text-transform: uppercase;
  padding: 0 0 var(--rhythm-half);
}

.sidebar ul {
  list-style-type: none;
  padding-bottom: var(--rhythm-half);
  margin-left: 0;
}

@media (min-width: 55rem) {
  .sidebar h4 {
    font-size: var(--font-size);
  }
}

.sidebar a {
  display: inline-block;
  margin-bottom: var(--rhythm-half);
}

/*
  3: Post Lists
*/  

.snippet {
  margin-bottom: var(--rhythm);
  position: relative;
}

.snippet:last-child {
  margin-bottom: 0;
}

.snippet::after {
  border-bottom: 1px solid var(--color-neutral-tint2);
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: calc(-1 * var(--gutter-width));
  right: 0;
}

.snippet:last-child::after {
  content: none;
}

/*
  4: Posts
*/

.post {
  margin-bottom: var(--rhythm-double);
}

/*
  5: Examples
*/

.example-column::before {
    background-color: var(--color-primary);
    color: var(--color-neutral-tint4);
    content: 'Column';
    display: block;
    text-align: center;
}

/*
  6: Homepage one-offs
*/

td:first-child {
    white-space: nowrap;
}