<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<div id = "app">





  <div id = "cc" >programming language   </div>


</div> <!-- end app -->

/*SETUP*/

html {
box-sizing: border-box;

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

background-color: #000712;
/*   #001432; */
font-family: 'Oswald';
color:#FFFFF8;
font-size: 5.1vw;
width: 100%;
margin:auto;
}
@media (max-width: 599px) {
body {
/*  background: purple; */
/* font-size: 3.5vw; */
}
}

@media (min-width: 900px) {
body{
/* font-size: 1.5vw;  */
}
}

/*CONTAINER FOR EVERYTHING*/



#app{
/* background-color: rgba(68, 68, 68, .05); */
width : 100%;
margin-left: auto;
margin-right: auto;
height: 70vh;
margin-bottom: 15vh;
margin-top: 15vh;
/*  border: solid 1px #84FFA6; */
}

@media (min-width: 900px) {
#app{
/*   width: 80%; */

}
}

@media (min-width: 1600px) {
#app{
/*   width: 70%; */

}
}


#cc{
/* border: solid 5px #0F3B72; */
position: relative;
width: 100%;
margin: auto;
  padding:.5em;
  height: 80%;
/*   margin-top: 5em; */
  font-size: 150%;
  top: 1em;

}


.byWord{
/* position: absolute; */
/* text-align: center; */
float: left;
  
text-transform: uppercase;
/* padding:.1em; */
  color: #FFFFF8;
/* border: solid 1.7em rgba(168, 34, 34, 1); */
/* border: solid 1.5em rgba(8, 103, 136, 1); */
/*  text-shadow: .5em .5em #70171A;); */
}

/* @media (min-width: 900px) {
.byWord{
left: 22vw;

}
} */

/*PROGRAMMING LANGUAGE*/
// have blast js create elements from each of the letters in the div #cc
$("#cc").blast({
delimiter: "character",// Set the delimiter type (see left)
search: false,
tag: "div", // Set the wrapping element type (e.g. "div")
customClass: "byWord", // Add a custom class to wrappers
generateIndexID: true,// Add #customClass-i to wrappers
generateValueClass: true,
returnGenerated: true
});

/* SETTING UP VARIABLES FOR LOTS OF DIFFERENT WAYS TO CONTROL THE LETTERS, */

/* spread operator in javascript */
// [...'𝟘𝟙𝟚𝟛'] returns an array of [0,1,2,3]
// so its [...'whatever you want turned into an array']

/* not active method*/
// var myList = [...'digital text toolkit']

/*place the entire element containing the words towards the center manually with velocity call*/
var $elementWord = $('#cc')

// $elementWord.velocity({ p: {translateX: '+=2em',}, o:{ duration: 150, delay: 10,}})

//collect the letters by the custom class added to each by blast.js and put them in an array
var $element = $('.byWord')

var easings = ['easeInElastic', 'easeInOutQuad',"easeOutCirc","easeInBack", "easeInQuad"]
/* use .slice() method to put the word structure back together  */

// create an array of d i g i t a l
var wordOne =  $element.slice(0,11)
// create an array of t e x t
var wordTwo = $element.slice(11, 19)

console.log(wordTwo.length)
/* COLOR CREATIONS*/

  var colors = chroma
    .scale(["#2B2D42", "#D90429"])
    .mode("lch")
    .colors(wordTwo.length);

  let colorSet = [];

  for (var i = 0; i < wordTwo.length; i++) {
    var cSet = {
      e: wordTwo[i],
      p: {  color: colors[i] },
      o: {  }
    };

    colorSet.push(cSet);
  }
  $.Velocity.RunSequence(colorSet);

/*Language Animation to Register!*/
$.Velocity.RegisterUI("move", {
    defaultDuration: 4000,
    calls: [

            [ { translateY: '+=4.5em', fontSize: '-=10%', rotateX: -90, color: '#6B0062',  }, 1, {delay: 200, loop: true, easing: easings[1]} ],

    ]
});
//move 'langauge' over a little for word break
  wordTwo.velocity({
  translateX: '+=.7em'

});

//set up a variable to hold each of the letter's animation
var timeTable = [ ]

for(var i = 0;i<wordTwo.length; i++){
  
 var el = {e:wordTwo[i],
 p: 'move',


 o:{ duration: 1100,
    sequenceQueue: false, loop:true

 // loop: true
   }}
 
 timeTable.push(el)

  
  }
  
$.Velocity.RunSequence(timeTable);