* {
  box-sizing: border-box;
}

@font-face {
  font-family: Gotham;
  src: url('/assets/fonts/Gotham-Book.otf');
}

@font-face {
  font-family: Gotham;
  font-style: italic;
  src: url('/assets/fonts/Gotham-BookIta.otf');
}

@font-face {
  font-family: Gotham;
  font-weight: bold;
  src: url('/assets/fonts/Gotham-Bold.otf');
}

@font-face {
  font-family: Gotham;
  font-style: italic;
  font-weight: bold;
  src: url('/assets/fonts/Gotham-BoldIta.otf');
}

.cf:after, .cf:before {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

.left {float: left}
.right {float: right}

html, body {height: 100%; margin: 0}

body:not(#home) {
  background: linear-gradient(to right, #00AECF 0%, #00AECF 320px, #FFFFFF 320px, #FFFFFF 100%) repeat-y scroll 0 0 rgba(0, 0, 0, 0);
  color: #002b34; 
  font: 14px/1.5em 'Gotham', sans-serif;

  .accordion {
    display: block;
    color: #002b34;

    &:hover {cursor: pointer}
  
    & + ul {
      display: none;
    }
  }
  
  img {border: 0}
  
  h1,h2,h3,h4,h5,h6 {font-weight: lighter}
   
  h1 {
    line-height: 1.3em;
  }

  h2 {
    margin: 20px 0 0 20px;
    text-decoration: underline
  }
  
  h3, h4 {margin-left: 20px}
  
  h3 {
    &:hover a {
      transition: 0.3s;
      margin-left: 10px;
    }
    a {
      text-decoration: none;
      transition: 0.3s;
    }
  }
    
  h4 {font-style: italic}

  &#gallery {
    section {
      width: calc(100% - 320px);
      padding: 0;
      max-width: inherit;
    }
    
    aside {margin-right: 20px}
  }
    
  section {
    float: left;
    max-width: 600px;
    padding-right: 20px;
    width: calc(100% - 340px);
    
    a {color: #00AECF}
    & > p, & > div > p {margin-left: 30px}
    
    img, video {
      max-width: 100%;
      max-height: 100%
    }

    ul {
      li {
        line-height: 1.5em;  
        a {
          list-style-type: none;
          text-transform: lowercase
        }
      }
    }

    .description {
      display: block
    }

    h1:first-child {
      margin-top: 0;
      padding-top: 20px;
      text-transform: lowercase;
      font-size: 35px;
      color: #00aecf;
    }
  }

  #sidebar {
    float: left;
    width: 300px;
    text-align: right;
    font-size: 15px;
    color: #FFF;
    text-transform: lowercase;
    margin-right: 40px;

    .contact {
      position: static;
      margin-top: 50px;
      span.github {display: none}
    }

    & > a > svg {margin: 10px -3px 20px 0;}
    li:hover a {margin-right: 20px}

    strong {
      font-weight: lighter;
      text-transform: lowercase;
    }

    a, li {
      color: #002b34;
      transition: 0.3s;
      text-decoration: none
    }

    ul {
      padding: 0;
      li {list-style-type: none}
    }
  }
    
  article {
  	margin: 0 auto;
  	width: 895px;
  	padding-top: 360px
  }
  
  .hamburger, #sidebar label {display: none}

  @media screen {
    .no-screen {display: none}
  }
  
  @media print, screen and (max-width: 640px) {
    background: #FFF;
  
    #sidebar {
      position: static; 
      top: 0; 
      left: 0; 
      height: auto; 
      width: 100%; 
      background: #00AECF; 
      text-align: left;
  
      label {
        background: #002B34;
        height: 50px;
        margin: 15px 15px 0 0;
        cursor: pointer;
        display: block;
        float: right;
        padding: 10px;
  
        path {fill: #FFF}
      }

      & > a > svg   {
        width: 220px;
        margin: 0 40px 0 20px;
      }

      nav {
        position: relative;
        left: -20px;
        text-align: right
      }
    }
  
    section {margin-left: 20px; float: left; width: auto; padding: 0 20px 0 10px}

    &#gallery section {
      width: 100%;
      margin-left: 0;
      padding: 0
    }

    #sidebar .contact {position: static; margin-top: 50px}
  
    input[type=checkbox]:checked.hamburger ~ nav {display: block}
    input[type=checkbox].hamburger ~ nav {display: none}
    input[type=checkbox].hamburger:checked ~ label {background: #BBB}
  }

  @media print {
    .no-print {display: none}

    #sidebar {
      font-size: 14px;
      nav {
        & > strong, & > ul, & > br, & > .accordion {display: none}
      }
      
      label {display: none}
      & > a {float: left}
      .contact {
        margin-top: 20px;
        .resume {display: none}
        .separator {display: none}
        span.github {display: inline}
        a.github {
          span {display: none}
          &:after {content: 'tfreedman'}
        }
      }
    }
  
    section {
      margin-left: 0;
      max-width: 100%;
      h1 {display: none}
      h2 {margin-bottom: 5px}
      p, li {font-size: 12px; line-height: 1.5em}

      h3 {
        margin: 0 0 0 20px;

        .description {
          display: inline;
        }
      }
      small {float: right; font-style: italic}

      .summary {
        > div {width: calc(50% - 10px); display: inline-block}
        .left:not(:last-child) {padding-right: 50px}
      }
    }

    input[type=checkbox].hamburger ~ nav {display: inherit}
  }
}