<meta name="theme-color" content="#00796B">
<div class="content">
  <div class="flex-container">
    <div data-1000="transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg) scaleX(1) scaleZ(1) scaleY(1);" data-2000="transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scaleX(20) scaleZ(20) scaleY(20);"class="glowing-box">
      <div class="box-face right-side"></div>
      <div class="box-face front"></div>
      <div class="box-face left-side"></div>
      <div class="box-face bottom"></div>
      <div class="box-face back"></div>
      <div data-500="transform: translateY(-50px) translateX(50px) rotateX(90deg) rotateZ(0deg) rotateY(0deg);" data-1000="transform: translateY(-50px) translateX(50px) rotateX(90deg) rotateZ(0deg) rotateY(225deg);" class="top-flap top-right"></div>
      <div data-500="transform: translateY(-50px) translateX(-50px) rotateX(90deg) rotateZ(180deg) rotateY(0deg);" data-1000="transform: translateY(-50px) translateX(-50px) rotateX(90deg) rotateZ(180deg) rotateY(225deg);" class="top-flap top-left"></div>
      <div data-0="transform: translateY(-50px) translateZ(-50px) rotateX(90deg) rotateZ(270deg) rotateY(0deg);" data-1000="transform: translateY(-50px) translateZ(-50px) rotateX(90deg) rotateZ(270deg) rotateY(225deg);" class="top-flap top-back"></div>
      <div data-0="transform: translateY(-50px) translateZ(50px) rotateX(90deg) rotateZ(90deg) rotateY(0deg);" data-1000="transform: translateY(-50px) translateZ(50px) rotateX(90deg) rotateZ(90deg) rotateY(225deg);" class="top-flap top-front"></div>
    </div>
    <div class="scroll-instruction" data-50="opacity: 1;" data-100="opacity:0;">
      <span>
        Scroll Down
      </span>
    </div>
  </div>
  <div id="box-content" class="box-content" data-1500="opacity: 0;" data-2000="opacity: 1;">
    <div id="resume-content" class="resume-content">
      <header class="resume-header">
        <div class="resume-header-content">
          <h1>Caleb Doucet</h1>
          <p><a href="tel:+15064717547">(506) 471-7547</a></p>
          <p><a href="mailto:doucet.caleb@gmail.com">Doucet.Caleb@gmail.com</a></p>
        </div>
      </header>
      <section class="resume-chapter">
        <h2>Summary</h2>
      </section>
    </div>
  </div>
</div>
<nav class="resume-nav">
  <ul>
    <li>
      <a data-menu-top="2000" data-menu-duration="2000" href="#box-content">Get Started</a>
    </li>
    <li>
      <a href="#education">Education</a>
    </li>
    <li>
      <a href="#box-content">Experience</a>
    </li>
  </ul>
</nav>

$primary: #009688;
$primary-dark: #004D40;
$primary-light: #80CBC4;

$accent: #FFC400;
$accent-fallback: #FFE57F;

@import "compass";
$box-width: 100px;
$translate: $box-width / 2;
$animation-time: 3s;
$animation-delay: 0s;
$glow: $accent-fallback;
$box-outer-color: $accent-fallback;
$box-inner-color: darken($box-outer-color, 30);
$border-color: darken($box-outer-color, 20);

@mixin get-flap-transform($i, $y-rotation) {
  $translateY: translateY(-$translate);
  $secondary-translate-amount: if(floor(($i - 1) / 2) == 0, $translate, -$translate);
  $secodary-translate: if($i % 2 == 0, translateZ($secondary-translate-amount), translateX($secondary-translate-amount));
  $rotateX: rotateX(90deg);
  $rotateZ: rotateZ(($i - 1) * 90deg);
  $rotateY: rotateY($y-rotation);
  transform: $translateY $secodary-translate $rotateX $rotateZ $rotateY;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body{
  background: $primary-dark;
  font-size: 62.5%;
  color: black;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 1em 0;
}

h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.4em;
}
h3 {
  font-size: 1.8em;
}
h4 {
  font-size: 1.4em;
}
h5 {
  font-size: 1.2em;
}
h6 {
  font-size: 0.8em;
}

