<div class="layerzoom ba-timeline">

  <div class="layerbackground"></div>

  <div class="cont2">
    <div class="ba-bot ba-sidekick">
      <p class="ba-speech chapter2">Hey! Have you tried turning it off and on again?!</p>
    </div>
  </div>
  <div class="cont1">
    <div class="ba-bot">
      <p class="ba-speech chapter1">#408 Error. The client is NOT responding!</p> 
      <p class="ba-filler chapter2"></p> 
    </div>
  </div>
</div>
  <div class="button1" onclick="buttonclick"><div class="buttonbackground"></div><div class="buttonbackground"><div class="buttontext">Trace Route</div></div></div>
  </div>

body {
  padding:0px;
  margin:0px;
  font-size: 22px;
  overflow:hidden;
}

.cont1 {
  position:absolute;
  top: 74.5%;
  left:27%;
  transform:scale(1.3);
}
.cont2 {
  position:absolute;
  top: 51.6%;
  left:44.8%;
  width:10%;
  transform-origin: 0% 50%;
  font-size:3em;
  transform:scale(0.10);
}

.button1 {
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  background:grey;
  top: 80%;
  left:70%;
  width: 20%;
  height:10%;
}
.buttonbackground {
  position:absolute;
  height:95%;
  width:95%;
  background:darken(skyblue,20%);
  transform:skew(4deg);
  transition: 0.2s all;
  &:hover{
    background:yellow;
    transform:skew(-5deg);
    // another way to do this i've seen
    // transform: perspective(300px) rotateY(-12deg);
  }
}

.buttontext {
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  height:95%;
  width:95%;
  transition: 0.2s all;
  color:white;
  font-family: 'Luckiest Guy', sans-serif;
  &:hover{
    color:blue;
  }
}

.layerbackground {
  position:absolute;
  height:100%;
  width:100%;
  padding:0px;
  margin:0px;
  overflow:hidden;
   background: url(https://s3-ap-northeast-1.amazonaws.com/sukosuko1/boulevard.svg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
  
}

.layerzoom {
  position:absolute;
  height:100%;
  width:100%;
  padding:0px;
  margin:0px;
  background:blue;
  overflow:hidden;
   transform: scale(1.0);
  transition: 1s all;
  transform-origin:47% 50%;
  
  &.chapter1 { 
    transform: scale(1.0);
  }
  &.chapter2 { 
    transform: scale(4.0);
  }
}


.ba-sidekick .ba-speech {
  width:900%;
}

// svg not displaying trasforms poperly on safari mobile

// for sizing the background svg :.
// https://css-tricks.com/perfect-full-page-background-image/

// bot awesome, a work in progress, font awesome style tags
// add additional tags with class 'chapter8' in order and they will be added to the teimline
//anything with a class 'ba-timeline' will also obey chapter+num styling

/*  
setInterval(()=> {
  baNextChapter();
}, 3000);
*/

function buttonclick() {
  baNextChapter();
  document.body.style.transform = "scale(4.0)";
}

// background svg graphic from vecteezy.com