footer {
	user-select: none;
	padding: .8em 0 0;
    color: #999;
    text-align: center;
    line-height: 1.5;
    font-family: var(--base-font-family)
}
footer .sketch {
    display: inline-block;
    vertical-align: middle;
    width: 95px;
    height: 15px;
    background-image: url(/blog/sketch/images/sketch.svg);
    background-size: 95px 15px;
}
footer .dog-house {
	display: inline-block;
	background-image: url(/blog/sketch/images/doghouse.svg);
    background-size: 65px 16px;
}

footer .dog-house, .dog-house::after {
    vertical-align: middle;
    margin-top: -2px;
    width: 65px;
    height: 16px;
}
.dog-house::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -2px 0 0);
  --slice-2: inset(50% -2px 30% 0);
  --slice-3: inset(10% -2px 85% 0);
  --slice-4: inset(40% -2px 43% 0);
  --slice-5: inset(80% -2px 5% 0);
  content: '';
  display: block;
  position: relative;
  top: 2px;
  overflow: hidden;
  background-size: 65px 16px;
  background-image: url(/blog/sketch/images/doghouse-2.svg) ;
  clip-path: var(--slice-0);
}
.dog-house:hover::after {
  animation: 1s doghouse-glitch;
  animation-timing-function: steps(2, end);
}
@keyframes doghouse-glitch {
  0% { clip-path: var(--slice-1); transform: translate(-2px, -1px); }
  10% { clip-path: var(--slice-3); transform: translate(1px, 1px); }
  20% { clip-path: var(--slice-1); transform: translate(-1px, 1px); }
  30% { clip-path: var(--slice-3); transform: translate(0px, .5px); }
  40% { clip-path: var(--slice-2); transform: translate(-.5px, 0px); }
  50% { clip-path: var(--slice-3); transform: translate(.5px, 0px); }
  60% { clip-path: var(--slice-4); transform: translate(.5px, 1px); }
  70% { clip-path: var(--slice-2); transform: translate(-1px, 1px); }
  80% { clip-path: var(--slice-5); transform: translate(2px, -1px); }
  90% { clip-path: var(--slice-1); transform: translate(-1px, 0px); }
  100% { clip-path: var(--slice-1); transform: translate(0); }
}
footer>div>span {
	color: var(--bright-active)
}
.doghouse {
    margin: .6em 0 1em ;
}
.doghouse > * {
    display: inline-block;
    background-repeat: no-repeat;
}
footer .doghouse .nsfw {
    display: inline-block;
    vertical-align: middle;
    width: 48px;
    height: 32px;
    background-image: url(/blog/sketch/images/nsfw.svg);
    background-size: 48px 32px;
}
footer .doghouse .csrr {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    background-image: url(/blog/sketch/images/rating-csrr.svg);
    background-size: 30px 30px;
}