<div class="navigation">
  
  <input type="checkbox" id="nav-toggle" class="navigation__checkbox">
  <label for="nav-toggle" class="navigation__button"> 
    <span class="navigation__icon">&nbsp;</span>
  </label>
  
  <div class="navigation__background">&nbsp;</div>
  
  <nav class="navigation__nav">
    
    <ul class="navigation__list">
      <li class="navigation__item">
        <a href="#" class="navigation__link">Link One</a>
      </li>
      <li class="navigation__item">
        <a href="#" class="navigation__link">Link Two</a>
      </li>
      <li class="navigation__item">
        <a href="#" class="navigation__link">Link Three</a>
      </li>
      <li class="navigation__item">
        <a href="#" class="navigation__link">Link Four</a>
      </li>
    </ul>
    
  </nav>
  
  
  
  
  
</div>

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

@mixin respond($breakpoint) {
  @if $breakpoint == tab {
    @media( max-width: 56.25em ){ @content };
  }
  @if $breakpoint == phone {
    @media( max-width: 37.5em ){ @content };
  }
}

@mixin center-all {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

$button-layer: 20;
$nav-layer: 15;
$background-layer: 10;

$color-primary: mix(#6a6100, #fff);
$color-primary-light: lighten($color-primary, 25%);
$color-primary-dark: darken($color-primary, 10%);


$color-black: #000;
$color-white: #fff;

html  {
  font-size: 62.5%;
}
body {
  box-sizing: border-box;
  background-color: $color-primary-dark;
}


.navigation {
 
  &__checkbox {
    display: none;
  }
  
  &__button {
    height: 5rem;
    width: 5rem;
    background-color: lighten($color-black, 15%);
    box-shadow: 0 .33rem .25rem rgba($color-black, .25);
    position: fixed;
    border-radius: 50%;
    z-index: $button-layer;
    top: 5rem;
    left: 5rem;
      &:active, :focus {
        background-color: lighten($color-black, 25%);
      }
  }
  
  &__background {
    height: 5rem;
    width: 5rem;
    position: fixed;
    border-radius: 50%;
    z-index: $background-layer;
    top: 5rem;
    left: 5rem;
    background-image: radial-gradient(circle at center, $color-primary, $color-primary-light);
    z-index: $background-layer;
    transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  &__nav {
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: $nav-layer;
    width: 100%;
    opacity: 0;
    transition: all .8s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  &__list {
    @include center-all;
    list-style: none;
    text-align: center;
    width: 33%;
    
    li:not(:last-child) {
    border-bottom: 1px solid #e6e6e6;
    }
  }
  
  &__item {
    margin: .75rem;
  }
  
  &__link {
    letter-spacing: .5rem;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    
    &:link, &:visited {
      font-size: 2.5rem;
      font-weight: 500;
      padding: 1rem 2rem;
      color: $color-white;
      text-decoration: none;
      text-transform: uppercase;
      background-size: 220%;
      background-image: linear-gradient (
                        120deg, 
                        transparent 0%, 
                        transparent 50%, 
                        $color-white 50% );
      transition: all .65s ease;
        
        span {
          display: inline-block;
          margin-right: 1.5rem;
        }
    }
    
    &:hover, &:active {
      background-position: 100%;
      color: $color-primary-dark;
      transform: scale(1.1);
    }
  }
  
  &__checkbox:checked ~ &__background {
    transform: scale(85);
  }
  
  &__checkbox:checked ~ &__nav {
    opacity: 1;
    width: 100%;
  }
  
  //
}