@import 'breakpoints.less';

body{ 
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
}

.page {
  margin: 0 auto;
  .hero {
    padding: 2rem 1rem;
    @media @md {padding: 2rem 0;}
  }
  
  .content, .hero .main, .hero .tryit{
    @media @md {
      width: 80%;
      margin: 0 auto;
    }
  }
  .content {
    padding: 1rem;
    p {max-width: 35rem;}
  }
  
}

h1, h2, h3, h4 {
  font-weight: 700;
  
}
h2 {border-bottom: 1px solid #eee;}

code {
  background-color: #eee;
  border-radius: .25rem;
  font-family: monospace;
  font-size: .9em;
  padding: .1rem .3rem;
}
pre {
  padding: 1rem;
  background-color: #eee;
 code {
    background-color: transparent;
  }
}
a {font-weight: 400;}
.fineprint {font-size: .8em; color: #888;}

.hero {
  color: #fff;
  background-color: #000;
  @media @md {text-align: center;}
  background: radial-gradient(#666 5%, black 100%); /* Standard syntax */
  
  .main {
    h1 {
      text-transform: uppercase; 
      font-weight: 700;
      font-size: 3rem;
      margin: 0;
      @media @md {font-size: 5rem;}
      
      text-shadow:0px 0px 0 rgb(205,205,205),0px 1px 0 rgb(180,180,180),0px 2px 0 rgb(155,155,155),0px 3px 0 rgb(129,129,129),0px 4px 0 rgb(104,104,104),0px 5px 0 rgb(79,79,79), 0px 6px 0 rgb(54,54,54),0px 7px 6px rgba(0,0,0,0.6),0px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
    }
    p {font-size: 1.5rem;}
  }
  .tryit {
    input, textarea {font-family: monospace;}
    text-align: left;
    h3{
      font-weight: 200; 
      color: #ccc; 
      font-size: 1.1rem;
      @media @md {text-align: center;}
    }
    .controls, button {margin-top: 1rem;}
    .submit {@media @md {text-align: right;}}
  }

}