body {
  font-family: 'Times New Roman', Times, serif;
  background: #eee;
}

.border-box {
  background: white;
  border-radius: 7px;
  margin: 20px;
}

.flex {
  display: flex;
}

.flex-middle {
  display: flex;
}

.line-height {
  line-height: 2.5;
}

.flex-space-between {
  justify-content: space-between;
}

.alimid {
  align-items: center;
  justify-content: center;
}


#toolContainer {
  width: 258px;
}

.bgcolor {
  border-radius: 7px;
  background-color: #eeeeee;
}

.pencil {
  cursor: url("images/pencil.png") 0 30, auto;
}

.eraser {
  cursor: url("images/eraser.png") 15 15, auto;
}

.catbutton {
  cursor: pointer;
  height: 40px;
  background: #F92672;
  border-radius: 20px;
  border: none;
  color: white;
  font-family: monospace;
  font-size: 13px;
}

.catbutton:hover { 
  background-color: #ca1154;
}

#textContainer {
  margin: 20px;
}

.pad {
  padding: 20px 10px;
}

#transferContainer {
  margin-top: 80px;
}

#btnContainer {
  margin: 0 20px;
}

#toolContainer {
  width: 256px;
  margin: 0 20px;
}

.catball {
  animation: catball-spin infinite 5s linear;
  height: 60px;
  margin-left: 5px;
  margin-bottom: 10px;
}

@keyframes catball-spin {
  0%   {
    transform:rotate(0deg);
  }
  25%{
    transform:rotate(-35deg);
  }

  75%{
    transform:rotate(35deg);
  }

  100% {
    transform:rotate(0deg);
  }
}