/*---------------
main parts
---------------*/
main {
  background: radial-gradient(#fefefe, #f8f8f8);
  border-bottom: 1px solid #fff; /* needed to prevent margin collapse */
  border-top: 1px solid #fff; /* needed to prevent margin collapse */
}
article {
  padding: 0;
  transition: padding .25s;
}
header {
  margin-top: 3.9rem;
  transition: margin .25s;
}
header time {
  display: block;
  margin: 3rem auto;
  text-align: right;
  transition: margin .25s;
}
blockquote, footer, h2, header, ol, p, ul {
  max-width: 55ch;
}
article > p + footer {
  background-image: linear-gradient(90deg, #000 0%, #000 26.66%, transparent 26.66%, transparent 36.66%, #000 36.66%, #000 63.32%, transparent 63.32%, transparent 73.32%, #000 73.32%, #000 100%);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 30px 1px;
  padding-top: 1px;
}


/*---------------
links
---------------*/
figcaption a,
li a,
nav a, 
p a {
  background-image: linear-gradient(90deg, #949494, #949494 100%);
  background-position: 0 93%;
  background-repeat: repeat-x;
  background-size: 1px 1px;
  text-decoration: none;
  text-shadow: 
    -3px -1px #fff, -2px -1px #fff, -1px -1px #fff, 1px -1px #fff, 2px -1px #fff, 3px -1px #fff,
    -3px 0px #fff, -2px 0px #fff, -1px 0px #fff, 1px 0px #fff, 2px 0px #fff, 3px 0px #fff,
    -3px 1px #fff, -2px 1px #fff, -1px 1px #fff, 1px 1px #fff, 2px 1px #fff, 3px 1px #fff;
}
figcaption a {
  background-image: linear-gradient(90deg, #585858, #585858 100%);
}
a:hover {
  background-image: linear-gradient(90deg, #111, #111 100%);
}
a[class^="max-width-"] {
  background-image: none;
}


/*---------------
headings
---------------*/
h1 {
  display: none;
}
h2 {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  margin-top: 6rem;
  text-align: center;
  transition: margin .25s;
}
h2::after,
h2::before {
  background-image: linear-gradient(90deg, #000 0%, #000 26.66%, transparent 26.66%, transparent 36.66%, #000 36.66%, #000 63.32%, transparent 63.32%, transparent 73.32%, #000 73.32%, #000 100%);
  background-repeat: no-repeat;
  background-size: 30px 1px;
  content: '';
  flex-grow: 1;
  height: 1px;
  max-width: 30px;
}
h2::after {
  background-position-x: left;
  margin-left: 1rem;
}
h2::before {
  background-position-x: right;
  margin-right: 1rem;
}


/*---------------
lists
---------------*/
li {
  margin: 0 0 0 3.3rem;
  transition: margin .25s;
}
li+li {
  margin-top: 1rem;
}


/*---------------
figures
---------------*/
/* generally used to display images, videos, and code samples */
figure {
  margin: 4.1rem auto 3.9rem; /* needed to work with text blocks */
  max-width: 75%;
  min-width: 55ch;
  transition: margin .25s;
  width: 100%;
}
figure.code {
  max-width: 55ch;
  min-width: unset;
  width: 100%;
}
figure.hero {
  margin-top: 0;
  max-width: 100%;
  position: relative;
}
figure.hero::after {
  content: '';
  display: block;
  position: relative;
  visibility: hidden;
  width: 100%;
}
figure.hero img, 
figure.hero video {
  position: absolute;
}
figure a {
  display: block;
  margin: auto;
}
figure img, 
figure video {
  width: 100%;
}
figure img+img, 
figure video+video,
figure img+video, 
figure video+img,
figure a+a {
  margin-top: .2rem;
}
figcaption {
  color: #585858;
  font-size: 1.5rem;
  line-height: 2.5rem;
  margin: .8rem auto -.8rem;
  max-width: 62ch;
  text-align: center;
}
figcaption a {
  display: inline;
}


/*---------------
blockquotes
---------------*/
blockquote {
  border-left: 1px solid rgba(0, 0, 0, 0); /* to match tweets, but maybe not needed */
  padding: 0 0 0 2rem;
}
blockquote p {
  margin: 0 auto 1.5rem;
}
blockquote footer {
  font-style: italic;
  display: block;
  margin: 0;
  max-width: auto;
}


/*---------------
misc
---------------*/
/* needed because the default margins of these things are setup to work
with text blocks and so are set to abnormal margins to account for line heights */
figure + figure,
blockquote.tweet + figure,
figure + blockquote.tweet {
  margin-top: 5rem;
  transition: margin .25s;
}
.screenshot-window {
  border-radius: 4px;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .02), 0 1px 1px rgba(0, 0, 0, .04), 0 2px 2px rgba(0, 0, 0, .04);
  overflow: hidden; /* needed to hide images inside links */
}


/*---------------
max-width
---------------*/
/* common max-width values for things like images and videos */
/* extra values are added to a page as needed */
.max-width-800 {
  max-width: 800px;
}
.max-width-1000 {
  max-width: 1000px;
}
.max-width-2000 {
  max-width: 2000px;
}
.max-width-3000 {
  max-width: 3000px;
}
.max-width-4000 {
  max-width: 4000px;
}
.max-width-5000 {
  max-width: 5000px;
}


/*---------------
small screens
---------------*/
@media (max-width: 700px) {
  main {
    background: none; /* white background is less noisy on small screen */
  }
  article {
    padding: 0 4%;
  }
  header {
    margin-top: 0; /* close the gap to the nav */
  }
  header time {
    margin: 0 auto 2.5rem;
  }
  li {
    margin-left: 2.8rem;
  }
  figure {
    margin: 3.6rem auto 3.4rem;
    max-width: 55ch;
    min-width: unset;
  }
  figure.hero {
    margin: 0 auto 3.4rem;
  }
  blockquote {
    padding-left: 1.5rem;
  }
  figure + figure,
  blockquote.tweet + figure,
  figure + blockquote.tweet {
    margin-top: 4.5rem;
  }
}