* {
  margin: 0;
  padding: 0;
}

body {
  background: #e9e9e9;
  overflow: hidden;
  
}

$blue : #1CAFF6;
$notif-blue : #1392D0;
$blue-hover : #1493D1;
$transition : .35s;


header {
  display: flex;
  align-items: center;
  background-color: #1CAFF6;
  background-color: rgba(32, 166, 231, 0.8);
  background-image: linear-gradient(to bottom, #20A8E9, rgba(30, 158, 220, 0.5));
  padding: 0 50px;
}

main {
  background: white;
  height: 100vh;
  border-radius: 10px;
  margin: 30px 55px;
  background: 0 0 25px rgba(0, 0, 0, 0.04);
}

nav {
  flex: 1;
  font: 500 15px/20px "museo-sans-rounded", sans-serif;
  user-select: none;
  overflow: hidden;
  padding: 17px 0;
}

a {
  display: inline-block;
  padding: 10px 18px 8px;
  margin: 0 2px;
  border-radius: 100px;
  color: white;
  cursor: pointer;
  animation: 
    nav-in 
    $transition 
    cubic-bezier(.2,.7,.2,1.1)
    backwards;
  transition: background $transition;

  &:hover {
    background: $blue-hover;
    transition: 0;
  }
  &:active {
    background: shade($blue-hover, 17%);
  }
  
  @for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      animation-delay: ($i * ($transition/3)) + $transition;
    }
  }
}

@keyframes nav-in {
  from {
    transform:
      translate3d(0px,100px,0);
  }
}


.notif {
  display: inline-block;
  border-radius: 50%;
  background: $notif-blue;
  padding: 7px 9px;
  width: 40px;
  height: 40px;
  border: 0;  
  cursor: pointer;
  transition: $transition;
  
  &:hover {
    background: shade($notif-blue, 25%);
    transition-duration: $transition/4;
    transform: scale(1.1);
  }
  
  &:active, &:focus {
    transition-duration: 0;
    transform: scale(1.15);
    background: shade($notif-blue, 40%);
    outline: 0;
  }
  
  
  .icon {
    display: inline-block;
    width: 22px;
    height: 26px;
    background-image: url("//d7mj4aqfscim2.cloudfront.net/images/icon-sprite@2x_mv_2fec86002cd3cf1d6adc11360fc9bb78.png");
    animation: 
      notif 
      2s 
      cubic-bezier(.17,.67,.4,1.17) 
      infinite;
    background-size: 1000px 1000px;
    background-position: -340px -40px;
  }
}

@keyframes notif {
  10%, 30% { 
    transform: rotate(-25deg);
  }
  20%, 40% { 
    transform: rotate(25deg);
  }
  50%, 100% { 
    transform: none; 
  }
}









@font-face{font-family:'museo-sans-rounded';src:url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.eot');src:url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.eot?#iefix') format('embedded-opentype'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.woff') format('woff'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.ttf') format('truetype'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-300-webfont.svg#museo_sans_rounded300') format('svg');font-weight:300;font-style:normal}@font-face{font-family:'museo-sans-rounded';src:url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.eot');src:url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.eot?#iefix') format('embedded-opentype'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.woff') format('woff'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.ttf') format('truetype'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-500-webfont.svg#museo_sans_rounded500') format('svg');font-weight:500;font-style:normal}@font-face{font-family:'museo-sans-rounded';src:url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.eot');src:url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.eot?#iefix') format('embedded-opentype'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.woff') format('woff'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.ttf') format('truetype'),url('//d7mj4aqfscim2.cloudfront.net/proxy/fonts/museo/museosansrounded-700-webfont.svg#museo_sans_rounded700') format('svg');font-weight:700;font-style:normal}