:root {
  --white: #fff;
  --grey: #1e1e1d;
  --yellow: #ffad15;
  --offwhite: #f8f8f8;
  --darkerwhite: #d3d3d3;
  --font-franklin: 'franklin-gothic-urw', helvetica, sans-serif;
}

@media (min-width: 55em) {}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
del, dfn, em, img, ins, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before,
blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

b, strong {
font-weight: 700;
}

i, em {
  font-style: italic;
}

body {
  background-color: var(--grey);
  color: var(--offwhite);
  font-family: 'freight-text-pro', georgia, times, serif;
}

a {
  color: var(--yellow);
}

[role='banner'] {
  overflow: hidden;
  padding-top: 0.6em;
  text-align: center
}

[role='banner'] .logo {
  display: block;
  margin: 0 auto;
  max-width: 160px;
  width: 95%;
}

[role='banner'] svg {
  display: block;
  height: 100%;
  width: 100%;
}

.logo:hover .logo-title,
.logo:focus .logo-title {
  fill: var(--offwhite);
}

.logo-name {
  fill: var(--offwhite);
  transition: fill 0.2s;
}

.logo-title {
  fill: var(--yellow);
  transition: fill 0.2s;
}

[role='navigation'] {
  border-bottom: 6px solid var(--yellow);
  font-size: 1.2em;
  margin: 0 auto;
  max-width: 720px;
  width: 95%
}

[role='navigation'] ul {
  display: flex;
  flex-wrap: wrap;
}

[role='navigation'] li {
  flex-grow: 1;
}

[role='navigation'] a {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  display: inline-block;
  font-weight: 500;
  padding: 0.7em 0.2em;
  text-decoration: none;
  transition: color 0.2s;
}

[role='navigation'] a:hover,
    [role='navigation'] a:focus {
  color: var(--offwhite);
}

@media (min-width: 450px) {

  [role='navigation'] {
    font-size: 1.4em;
  }
}

[data-page='article'] .nav-articles,
[data-page='articles'] .nav-articles,
[data-page='project'] .nav-projects,
[data-page='projects'] .nav-projects,
[data-page='about'] .nav-about {
  color: var(--offwhite);
}

.the-color-of {
  color: #65e12e;
}

:root {
  --statement-border: 0.2em;
}

.bold-statements {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-size: 2.4em;
  font-weight: 900;
  margin: 0 auto;
  padding-top: 0.6em;
  text-align: left;
  text-transform: uppercase;
  width: 93%;
}

.bold-statements a {
  display: inline-block;
  border-bottom: var(--statement-border) solid var(--yellow);
  position: relative;
  text-decoration: none;
  transition: color 0.2s;
}

.bold-statements a::after {
  background-color: var(--offwhite);
  content: '';
  display: block;
  left: 0;
  opacity: 0;
  position: absolute;
  height: var(--statement-border);
  top: 100%;
  transition: width 0.2s;
  width: 1px;
}

.bold-statements a:hover,
    .bold-statements a:focus {
  color: var(--offwhite);
}

.bold-statements a:hover::after, .bold-statements a:focus::after {
  opacity: 1;
  width: 100%;
}

.bold-statements p {
  margin-bottom: 0.8em;
  word-wrap: break-word;
}

@media (min-width: 650px) {

  .bold-statements {
    font-size: 4.8vw;
    text-align: center;
    width: 100%;
  }

  .bold-statements p {
    margin-bottom: 0.5em;
  }
}

@media (min-width: 1100px) {

  .bold-statements {
    padding-top: 0.5em;
  }
}

@media (min-width: 1700px) {

  .bold-statements {
    padding-top: 0.25em;
  }
}

.article-list {
  margin: 0 auto;
  padding-top: 0.5em
}

.article-list li {
  box-sizing: border-box;
  margin: 0.5em 0;
  padding: 1.2em 1em;
}

.article-list .oldest-article {
  border-bottom: 0;
}

.article-list .section-title {
  align-items: center;
  background-color: var(--yellow);
  color: var(--grey);
  display: flex;
  padding: 1.8em;
}

