// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@import 'compass';

//partials
$blue: #3498db;
$green: #27ae60;
$grey: #ecf0f1;
$default: 'Source Sans Pro',arial, san-serif;
$large: 3em;
$med: 2em;
$smll: 1.15em;
$body-color: #7f8c8d;
$radius: 5px;

@mixin center{
  margin-left:auto;
  margin-right:auto;
  display: block;
  }

@mixin thin{
  font-weight:100;
  letter-spacing:-2px;
}

@mixin ease{
  -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}


body{
  background:$grey;
  font-family: $default;
  margin-left: 10%;
  margin-right: 10%;
  color: $body-color;
}


h1{
    font-size:$large;
    color: $blue;
  }
  
h2{
    font-size:$med;
    color: $blue;
  }
  
  
.container{
  min-width: 90%;
  padding-left: 10%;
  padding-right: 10%;
}  
  
//list styles
ul{ 
  margin-left:35px;
  li{
  max-width: 80%;
  padding-bottom:15px;  
  }
}

//buttons
.ghost-button{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border: 1px solid $blue;
  @include border-radius($radius);
  @include center;
  max-width: 275px;
  background-color: transparent;
  outline: none;
  font-size: $smll;
  color: $blue;
  text-decoration: none;
   @include ease;
}

.ghost-button:hover{
  color:white;
  background-color:$blue;
 
}


@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
    color: $blue;
    @include thin;
  }
}