@import 'compass/utilities';
@import 'compass/css3/transition';

body, html {
  margin: 0;
  padding: 0;
}

.timer {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 0.5;

  font-size: 30px;

  font-family: Courier New, monospace;

  &.hide {
    display: none;
  }

  &.running {
    color: #c00;
  }
}

#slides-container {
  position: absolute;
  width: 100%;
  height: 100%;
  @include clearfix;
}

body.loading {
  #slides-container {
    opacity: 0;
  }
}

#slides {
  position: absolute;
  top: 0;
  height: 100%;

  .slide {
    @include float-left;
    position: relative;
    height: 100%;

    .content {
      text-align: center;

      position: absolute;
      left: 5%;
      width: 90%;

      * {
        line-height: 105%;
      }

      h1, h2, h3 {
        margin: 0;
      }

      h1 {
        font-size: 6.5em;
      }

      h2 {
        font-size: 4em;
      }

      h3 {
        font-size: 2em;
      }

      div.highlight {
        text-align: left;

        padding: 1em;

        font-size: 160%;

        pre {
          margin: 0;
        }
      }
    }

    &.style-smaller {
      div.highlight {
        font-size: 125%;
      }
    }

    &.style-larger {
      div.highlight {
        font-size: 200%;
      }
    }

    &.style-even-larger {
      div.highlight {
        font-size: 250%;
      }
    }
  }
}