.article-list .section-title p {
  color: var(--grey);
}

.article-list .section-title h2 {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-weight: 900;
  font-size: 3em;
  text-transform: uppercase;
}

.article-list time {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--yellow);
  display: block;
  margin-bottom: 0.25em;
}

.article-list a {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  color: var(--offwhite);
  display: inline-block;
  font-size: 2.6em;
  max-width: 100%;
  text-decoration: none;
  transition: color 0.2s;
  word-wrap: break-word;
}

.article-list a:hover,
    .article-list a:focus {
  color: var(--yellow);
}

.article-list p {
  color: var(--darkerwhite);
  font-size: 1.1em;
  line-height: 1.4;
  margin-top: 0.5em;
}

@media (min-width: 650px) {

  .article-list {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
  }

  .article-list li {
    margin: 0.5em 1%;
    padding: 1em;
    width: 48%;
  }
}

@media (min-width: 1080px) {

  .article-list li {
    width: 31.33%;
  }
}

@media (min-width: 1590px) {

  .article-list li {
    width: 23%;
  }
}

:root {
  --contentWidth: 93%;
  --maxContentWidth: 850px;
}

.h-entry {
  overflow: hidden;
}

.e-header {
  box-sizing: border-box;
  margin: 2.4em 0 2.3em 0;
  text-align: center
}

.e-header .p-name {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  color: var(--offwhite);
  font-size: 3.2em;
  font-weight: 900;
  margin: 0 auto;
  max-width: 95%;
}

.e-header .dt-published {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  color: var(--yellow);
  display: block;
  font-size: 1.2em;
  font-weight: 500;
}

@media (min-width: 620px) {

  .e-header .p-name {
    font-size: 7vw;
  }
}

.p-author {
  display: none;
  visibility: hidden;
}

.e-content {
  color: var(--darkerwhite);
  font-size: 1.3em;
  line-height: 1.5;
  margin: 0 auto;
  max-width: var(--maxContentWidth);
  width: var(--contentWidth)
}

.e-content h2, .e-content h3, .e-content h4, .e-content h5, .e-content h6 {
  margin: 0 auto;
  max-width: 790px;
}

.e-content h2,
  .e-content h3,
  .e-content h4,
  .e-content h5,
  .e-content h6 {
  color: var(--offwhite);
  font-weight: 700;
}

.e-content h2 {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-size: 1.2em;
  padding: 0.7em 0 0.25em 0;
}

.e-content h3 {
  margin-top: 1.2em;
}

.e-content p {
  margin: 0 auto;
  max-width: 790px;
  padding-bottom: 1.4em;
}

.e-content .thanks-for-reading {
  padding-bottom: 0.4em;
}

.e-content .thanks-for-reading i {
  background: transparent url('/images/article-thanks.svg') no-repeat left top;
  background-size: 100%;
  display: inline-block;
  height: 70px;
  margin-top: 0.1em;
  text-indent: -300em;
  max-width: 250px;
  width: 95%;
}

.e-content .thanks-for-reading svg {
  max-width: 250px;
}

.e-content figure {
  margin: 0.2em 0 1.8em 0;
}

