@import "_normalize";
@import "compass";


$slide-width: 1280px;
$slide-height: 720px;

$main-text: #4a2c0a;
$base-font-size: 36px;
$mega-font-size: 80px;
$strong-color: #566b15;
$background-color: #ffdfdf;

html, body {
  height: 100%;
  @include background-image(linear-gradient(to bottom, $background-color, white));
}

h1 {
  font-size: $mega-font-size;
  margin: 0.3em 0;
}

h2 {
  font-size: $mega-font-size / 12 * 9;
  margin: 0.20em 0;
}

strong {
  color: $strong-color;
}

li {
  line-height: 3em;
}

.deck {
  position: relative;
}

.slide {
  width: $slide-width;
  height: $slide-height;
  margin: 0 auto;
  color: $main-text;
  font-size: $base-font-size;
  //border: 1px solid black;
  overflow: hidden;

  ul {
    display: inline-block;
    width: 40%;
    .page-2 &, .page-3 &, .page-13 & {
      width: auto;
    }
  }

  h2 {
    .page-6 &{
      margin: 1em 0;
    }
  }

  pre, code {
    margin: 0;
    overflow: visible;

    .page-26 & , .page-29 & {
      font-size: 0.80em;
    }
  }

  img {
    display: block;
    margin: 0 auto;
    width: $slide-width;
    .page-1 & {
      width: 882px;
    }
  }
}