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

<div id = "shapes">



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

/*SETUP*/

html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{
 background-color: rgba(236, 229, 223, .8);
font-family: 'Oswald';
color:#FFFFF8;
font-size: 3.1ch;
width: 100%;
margin:auto;
}
@media (max-width: 599px) {
body {
/*  background: purple; */
}
}

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

/*CONTAINER FOR EVERYTHING*/

#app{
  position: relative;
width : 95%;
margin-left: auto;
margin-right: auto;
}

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

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


#shapes{
/* border: solid 5px #0F3B72; */
/* position: relative; */
width: 100%;
margin-left: 40%;
  height: 100%;
  margin-top: 25vh;
/*   background-color: rgba(253, 200, 189, .5); */
}


.shape{
/* position: absolute; */
/*   float: left; */
text-transform: uppercase;
/*   margin: -1.5em; */
/*   padding: 3.5em; */
/*   color: #f4f4f4; */
/* border: solid .05em #B4331A; */
 text-shadow: 0em 0em #B4331A;
 box-shadow: 0em 0em 0em 0em rgba(233, 101, 104, .1);
  width: 6ch;
  height: 6ch;
  border-radius: 50%;
 
}

.triangle {
  	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}

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

}
} */

/*PROGRAMMING LANGUAGE*/


// theElements = [
//   $elementOne, $elementTwo, $elementThree, $elementFour
// ]

//create a new circle

for (var i = 0; i < 6; i++){
  var newCircle = $('<div></div>').appendTo("#shapes")
newCircle.addClass('shape')
}

theElements = $('.shape').toArray()

var $element = $(".shape").toArray();

var $elements = $(".shape");

var colors = chroma
  // .scale(["#AD06FF", "#D90429"])
  .scale(["#0085FF", "#D90429"])
  // .scale(["#FDC8BD", "#D90429"])
  // .scale(["#C35557", "#C32157"])
  .mode("lch")
  .colors(theElements.length);

theElements.forEach(function(element, index){
  // console.log("this" + element)
  $(element).velocity({
        p: { 
          backgroundColor: colors[index]}, 
          // color: colors[index] },
    o: { duration: 50 }
  })
})


var easings = [
  "easeInElastic",
  "easeInOutQuad",
  "easeOutCirc",
  "easeInBack",
  "easeInQuad"
];

/*Language Animation to Register!*/

$.Velocity.RegisterUI("spinOne", {
  defaultDuration: 8000,
  calls: [
    [
      {
        translateX: "-=50%",
        translateY: "+=10%",
        scale: 0.18,
        transformOriginX: "190%",
        transformOriginY: "-60%",
        rotateZ: [0,160],
        margin: '-=3em',
        opacity: .3
        // boxShadowX: "+=2.5em"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[1]
      }
    ]
  ]
});

$.Velocity.RegisterUI("spinTwo", {
  defaultDuration: 8000,
  calls: [
     [
      {
        translateX: "+=50%",
        translateY: "+=50%",
        scale: 0.68,
        transformOriginX: "180%",
        transformOriginY: "-60%",
        rotateZ: [0,360],
        margin: '-=3em',
        opacity: .3
        
        // boxShadowX: "+=1.5em"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[1]
      }
    ]
  ]
});

$.Velocity.RegisterUI("spinThree", {
  defaultDuration: 7000,
  calls: [
    [
      {
        translateX: "+=50%",
        translateY: "+=50%",
        scale: 0.48,
        transformOriginX: "30%",
        transformOriginY: "-10%",
        rotateZ: [0,360],
        margin: '-=3em',
        opacity: .3
        
        // boxShadowX: "+=.5em"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[1]
      }
    ]
  ]
});


$.Velocity.RegisterUI("spinFour", {
  defaultDuration: 6000,
  calls: [
     [
      {
        translateX: "-=20%",
        translateY: "+=20%",
        width: '-=5%',
        scale: 0.18,
        transformOriginX: "110%",
        transformOriginY: "100%",
         rotateZ: [0,360],
        margin: '-=3em',
        opacity: .3
        
        // boxShadowX: "+=3.5em"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[2]
      }
    ]
  ]
});

$.Velocity.RegisterUI("basicSpin", {
  defaultDuration: 6000,
  calls: [
     [
      {
        translateX: "-=5%",
        translateY: "+=60%",
        scale: 0.78,
        width: '-=10%',
       
        transformOriginX: "160%",
        transformOriginY: "80%",
         rotateZ: [0,360],
        margin: '-=3em',
        opacity: .3
        
        // boxShadowX: "+=3.5em"
      },
      1,
      {
        loop: true,
        sequenceQueue: false,
        easing: easings[3]
      }
    ]
  ]
});



spins = ["spinOne", "spinTwo", "spinThree", "spinFour", "basicSpin"]


$element.forEach(function(element, index){
   var item = spins[Math.floor(Math.random()*spins.length)];
  // console.log(item)
  $(element).velocity({
    p: item,
    o: {delay: 400}
  })
 
  
})