@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

:root {
  --blue:   #0F86CF;
  --green:  #248655;
  --purple: #6426A1;
  --red:    #e4200c;
  --black:  #2c2a25;
  --black2: #32302d;
  --white:  #fefffe;
  --gray1:  #cdcecd;
  --gray2:  #3a3838;

  --whale: 5.063em;
  --mastodon: 3.375em;
  --elk: 2.125em;
  --deer: 1.325em;
  --dog: 1.1em;
  --rabbit: 0.666em;
  --vole: 0.420em;
  --hamster: 0.296em;
  --shrew: 0.198em;

  --gradient: linear-gradient(38deg, var(--blue), var(--green));
  --elevation: 2px 3px 10px rgba(0,0,0,.5);
  --num-columns: 1;
  --experiment-columns: 1;
}

@media (min-width: 620px) {
  :root {
    --num-columns: 2;
  }
}

@media (min-width: 800px) {
  :root {
    --experiment-columns: 2;
  }
}

@media (min-width: 960px) {
  :root {
    --num-columns: 3;
  }
}


@media (min-width: 1400px) {
  :root {
    --num-columns: 4;
  }
}

@media (min-width: 1600px) {
  :root {
    --experiment-columns: 3;
  }
}

*, *:before, *:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Roboto, Helvetica, sans-serif;
}

body {
  font-size: var(--dog);
  color: var(--black2);
  margin: 0 auto;
  background: black;
}

h1, h2, h3, h4, h5, h6, p {
  color: inherit;
  margin: 0 0 1rem;
  padding: 0;
}

p {
  max-width: 760px;
  margin: 0 auto;
}

h1, h2, h3, h4 , h5, h6 {
  font-family: Roboto, Helvetica, sans-serif;
  font-weight: 500;
  /* max-width: 760px; */
  margin: 0 auto;
  padding: 0 1rem;
}

h1 {
  font-size: var(--elk);
}

h2 {
  font-size: var(--elk);
  font-weight: 300;
  margin: 2rem 0;
  letter-spacing: .42rem;
  color: var(--green);
}

h3 {
  font-size: var(--dog);
}


section {
 padding: 1em 0;
}

a {
  position: relative;
  display: inline-block;
  color: var(--blue);
  text-decoration: none;
  transition: transform .3s;
}

a:before {
  content: '';
  width: 0;
  height: 1px;
  background: white;
  transition: background .25s, width .25s;
  position: absolute;
  bottom: .1em;
  left: 0;
  opacity: .5;
  z-index: -1;
}

a:hover:before {
  background: var(--blue);
  width: 100%;
}

code {
  font-size: .85rem;
}

.hr {
  border-bottom: 1px solid var(--black2);
  width: calc(100% - 2rem);
  max-width: 1280px;
  margin: 0 auto;
  opacity: .3;
  margin-bottom: 1rem;
}

/** Sections **/

header {
  padding: 4rem 1rem 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  background: var(--gradient);
  color: white;
  box-shadow: inset 0px -20px 40px -20px rgba(0,0,0,.15);
  transition: font-size 75MS;
  flex-wrap: wrap;
}

header img {
  border-radius: 1000rem;
  margin-right: .75em;
  width: 6em;
  height: 6em;
  border: 3px solid white;
}

header h1 span {
  font-weight: 300;
}

header h1,
header h2 {
  text-shadow: 4px 8px 10px rgba(0,0,0,0.042)
}

header h2 {
  opacity: .84;
  color: inherit;
  font-size: var(--deer);
  margin: 0;
  letter-spacing: 0rem;
}

.contact {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1rem;
  line-height: 2rem;
  display: flex;
  align-items: center;
  font-size: .75rem;
}

.contact a,
.contact span {
  color: rgba(255,255,255,.63);
  text-decoration: none;
  font-weight: 300;
}

.contact span {
  margin: 0 .42rem;
}
.intro {
  background: var(--gradient);
  height: 30vh;
  color: white;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: font-size 75MS;

}

.intro p {
  font-size: var(--elk);
}

@media (max-width: 600px) {
  header {
    font-size: .75em;
  }

  .intro {
    font-size: .75em;
  }
}

img[alt="Google"] {
  height: 1.5em;
  vertical-align: middle;
}

.work {
  --border-radius: 1.5rem;
  margin-top: -2rem;
  background: white;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  overflow: hidden;
  padding-bottom: 25vh;
}

.work h2 {
  color: var(--blue);
  padding-left: 1rem;
  text-shadow: 2px 4px 3px rgba(0,0,0,.021);
  letter-spacing: .21rem;
}

.grid {
  column-count: var(--num-columns);
  column-gap: 1rem;
  padding: 1rem 0;
  
}

.figure {
  padding: .5rem 0;
  break-inside: avoid;
}

figure {
  break-inside: avoid;
  flex-basis: calc(100% / var(--num-columns) - calc(1rem * var(--num-columns)));
  margin: .5rem .5rem;
  padding: 1rem;
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--black);
  color: var(--white);
  border-radius: .25rem;
  box-shadow: var(--elevation);
}

figure:first-of-type {
  top: 0;
}

figure img {
  width: 100%;
  border-radius: .25rem;
}

figure img + img {
  margin-top: .5rem;
}

figcaption {
  padding: 1rem 0 1rem 1.5rem;
  margin: 1rem 0;
  border-left: 3px solid var(--green);
  font-weight: 300;
  flex: 0;
  display: flex;
  align-items: center;
}

.experiments {
  --border-radius: 1000rem;
  overflow: hidden;
  position: relative;
  top: 2rem;
  padding-top: 12rem;
  margin-top: -25vh;
}

.experiments h2,
.experiments .grid {
  background: black;
  margin-bottom: 0;
}

.experiments:before {
  content: '';
  display: block;
  position: absolute;
  top: 8rem;
  height: 25vh;
  transform: rotateZ(-4.20deg);
  background: black;
  width: 150%;
  transform-origin: bottom left;
  z-index: 0;
}

.experiments h2 {
  color: var(--blue);
  text-align: center;
  height: 24vh;
  z-index: 1;
  position: relative;
  /* text-shadow: 1px 1px 1px rgba(255,255,255,.34),
    1px 1px 1px rgba(255,255,255,.31),
    2px 1px 1px rgba(255,255,255,.28),
    3px 2px 1px rgba(255,255,255,.25),
    3px 2px 1px rgba(255,255,255,.22),
    4px 3px 1px rgba(255,255,255,.19),
    5px 3px 1px rgba(255,255,255,.16); */
}

.experiments .grid {
  column-gap: .5rem;
  column-count: var(--experiment-columns);
}

.experiments figure {
  padding: 0;
  border-radius: 0;
  margin: 0;
  top: 0;
  box-shadow: none;
}

.experiments figure + figure {
  margin-top: .5rem;
}

.experiments img {
  border-radius: 0;
}