.e-content figure img {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.e-content figcaption {
  margin-top: 0.4em;
  text-align: center;
}

.e-content figcaption,
  .e-content .note,
  .e-content .note-special,
  .e-content .note-update {
  font-size: 0.8em;
  font-style: italic;
}

.e-content p.note-special,
    .e-content p.note-update {
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  color: #fff;
  padding: 0.6em 1em;
  margin: 0.1em 0 1.2em 0;
}

.e-content p.note-special {
  border-color: #ffad154d;
  background-color: #ffad1526;
  color: var(--darkerwhite);
}

.e-content p.note-update {
  border-color: #007cff4d;
  background-color: #007cff26;
}

.e-content ul, .e-content ol {
  margin: 0 auto;
  max-width: 790px;
}

.e-content ul,
  .e-content ol {
  clear: both;
  padding: 0 0.2em 1.4em 0.2em;
}

.e-content li {
  color: var(--offwhite);
  line-height: 1.5;
  padding-bottom: 0.25em;
  position: relative;
}

.e-content ul li {
  list-style: disc inside;
}

.e-content ol li {
  list-style: decimal inside;
}

.e-content blockquote {
  border-left: 4px solid var(--darkerwhite);
  color: var(--offwhite);
  font-size: 1em;
  margin-bottom: 1.6em;
  padding: 0.4em 1em 0 1em;
}

.e-content blockquote p {
  font-style: italic;
  padding-bottom: 0;
}

.e-content blockquote cite {
  margin: 0 auto;
  max-width: 790px;
  display: block;
  font-size: 0.9em;
}

.entry-intro {
  color: var(--offwhite);
  font-size: 1.2em;
  line-height: 1.6;
  max-width: 100%;
  padding-bottom: 0
}

.entry-intro::after {
  background-color: var(--yellow);
  content: '';
  display: block;
  text-align: center;
  width: 25%;
  height: 6px;
  margin: 1.5em auto 1.5em auto;
}

.entry-intro + h2 {
  padding-top: 0;
}

.entry-intro + p:first-letter, .entry-intro + h2 + p:first-letter {
  color: var(--yellow);
  float: left;
  font-family: var(--font-franklin);
  font-size: 650%;
  font-weight: 900;
  line-height: 0.8;
  padding-right: 0.07em;
  margin-top: -0.15em;
}

@media (min-width: 55em) {

  .entry-intro + p:first-letter, .entry-intro + h2 + p:first-letter {
    font-size: 700%;
    margin-left: -0.2em;
    margin-top: -0.08em;
  }
}

.entry-intro + p:first-letter,
.entry-intro + h2 + p:first-letter {
  color: var(--offwhite);
}

@media (min-width: 620px) {
  .e-content {
    font-size: 1.4em;
  }
}

.entry-update {
  font-size: 0.9em;
  font-style: italic;
}

.projects-list {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  padding-top: 1em;
  max-width: 100%
}

.projects-list li {
  align-items: center;
  border-bottom: 2px solid var(--grey);
  box-sizing: border-box;
  display: flex;
  padding: 2.4em;
  position: relative;
  text-align: center;
  width: 100%;
}

.projects-list li div {
  width: 100%;
}

.projects-list a {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  background-color: var(--offwhite);
  border: 2px solid var(--offwhite);
  border-radius: 3px;
  color: var(--grey);
  display: inline-block;
  font-size: 1.2em;
  margin-bottom: 0.2em;
  padding: 0.6em 0.8em;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.projects-list a:hover,
    .projects-list a:focus {
  color: var(--offwhite);
}

.projects-list .section-desc {
  background-color: var(--yellow);
  color: var(--grey);
  text-align: left;
}

.projects-list .section-desc h2 {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-weight: 900;
  font-size: 3em;
  text-transform: uppercase;
}

.projects-list .potential {
  align-items: flex-end;
  background-color: var(--yellow);
  color: var(--grey);
  display: flex;
  flex-grow: 1;
  min-height: 10rem;
}

.projects-list .potential, .projects-list h2 {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
}

.projects-list h2 {
  font-size: 2.8em;
}

.projects-list .rip {
  color: var(--grey);
  display: block;
  font-size: 40%;
  font-weight: 500;
}

.projects-list p {
  font-size: 1.1em;
  line-height: 1.4;
  margin: 0.5em 0 0.9em 0;
}

@media (min-width: 620px) {

  .projects-list li {
    border-right: 2px solid var(--grey);
    width: 50%;
  }

  .projects-list li a {
    font-size: 1em;
  }
}

@media (min-width: 1050px) {

  .projects-list li {
    width: 33.33%;
  }
}

@media (min-width: 1460px) {

  .projects-list li {
    width: 25%;
  }
}

:root {
  --color-clr: #b50003;
  --color-jsx: #ae00ff;
  --color-dpl: #ff7700;
  --color-rdb: #ac1603;
  --color-rdl: #6e2911;
  --color-jrb: #ff0066;
  --color-trt: #008ea2;
  --color-tmh: #8c132b;
  --color-shk: #3ca335;
  --color-wrt: #ff00ae;
  --color-ppr: #6b4ba0;
  --color-sld: #0b7daa;
  --color-sls: #346f6e;
  --color-spr: #dd6364;
}

.p-jsx,
.p-jsx a:hover,
.p-jsx a:focus {
  background-color: var(--color-jsx);
}

.p-jsx a {
  color: var(--color-jsx);
}

.p-dpl,
.p-dpl a:hover,
.p-dpl a:focus {
  background-color: var(--color-dpl);
}

.p-dpl a {
  color: var(--color-dpl);
}

.p-colorme,
.p-colorme a:hover,
.p-colorme a:focus {
  background-color: var(--color-clr);
}

.p-colorme a {
  color: var(--color-clr);
}

.p-readability,
.p-readability a:hover,
.p-readability a:focus {
  background-color: var(--color-rdb);
}

.p-readability a {
  color: var(--color-rdb);
}

.p-readlists,
.p-readlists a:hover,
.p-readlists a:focus {
  background-color: var(--color-rdl);
}

.p-readlists a {
  color: var(--color-rdl);
}

.p-jribbble,
.p-jribbble a:hover,
.p-jribbble a:focus {
  background-color: var(--color-jrb);
}

.p-jribbble a {
  color: var(--color-jrb);
}

.p-true-titles,
.p-true-titles a:hover,
.p-true-titles a:focus {
  background-color: var(--color-trt);
}

.p-true-titles a {
  color: var(--color-trt);
}

.p-tmfh,
.p-tmfh a:hover,
.p-tmfh a:focus {
  background-color: var(--color-tmh);
}

.p-tmfh a {
  color: var(--color-tmh);
}

.p-css-shaky,
.p-css-shaky a:hover,
.p-css-shaky a:focus {
  background-color: var(--color-shk);
}

.p-css-shaky a {
  color: var(--color-shk);
}

.p-css-write-on,
.p-css-write-on a:hover,
.p-css-write-on a:focus {
  background-color: var(--color-wrt);
}

.p-css-write-on a {
  color: var(--color-wrt);
}

.p-slenderman,
.p-slenderman a:hover,
.p-slenderman a:focus {
  background-color: var(--color-sld);
}

.p-slenderman a {
  color: var(--color-sld);
}

.p-css-slideshows,
.p-css-slideshows a:hover,
.p-css-slideshows a:focus {
  background-color: var(--color-sls);
}

.p-css-slideshows a {
  color: var(--color-sls);
}

.p-css-sprites,
.p-css-sprites a:hover,
.p-css-sprites a:focus {
  background-color: var(--color-spr);
}

.p-css-sprites a {
  color: var(--color-spr);
}

[data-page='about'] h3, [data-page='about'] h4 {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
}

.gaw-gives-a-shit {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-size: 2.9em;
  font-weight: 900;
  margin-bottom: 0.2em;
  text-align: center;
  text-transform: uppercase;
  width: 98%;
}

.big-talker {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  padding-top: 1.6em;
  position: relative
}

.big-talker h3 {
  font-size: 1.2em;
  padding: 0.6em 0 0.1em 0;
}

.big-talker p {
  color: var(--darkerwhite);
  padding-bottom: 1.4em;
}

.big-talker .number-one {
  color: var(--offwhite) !important;
  font-size: 1.2em;
  font-style: italic;
  line-height: 1.4;
  margin-top: 0.3em;
  text-align: center;
}

.big-talker .number-one strong {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-style: normal;
}

.big-talker .number-one::after {
  background-color: var(--yellow);
  content: '';
  display: block;
  text-align: center;
  width: 25%;
  height: 6px;
  margin: 1em auto 0 auto;
}

.all-about-me {
  box-sizing: border-box;
  font-size: 1.2em;
  margin: 0 auto;
  line-height: 1.5;
  padding-top: 0.8em;
  width: 93%;
}

.number-one + p:first-letter {
  color: var(--yellow);
  float: left;
  font-family: var(--font-franklin);
  font-size: 650%;
  font-weight: 900;
  line-height: 0.8;
  padding-right: 0.07em;
  margin-top: -0.15em;
}

@media (min-width: 55em) {

  .number-one + p:first-letter {
    font-size: 700%;
    margin-left: -0.2em;
    margin-top: -0.08em;
  }
}

.number-one + p:first-letter {
  margin-left: -0.1em;
}

.my-big-dumb-faces {
  background: transparent url('../images/tyler-gaw-portraits-horizontal.jpg') no-repeat center top;
  background-size: 97%;
  box-sizing: border-box;
  padding-top: 66%;
  width: 100%;
}

.design-to-me {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  background-color: var(--grey);
  border-top: 6px solid var(--offwhite);
  border-bottom: 6px solid var(--offwhite);
  box-sizing: border-box;
  color: var(--offwhite);
  font-size: 1.8em;
  font-weight: 900;
  line-height: 1.3 !important;
  margin: 0 auto;
  padding: 0.4em 0.2em;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

.things-i-do {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  margin: 1.2em auto 0 auto;
}

:root {
  --width-services: 88%;
}

.services {
  align-items: center;
  background-color: var(--yellow);
  color: var(--grey);
  display: flex;
  font-family: var(--font-franklin);
  padding: 0.8em 0 0.4em 0;
  text-align: center;
  text-transform: uppercase
}

.services > div {
  width: 100%;
}

.services .boastin {
  border-bottom: 4px solid var(--grey);
  font-size: 1em;
  font-weight: 500;
  margin: 0 auto;
  padding: 0.3em 0 0.6em 0;
  width: var(--width-services);
}

.services .boastin p {
  display: inline-block;
  text-align: center;
  width: 48%;
}

.services .listed {
  border-bottom: 4px solid var(--grey);
  border-top: 4px solid var(--grey);
  box-sizing: border-box;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 auto;
  padding: 0.3em 3%;
  width: var(--width-services);
}

.services .no-bullshit {
  font-size: 1.3em;
  font-weight: 700;
  padding: 0.6em 0;
}

.big-bad-words {
  font-size: 1.2em;
  padding: 0.8em 0 0.4em 0
}

.big-bad-words h2 {
  font-size: 1.6em;
  font-weight: 900;
}

.skills {
  box-sizing: border-box;
  color: var(--darkerwhite);
  font-size: 1.2em;
  line-height: 1.5;
  margin: 0.5em auto 0 auto;
  width: 93%;
}

.skill-type + li {
  margin-top: 1em;
}

.skill-type h3 {
  color: var(--offwhite);
  font-size: 1.2em;
  padding: 0.6em 0 0.1em 0;
}

.skill-type h4 {
  color: var(--yellow);
  font-size: 0.9em;
  padding-bottom: 0.1em;
}

.skill-type p {
  font-size: 0.9em;
  line-height: 1.4;
}

.skill-type li {
  padding: 0.6em 0;
}

.the-site {
  align-self: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 1.2em auto 0 auto;
  padding: 1em 0.5em;
  width: 95%;
}

.site-description {
  font-size: 1em;
  line-height: 1.5;
  width: 100%
}

.site-description h3 {
  font-size: 1.2em;
  padding: 0.6em 0 0.25em 0;
}

.site-description p {
  color: var(--darkerwhite);
  padding-bottom: 1.4em;
}

.previous-versions {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width: 100%
}

.previous-versions li {
  display: flex;
  box-sizing: border-box;
  padding: 0.6em 0;
  width: 100%;
}

.previous-versions a {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  background-color: var(--grey);
  background-size: 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: block;
  font-size: 1.2em;
  min-height: 5em;
  position: relative;
  text-decoration: none;
  width: 100%;
}

.previous-versions a b {
  background-color: var(--yellow);
  color: var(--grey);
  padding: 0 0.25em;
}

.previous-versions .version-1 a {
  background-image: url('../images/about-versions-1.jpg');
  background-size: 120%;
}

.previous-versions .version-2 a {
  background-image: url('../images/about-versions-2.jpg');
  background-position: right top;
}

.previous-versions .version-3 a {
  background-image: url('../images/about-versions-3.jpg');
}

.previous-versions .version-4 a {
  background-image: url('../images/about-versions-4.jpg');
}

@media (min-width: 390px) {
  .gaw-gives-a-shit {
    font-size: 12vw;
  }
}

@media (min-width: 440px) {
  .big-bad-words {
    font-size: 1.7em;
  }
}

@media (min-width: 500px) {
  .design-to-me {
    box-sizing: border-box;
    font-size: 5.4vw;
    width: 98%;
  }

  .services {
    margin: 0 auto;
    width: 98%
  }

  .services .listed {
    font-size: 1.2em;
  }

  .services .no-bullshit {
    font-size: 1.6em;
  }

  .big-bad-words h2 {
    font-size: 9vw;
  }

  .previous-versions li {
    padding: 0.6em;
    width: 50%;
  }
}

@media (min-width: 555px) {
  .skill-type ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .skill-type li {
    width: 48%;
  }
  .skill-type h4 {
    padding-top: 0.25em;
  }
  .skill-type p {
    max-width: 20em;
  }
}

@media (min-width: 570px) {
  .gaw-gives-a-shit {
    font-size: 8.3vw;
    width: 100%;
  }

  .all-about-me {
    font-size: 1.4em;
  }
}

@media (min-width: 650px) {
  .more-on {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8em
  }
  .more-on div {
    box-sizing: border-box;
    width: 50%;
  }

  .on-design {
    padding-right: 3%;
  }

  .on-development {
    padding-left: 3%;
  }
}

@media (min-width: 720px) {
  .big-talker .number-one {
    font-size: 1.4em;
  }

  .skills {
    font-size: 1.4em;
  }
}

@media (min-width: 820px) {
  .my-big-dumb-faces {
    background-size: 95%;
    background-image: url('../images/tyler-gaw-portraits.jpg');
    padding-top: 0;
    width: 40%;
  }

  .all-about-me {
    padding-right: 4%;
    padding-left: 2%;
    padding-bottom: 1.2em;
    width: 60%;
  }

  .big-talker .number-one {
    font-size: 1.3em;
    text-align: left;
  }

  .more-on div {
    width: 100%;
  }

  .on-design, .on-development {
    padding: 0;
  }
}

@media (min-width: 880px) {
  .the-site {
    padding: 1em 1.2em 1em 1.6em;
  }

  .site-description {
    width: 45%
  }

  .site-description p {
    padding-right: 0.8em;
  }

  .previous-versions {
    width: 55%;
  }
}

@media (min-width: 910px) {
  .more-on div {
    width: 50%;
  }

  .on-design {
    padding-right: 3%;
  }

  .on-development {
    padding-left: 3%;
  }

  .things-i-do {
    width: 98%;
  }

  .services {
    width: 45%;
  }

  .big-bad-words h2 {
    font-size: 7vw;
  }

  .skills {
    padding-right: 2%;
    padding-left: 2%;
    font-size: 1.2em;
    width: 55%;
  }

  .skill-type {
    h4,
    p {
      width: 100%;
    }
  }

  .the-site {
    width: 98%;
  }
}

@media (min-width: 1130px) {
  .skill-type {
    h4 {
      width: 20%;
    }

    p {
      width: 80%;
    }
  }
}

@media (min-width: 1500px) {
  .all-about-me {
    font-size: 1.6em;
  }

  .more-on {
    font-size: 0.9em;
  }

  .skills {
    font-size: 1.4em;
  }

  .site-description {
    width: 35%;
  }

  .previous-versions {
    width: 65%
  }

  .previous-versions li {
    width: 25%;
  }

  .previous-versions a {
    background-size: 165% !important;
  }
}

[data-page='purpose'] [role='main'] {
  padding-top: 1em
}

[data-page='purpose'] [role='main'] h1 {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-size: 21vw;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  word-wrap: break-word;
}

[data-page='purpose'] [role='main'] h1 + p {
  margin-top: 1.1em;
}

[data-page='purpose'] [role='main'] p {
  color: var(--darkerwhite);
  font-size: 1.2em;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 720px;
  padding-bottom: 1.4em;
  width: 93%;
}

[data-page='purpose'] [role='main'] .linkback {
  font-size: 0.9em;
  font-style: italic;
}

@media (min-width: 620px) {

  [data-page='purpose'] [role='main'] p {
    font-size: 1.4em;
  }
}

@media (min-width: 860px) {

  [data-page='purpose'] [role='main'] h1 {
    font-size: 12em;
  }
}

[role='contentinfo'] {
  border-top: 6px solid var(--yellow);
  box-sizing: border-box;
  margin: 1em auto 2em auto;
  max-width: 720px;
  overflow: hidden;
  padding: 1em 0 0.8em 0;
  text-align: center;
  width: 95%
}

[role='contentinfo'] li {
  display: inline-block;
  max-width: 90px;
  width: 25%;
}

[role='contentinfo'] .contact {
  line-height: 1.2;
}

[role='contentinfo'] .contact a {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  display: inline-block;
  font-size: 0.9em;
  font-weight: 500;
  padding: 0.7em;
  text-decoration: none;
}

[role='contentinfo'] .contact a:hover {
  color: var(--offwhite);
}

/**
 * a11y-dark theme for JavaScript, CSS, and HTML
 * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 * @author ericwbailey
 * @repo https://github.com/ericwbailey/a11y-syntax-highlighting
 */

/**
  Some modifications made for tylergaw.com
 */

code[class*="language-"],
pre[class*="language-"],
.e-content p code,
.e-content li code {
	color: #f8f8f2;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	tab-size: 4;
	hyphens: none;
}

/* Code blocks */

pre[class*="language-"] {
	padding: 1em;
	margin-bottom: 1em;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"],
.e-content p code {
	background: #2b2b2b;
}

/* Inline code */

:not(pre) > code[class*="language-"],
.e-content p code {
	padding: 0.1em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #d4d0ab;
}

.token.punctuation {
	color: #fefefe;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #ffa07a;
}

.token.boolean,
.token.number {
	color: #00e0e0;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #abe338;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #00e0e0;
}

.token.atrule,
.token.attr-value,
.token.function {
	color: #ffd700;
}

.token.keyword {
	color: #00e0e0;
}

.token.regex,
.token.important {
	color: #ffd700;
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.code-muted,
.code-muted span {
  color: #B6B6B6 !important;
}

@media screen and (-ms-high-contrast: active) {
    code[class*="language-"],
    pre[class*="language-"] {
	    color: windowText;
	    background: window;
    }

    :not(pre) > code[class*="language-"],
    pre[class*="language-"] {
        background: window;
    }

    .token.important {
        background: highlight;
        color: window;
        font-weight: normal;
    }

    .token.atrule,
    .token.attr-value,
    .token.function,
    .token.keyword,
    .token.operator,
    .token.selector {
        font-weight: bold;
    }

    .token.attr-value,
    .token.comment,
    .token.doctype,
    .token.function,
    .token.keyword,
    .token.operator,
    .token.property,
    .token.string {
        color: highlight;
    }

    .token.attr-value,
    .token.url {
      font-weight: normal;
    }
}

[data-page='error'] [role='main'] {
  padding: 0 4%;
  text-align: center;
}

[data-page='error'] h1 {
  font-family: var(--font-franklin);
  font-weight: 700;
  line-height: 1.1;
  font-size: 44vw;
  line-height: 1;
}

[data-page='error'] h2 {
  font-size: 1.4em;
  line-height: 1.5;
  margin: 0 auto 2em auto;
  max-width: 21em;
}

@media (min-width: 520px) {

  [data-page='error'] h1 {
    font-size: 20vw;
  }
}