.free {
  border-top: 4px solid green;
}
.free-tag {
  float: right;
  width: 100px;
  overflow: visible;
  background-color: green;
  border-left: 20px solid green;
  border-bottom: 1px solid green;
  font-weight: bolder;
  color: white;
  font-size: medium;
}
.logo__text {
  text-transform: none;
}
.clearfix {
  display: flow-root;
}
.content {
  font-size: 16px;
}
.list__title {
  font-size: 20px;
}
article,
.widget {
  border-left: 0.5px solid lightgray;
  box-shadow: 3px 3px 3px 3px gray;
  padding-left: 20px;
}
@media (min-width: 768px) {
  article:hover,
  .widget:hover {
    box-shadow: 5px 5px 5px 3px gray;
    transition: all 0.25s ease-in-out;
  }
}
.widget {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
}
.post__content {
  padding-right: 20px;
}
#d20 {
  cursor: pointer;
  width: 100px;
}
.dice-roll {
  animation-name: d20_roll;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0, 1.05);
}
@keyframes d20_roll {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(60deg);
  }
  40% {
    transform: rotate(160deg);
  }
  100% {
    transform: rotate(360deg);
  }
}