* {
  margin: 0px;
  padding: 0px;
}


body{
  background-color: #B5D8CF;
}


#container {
  display: flex;
  flex-direction: column;
  width: 800px;
  margin:auto;
  background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
  font-family: "Montserrat", sans-serif;
  font-weight: normal;
  border: solid 10px #333333;
  line-height: 1.6;
  color:whitesmoke;

}


#canvas{
  position:fixed;
  top:0;
  left:0;
}


#jack{
  width:55%;
  align-self: center;
  z-index: 1;
}


#jack:hover{
  animation: shake 0.5s; 
  animation-iteration-count: infinite; 
}
          
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 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% { transform: translate(1px, -2px) rotate(-1deg); }
}


#content{
  width: 70%;
  align-self: center;
  background-color: #008f95;
  padding:30px;
  border-radius: 0.5em;
  margin-bottom:30px;
  min-height: 250px;
}


#content p{
  padding-top:15px;
  line-height: 1.6;
    
}