// Some settings:
$markingColor: #2ecc71;
$buttonBaseColor: #95a5a6;
$buttonAltColor:#9b59b6;
$buttonWarnColor:#e74c3c;
$maxWidth:960px;
$twitterColor:#00aced;
$includeFontello:false;

@import 'lib/animations';
@import 'lib/highlighting';
@import '~flexcss/assets/packages/tooltip';

body {
  font-family: "Roboto", sans-serif;
  padding:0;
  margin:0;
  font-weight:300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.highlight {
  margin:0;
  pre {
    max-width: $maxWidth;
    margin: 0 auto;
  }
}

code {
  font-size:1.3rem;
}

.wrapper {
  max-width:$maxWidth;
  margin:0 auto;
}

strong {
  font-weight:500;
}

header {
  padding:10px;
}

.text-center {
  text-align:center;
}

.subline {
  font-size:2rem;
  font-weight:100;
}

.presentation {
  background: rgba(#34495e,.7);
  color:#fff;
  padding:40px;
}

h1, h2 {
  font-family: "Shadows Into Light", sans-serif;
}

p {
  font-size:1rem;
  line-height:1.6;
}

.button, button {
  font:inherit;
  font-weight:400;
  background: $buttonBaseColor;
  border:none;
  padding:10px 15px;
  border-radius:5px;
  font-size:1rem;
  cursor:pointer;
  color:#fff;
  transition:background .5s ease, transform .5s ease;
  &:hover {
    background: lighten($buttonBaseColor, 10%);
    transform:translate3d(0,4px,0);
  }
  margin:10px;
  display:inline-block;
  text-decoration: none;
  > * {
    pointer-events:none;
  }

  &.alt {
    background:$buttonAltColor;
    &:hover {
      background:lighten($buttonAltColor, 10%);
    }
  }

  &.warn {
    background:$buttonWarnColor;
    &:hover {
      background:lighten($buttonWarnColor, 10%);
    }
  }

  &.twitter {
    background:$twitterColor;

    &:hover {
      background: lighten($twitterColor, 10%);
    }
  }
}

.marking {
  transition:background .5s ease;
  background: $markingColor;
  cursor:pointer;
}

.deleted {
  transition:background .5s ease;
  background: none !important;
}

.marking .marking {
  background: darken($markingColor, 10%);
}

.marking .marking .marking {
  background: darken($markingColor, 20%);
}

.marking.marklib--hover .marking,
.marking.marklib--hover {
  background: lighten($markingColor, 25%) !important;
}

::selection {
  background: lighten($markingColor, 20%);
}

pre {
  margin:0;
}
pre > code {
  display:block;
  font-family: monospace;
  overflow-y:auto;
  padding:30px;
  -webkit-overflow-scrolling:touch;
}

.animate .wrapper {
 @extend .fadeInDownSlow;
}

.tight {
  margin-bottom:0;
}

.marking.bubble {
  animation-name: bubble;
  animation-duration:.3s;
}

@media (max-width:480px) {

  .presentation {
    padding:15px;
  }

  .hide-small {
    display:none;
  }
}