html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0; }

html { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

*, *:before, *:after {box-sizing: inherit}

.visually-hidden:not(:focus):not(:active) { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; /* added line */}
img { display: block; max-width: 100%; }
html { font-size: 62.5%; }
a, a:visited { text-decoration: none; color: inherit }
ul { list-style: none; padding: 0;}
.wrapper { max-width: 980px; width: 90%; margin: 0 auto; }

/* Primary Red: #EF414C */
/* Secondary red: #a93f55 */
/* Dark: #19323c */
/* White: #f3f7f0 */
/* Brown thing: #8c5e58 */

body {
  background-color: #f3f7f0;
  color: #EF414C;
  font-family: sans-serif;
  position: relative;
}

h1 {
  font-size: 4rem;
  margin: 0;
  color: #19323c;
  position: absolute;
  top: 200px;
  z-index: 10;
  text-transform: uppercase;
}
h1::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;

  position: relative;
  background-color: #19323c;
  bottom: 0px;
  left: 10px;
}
.header-tree {
  position: absolute;
  height: 100vh;
  right: 0;
  top: 0;
}
.header-tree {
  stroke-dashoffset: 1500px;
  stroke-dasharray: 1500px;
  /* animation: path-in 10s forwards; */
}
.activate-tree {
  animation: path-in 10s forwards;
}
@keyframes path-in {
  0% {
    stroke-dashoffset: 1500px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
main {
  max-height: 0;
  overflow:hidden;
  /* padding-top: 250px; */
  transition: max-height 5s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
  color: #19323c;
}
.extend-main {
  max-height: 200vh;
}
.character {
  width: calc(3010px / 6);
  height: calc(1400px / 2);
  background-color: #EF414C;
  transform: scale(0.5);
  position: absolute;
  left: 0;
  top: 0;
}

/* <!-- 6 columns by 2 rows --> */
.character-sheet {
  width:100%;
  height: 100%;
  background: url('../assets/spritesheet.png');
  background-position-x: calc(3010px / 6);
  background-position-y: 0; 
  animation: character-sheet-anim 1s infinite steps(1);
}

@keyframes character-sheet-anim{
  0% {
    background-position-x: calc(3010px / 6);
  }
  16% {
    background-position-x: calc(3010px / 6 * 2);
  }
  32% {
    background-position-x: calc(3010px / 6 * 3);
  }
  48% {
    background-position-x: calc(3010px / 6* 4);
  }
  64% {
    background-position-x: calc(3010px / 6 * 5);
  }
  80% {
    background-position-x: calc(3010px / 6 * 6);
  }
  96% {
    background-position-x: calc(3010px / 6);
  }
}


.crop {
  width: calc(501px/2);
  height: calc(700px/2);
  overflow: hidden;
  background-color: #EF414C;
  position: relative;
  left: -50px;
  top: 150px;
  cursor: pointer;
  z-index: 8;
}

.inner {
  height: 700px;
  width: calc(3010px / 2);
  position: absolute;
  left: 0;
  bottom: 0;
}

.inner:hover {
  animation: character-sheet-anim-position 2s infinite steps(1) forwards;
}

@keyframes character-sheet-anim-position{
  0% {
    left: calc(0);
    bottom: -350px;
  }
  8% {
    left: calc(-250px);
  }
  16% {
    left: calc(-250px * 2);
  }
  24% {
    left: calc(-250px * 3);
  }
  32% {
    left: calc(-250px * 4);
  }
  40% {
    left: calc(-250px * 5);
  }
  48% {
    left: 0;
    bottom: 0;
  }
  56% {
    left: calc(-250px);
    /* bottom: 700px; */
  }
  64% {
    left: calc(-250px * 2);
    /* bottom: 700px; */
  }
  72% {
    left: calc(-250px * 3);
    /* bottom: 700px; */
  }
  80% {
    left: calc(-250px * 4);
    /* bottom: 700px; */
  }
  88% {
    left: calc(-250px * 5);
    /* bottom: 700px; */
  }
  96% {
    left: 0;
    bottom: -350px;
  }
}
/* then create a mixin for creating an animation??? */