body  {
  background: rgb(240,240,240);
  background: linear-gradient(0deg, #EBEBEB 0%, rgba(254,255,255,1) 75%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-size:16pt;
  font-family: 'Roboto Mono', monospace;
  letter-spacing: -2.5px;
  column-count: 2;
  column-gap: 20px;
  border: 0px;
  margin-left: 10px
}

.text {
  font-size:8pt;
  font-family: 'Roboto Mono', monospace;
  letter-spacing: -1px;
}

.text4 {
  font-size:6pt;
  font-family: 'Roboto Mono';
  font-weight: 700;
  letter-spacing: -1px;
  color: black;
}

.text6 {
  font-size:6pt;
  font-family: 'Roboto Mono';
  font-weight: 700;
  letter-spacing: -1px;
  color: black;
  position: absolute;
  position: absolute;
  width: 125px;
  height: 62px;
  left: 754px;
  top: 441.76px;
  transform: rotate(-3.63deg);
}

.text5 {
  font-size:6pt;
  font-family: 'Roboto Mono';
  font-weight: 700;
  letter-spacing: -1px;
  color: black;

}

.text7 {
  font-size:6pt;
  font-family: 'Roboto Mono';
  font-weight: 700;
  letter-spacing: -1px;
  color: black;
  position: bottom;

}

/* shake shake shake! */

.shake {
  position: absolute;
width: 139px;
height: 19px;
left: 785.39px;
top: 145.3px;
animation: shake2 1s;

transform: rotate(-15deg);
}

@keyframes shake2 {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  5% { transform: translate(2px, 1px) rotate(1deg); }
  10% { transform: translate(-1px, -2px) rotate(-10deg); }
  15% {transform: translate(3px, 5px) rotate(0deg);}
  20% { transform: translate(-10px, 0px) rotate(10deg); }
  25% {transform: translate(4px, 2px) rotate(0deg);}
  30% { transform: translate(3px, 5px) rotate(0deg); }
  35% {transform: translate(10px, 2px) rotate(0deg);}
  40% { transform: translate(1px, -2px) rotate(1deg); }
  45% {transform: translate(3px, 5px) rotate(0deg);}
  50% { transform: translate(-1px, 2px) rotate(-10deg); }
  55% { transform: translate(3px, 5px) rotate(0deg);}
  60% { transform: translate(-6px, 1px) rotate(0deg); }
  65% { transform: translate(3px, 5px) rotate(0deg);}
  70% { transform: translate(3px, 1px) rotate(-10deg); }
  75% { transform: translate(3px, 5px) rotate(0deg);}
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  85% { transform: translate(3px, 5px) rotate(10deg);}
  90% { transform: translate(1px, 2px) rotate(0deg); }
  95% { transform: translate(3px, 5px) rotate(-10deg);}
}

.box {
  border: 1px;
}

.text2 {
  font-size:8pt;
  font-family: 'Roboto Mono';
  font-style: italic;
  letter-spacing: -1px;
}

.myclass {
  position: relative;
  width: 397px;
  height: 23px;
  left: 129px;
  top: 137px;

}

.container {
  column-width: 100px;
}

.img {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 145.14px;
  background-image: url("assets/MIC1.png");
  background-repeat: no-repeat;
  background-size: 275px 247.71px;
  background-position: 50% 75%;
  box-shadow: -10px 10px 10px #ccc;
  transition: 2s ease-out 100ms;
  background-color: white;
}


.img:hover {
    background-image: url("assets/MIC1.png");
    background-size: 35px 75px;
    transition-duration: 1.0 second;
    background-repeat: repeat;
  background-color: red;
  background-blend-mode: multiply;
}

.img2 {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 145.14px;
  background-image: url("assets/MIC1.png");
  background-repeat: no-repeat;
  background-size: 275px 247.71px;
  background-position: 50% 75%;
  box-shadow: -10px 10px 10px #ccc;
  transition: 2s ease-out 100ms;
  background-color: white;
}

.img2:hover {
    background-image: url("assets/caricature.jpeg");
    background-size: 200px 145.14px;
    transition-duration: 1.0 second;
    background-repeat: repeat;
  animation: jiggle 0.5s;
  animation-iteration-count: infinite;
  background-color: red;
}



@keyframes jiggle {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  0% { -webkit-filter: blur(0px);}
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  10% { -webkit-filter: blur(0px);}
  20% { transform: translate(-10px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 5px) rotate(0deg); }
  40% { transform: translate(1px, -2px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-6px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { -webkit-filter: blur(10px);}
}

.img3 {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 145.14px;
  background-image: url("assets/MIC1.png");
  background-repeat: no-repeat;
  background-size: 275px 247.71px;
  background-position: 50% 75%;
  box-shadow: -10px 10px 10px #ccc;
  background-color: white;
}

.img3:hover {
    background-image: url("assets/michael.jpg");
    background-size: 250px 145.14px;
    transition-duration: 1.0 second;
  animation: zoom-in-zoom-out 1s;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

.backpack {
  -webkit-filter: drop-shadow(-10px 10px 6px #ccc);
  filter: drop-shadow(-10px 10px 6px #ccc);
  position;
  rotate: 180deg;
  width: 810px;
  height: 810px;
  left: 600px;
  top: 800px;
  animation: shake 1s;
  animation-fill-mode: forwards;
  white-space: nowrap;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  0% { -webkit-filter: blur(0px);}
  5% { transform: translate(2px, 1px) rotate(1deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  15% {transform: translate(3px, 5px) rotate(0deg);}
  20% { transform: translate(-10px, 0px) rotate(1deg); }
  25% {transform: translate(4px, 2px) rotate(0deg);}
  25% { -webkit-filter: blur(0px);}
  30% { transform: translate(3px, 5px) rotate(0deg); }
  35% {transform: translate(10px, 2px) rotate(0deg);}
  40% { transform: translate(1px, -2px) rotate(1deg); }
  45% {transform: translate(3px, 5px) rotate(0deg);}
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  55% { transform: translate(3px, 5px) rotate(0deg);}
  60% { transform: translate(-6px, 1px) rotate(0deg); }
  65% { transform: translate(3px, 5px) rotate(0deg);}
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  70% { -webkit-filter: blur(0px);}
  75% { transform: translate(3px, 5px) rotate(0deg);}
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  85% { transform: translate(3px, 5px) rotate(0deg);}
  90% { transform: translate(1px, 2px) rotate(0deg); }
  95% { transform: translate(3px, 5px) rotate(0deg);}
  100% {opacity: .6;}
  100% { -webkit-filter: blur(3px);}
  100% { transform: translate(0px, 0px) rotate(-1deg);}
}

.done {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

.done:hover {
-webkit-filter: blur(0);
filter: blur(0);
}


/* Bullets 1 */

.bullets {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  position: absolute;
  width: 152px;
  height: 216px;
  left: 1100px;
  top: 300px;
  animation: move 1.25s;
  animation-fill-mode: forwards;
  transform: rotate(180deg);
}

  @keyframes move {
  0% { transform: translate(px, 0px) rotate(0deg) scale(0, 0); }
  100% { transform: translate(0px, 300px) rotate(-1deg) scale(1, 1); }
  }

.bullets:hover {
  -webkit-filter: blur(0);
  filter: blur(0);

}

/* iPhone */
.iphone {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  position: absolute;
width: 219px;
height: 219px;
left: 1000px;
top: 50px;
background: url("assets/iPhone.png");
transform: rotate(-70deg);
animation: move 1.25s;
animation-fill-mode: forwards;
}

.iphone:hover {
  -webkit-filter: blur(0);
  filter: blur(0);
}

/* Labels */
.labels {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  position: absolute;
width: 300px;
height: 200px;
left: 750px;
top: 200px;
background: url("assets/labels.png");
background-repeat: no-repeat;
transform: rotate(-270deg);
animation: move 1.25s;
animation-fill-mode: forwards;
}

.labels:hover {
  -webkit-filter: blur(0);
  filter: blur(0);
}