a {
  color: $accent;
  text-decoration: none;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

$resume-nav-background: #333;
.resume-nav {
  border-radius: 4px;
  position: fixed;
  right: 1em;
  top: 1em;
  font-size: 1.6em;
  display: block;
  z-index: 900;
  overflow: hidden;
  background: $resume-nav-background;
  color: #fff;
  h4 {
    padding: 0.6em 1.2em;
    margin: 0;
  }
  li {
      border-bottom: 1px solid darken($resume-nav-background, 10);
      border-top: 1px solid lighten($resume-nav-background, 10);
      &:last-child {
        border-bottom: 0;
      }
    a {
      text-align: center;
      color: #fff;
      padding: 0.6em 1.2em;
      display: block;
      background: $resume-nav-background;
      transition: background 0.4s ;
      &:hover {
        background: lighten($resume-nav-background, 3);
      }
    }
  }
}

.content {
  padding: 3em 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.flex-container{
  flex-direction: column;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100%;
}

.scroll-instruction {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: $box-width + 20px;
  text-align: center;
  color: white;
  font-size: 3em;
  width: 100%;
  $primary-darker: darken($primary-dark, 10);
  $primary-less-dark: lighten($primary-dark, 10);
  &:before, &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
  }
  &:before {
    height: 1px;
    background-color: $primary-darker;
    @include filter-gradient($primary-darker, $primary-darker, horizontal);
    @include background-image(linear-gradient(left, $primary-dark 1%, $primary-darker 50%, $primary-dark 100%));
  }
  &:after {
    height: 2px;
    margin-top: 1px;
    background-color: $primary-less-dark;
    @include filter-gradient($primary-less-dark, $primary-less-dark, horizontal);
    @include background-image(linear-gradient(left, $primary-dark 1%, $primary-less-dark 50%, $primary-dark 100%));
  }
  span {
    background: $primary-dark;
    display: inline-block; 
    padding: 0 20px;
    z-index: 90;
    position: relative;
  }
}


.glowing-box {
  width: $box-width;
  height: $box-width;
  margin: auto;
  position: relative;
  transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
  transform-style: preserve-3d;
  perspective-origin: 50% 50%;
  text-align: center;
  .box-face, .top-flap{
    width: $box-width;
    height: $box-width;
    background: $box-outer-color;
    position: absolute;
  }
  .top-flap {
    width: 50px;
    transform-origin: 100% 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2); 
    animation-duration: $animation-time;
    animation-delay: $animation-delay;
    animation-iteration-count: 1;
  }
  .right-side {
    border: 1px solid $border-color;
    transform: translateX($translate) rotateY(90deg);
  }
  .front {
    border: 1px solid $border-color;
    transform: rotateY(0deg) translateZ($translate);
  }
  .left-side{
    $left-dark: darken($box-inner-color, 40);
    $left-light: $box-inner-color;
    background: $left-light;
    @include filter-gradient($left-light, $left-dark, horizontal);
    @include background-image(linear-gradient(right top, $left-light 0%,$left-dark 100%));
    border: 0;
    box-shadow: -15px 10px 60px -15px $glow;
    transform: translateX(-$translate) rotateY(90deg);
  }
  .back{
    $back-dark: $box-inner-color;
    $back-light: lighten($box-inner-color, 30);
    background: $back-light;
    @include filter-gradient($back-light, $back-dark, horizontal);
    @include background-image(linear-gradient(right top, $back-light 0%,$back-dark 100%));
    border: 0;
    box-shadow: 15px 10px 60px -15px $glow;
    transform: translateZ(-$translate) rotateY(0deg) ;
  }
  .bottom {
    $bottom-dark: darken($box-inner-color, 40);
    $bottom-light: $box-inner-color;
    background: $bottom-light;
    @include filter-gradient($bottom-light, $bottom-dark, horizontal);
    @include background-image(linear-gradient(top, $bottom-light 0%,$bottom-dark 100%));
    border: 0;
    box-shadow: 0 0 60px $glow;
    transform: translateY($translate) rotateX(90deg) ;
  }
}

$sides: right, front, left, back;
@for $i from 1 to 5 {
  .top-#{nth($sides, $i)}{
    /* animation-name: open-#{nth($sides, $i) }-flap;*/
    @include get-flap-transform($i, 0deg);
  }
}

.box-content{
  opacity: 1;
  background: #FFF;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.resume-content {
}

.resume-header {
  padding: 20px 0;
  background: $primary;
  color: #fff;
  p {
    font-size: 1.6em;
    opacity: 0.8;
  }
  a {
    color: #fff;
  }
}

.resume-header

.resume-header-content {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

var s = skrollr.init();


skrollr.menu.init(s, {
  animate: true,
  easing: 'swing'
});