@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);
/* try 50% */
.roundrect .up {
  border-radius: 2rem 2rem 0 0;
}
.roundrect .down {
  border-radius: 0 0 2rem 2rem;
}
.roundrect .count {
  border-radius: 0.5rem 0.5rem;
}

.chev .up {
  border-radius: 50% 50% 0 0;
}
.chev .down {
  border-radius: 0 0 50% 50%;
}
.chev .count {
  border-radius: 100%/50%;
}

.circle .up {
  border-radius: 10rem 10rem 0 0;
}
.circle .down {
  border-radius: 0 0 10rem 10rem;
}
.circle .count {
  border-radius: 50%;
}

.vote {
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans";
  position: relative;
  width: 10rem;
  height: 10rem;
  margin: 1rem;
}

.increment {
  flex: 1 0 0;
  text-align: center;
  opacity: 0.5;
  transition: 0.3s;
  cursor: pointer;
}
.increment.up {
  background: #4BC35F;
  height: 50%;
  margin-bottom: 0.25rem;
}
.increment.down {
  background: #C15044;
  height: 50%;
}
.increment:hover {
  opacity: 1;
}

.count {
  position: absolute;
  top: 0;
  border-radius: 0.1rem;
  margin: 2.5rem;
  background: #F6F3E4;
  width: 5rem;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 5rem;
  text-align: center;
  box-shadow: 0 0 0 0.5rem #F6F3E4;
  pointer-events: none;
}
.count.upvoted {
  color: #4BC35F;
}
.count.downvoted {
  color: #C15044;
}

.bump {
  -webkit-animation: bump 200ms;
          animation: bump 200ms;
}

@-webkit-keyframes bump {
  30% {
    transform: scale(1.2);
  }
}

@keyframes bump {
  30% {
    transform: scale(1.2);
  }
}
* {
  box-sizing: border-box;
}