@font-face {
  font-family: 'back_issues_bbregular';
  src: url("/assets/fonts/backissuesbb_reg-webfont.woff2") format("woff2"), url("/assets/fonts/backissuesbb_reg-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
body {
  background: white;
  color: black;
  font-family: sans-serif;
  font-size: 100%; }

svg {
  display: block; }

.logo {
  width: 140px; }

.comic {
  overflow: hidden; }

.frame {
  position: relative;
  padding: 12px;
  float: left;
  width: 100%; }
  @media all and (min-width: 34em) {
    .frame {
      max-width: 50%; } }
  @media all and (min-width: 60em) {
    .frame {
      max-width: 33%; } }

.narration {
  position: absolute;
  font-family: 'back_issues_bbregular', sans-serif;
  font-size: 75%;
  line-height: 1.4; }
  @media all and (min-width: 60em) {
    .narration {
      font-size: 80%; } }
  .narration span {
    box-decoration-break: clone;
    background: black;
    color: white;
    padding: 3px;
    box-shadow: 5px 0 0 black; }
    @media all and (min-width: 60em) {
      .narration span {
        padding: 5px; } }
  .narration a {
    color: white; }

.title {
  font-size: 24px; }

.evil {
  color: black !important;
  background: #FF7E79 !important;
  box-shadow: 5px 0 0 #FF7E79 !important; }

.reverse {
  color: black !important;
  background: white !important;
  box-shadow: 5px 0 0 white !important; }

.bubble {
  position: absolute;
  display: inline-block;
  padding: 5px 8px;
  background: white;
  border: 3px solid black;
  border-radius: 5px;
  font-family: 'back_issues_bbregular', sans-serif;
  font-size: 75%; }
  @media all and (min-width: 60em) {
    .bubble {
      font-size: 80%; } }
  .bubble p {
    margin: 0; }
  .bubble .arrow {
    width: 40px;
    position: absolute; }
  .bubble .down {
    bottom: -38px; }
  .bubble .up {
    top: -38px; }

.link-to-dnsimple:hover .dnsimple-logo-bg {
  transition: fill .4s ease;
  fill: #ff7e79; }
.link-to-dnsimple:hover .dnsimple-logo-text {
  fill: white; }

.comic-red {
  color: #ff7e79; }

.footer-width {
  max-width: 1080px; }

.start-reading-cta:hover #certificat-face {
  transition: transform ease-in-out .3s;
  transform: translate(0, -20px); }

#certificat-face {
  transition: transform ease-in-out .3s;
  transform: translate(0, 0px); }

.btn-cta {
  background: #ff7e79;
  color: white; }

@-webkit-keyframes loopy-eyes {
  0% {
    -webkit-transform: translate(8px, 8px);
    -moz-transform: translate(8px, 8px);
    -ms-transform: translate(8px, 8px);
    -o-transform: translate(8px, 8px);
    transform: translate(8px, 8px); }
  25% {
    -webkit-transform: translate(-8px, 8px);
    -moz-transform: translate(-8px, 8px);
    -ms-transform: translate(-8px, 8px);
    -o-transform: translate(-8px, 8px);
    transform: translate(-8px, 8px); }
  50% {
    -webkit-transform: translate(-8px, -8px);
    -moz-transform: translate(-8px, -8px);
    -ms-transform: translate(-8px, -8px);
    -o-transform: translate(-8px, -8px);
    transform: translate(-8px, -8px); }
  75% {
    -webkit-transform: translate(8px, -8px);
    -moz-transform: translate(8px, -8px);
    -ms-transform: translate(8px, -8px);
    -o-transform: translate(8px, -8px);
    transform: translate(8px, -8px); }
  100% {
    -webkit-transform: translate(8px, 8px);
    -moz-transform: translate(8px, 8px);
    -ms-transform: translate(8px, 8px);
    -o-transform: translate(8px, 8px);
    transform: translate(8px, 8px); } }
@-moz-keyframes loopy-eyes {
  0% {
    -webkit-transform: translate(8px, 8px);
    -moz-transform: translate(8px, 8px);
    -ms-transform: translate(8px, 8px);
    -o-transform: translate(8px, 8px);
    transform: translate(8px, 8px); }
  25% {
    -webkit-transform: translate(-8px, 8px);
    -moz-transform: translate(-8px, 8px);
    -ms-transform: translate(-8px, 8px);
    -o-transform: translate(-8px, 8px);
    transform: translate(-8px, 8px); }
  50% {
    -webkit-transform: translate(-8px, -8px);
    -moz-transform: translate(-8px, -8px);
    -ms-transform: translate(-8px, -8px);
    -o-transform: translate(-8px, -8px);
    transform: translate(-8px, -8px); }
  75% {
    -webkit-transform: translate(8px, -8px);
    -moz-transform: translate(8px, -8px);
    -ms-transform: translate(8px, -8px);
    -o-transform: translate(8px, -8px);
    transform: translate(8px, -8px); }
  100% {
    -webkit-transform: translate(8px, 8px);
    -moz-transform: translate(8px, 8px);
    -ms-transform: translate(8px, 8px);
    -o-transform: translate(8px, 8px);
    transform: translate(8px, 8px); } }
@keyframes loopy-eyes {
  0% {
    -webkit-transform: translate(8px, 8px);
    -moz-transform: translate(8px, 8px);
    -ms-transform: translate(8px, 8px);
    -o-transform: translate(8px, 8px);
    transform: translate(8px, 8px); }
  25% {
    -webkit-transform: translate(-8px, 8px);
    -moz-transform: translate(-8px, 8px);
    -ms-transform: translate(-8px, 8px);
    -o-transform: translate(-8px, 8px);
    transform: translate(-8px, 8px); }
  50% {
    -webkit-transform: translate(-8px, -8px);
    -moz-transform: translate(-8px, -8px);
    -ms-transform: translate(-8px, -8px);
    -o-transform: translate(-8px, -8px);
    transform: translate(-8px, -8px); }
  75% {
    -webkit-transform: translate(8px, -8px);
    -moz-transform: translate(8px, -8px);
    -ms-transform: translate(8px, -8px);
    -o-transform: translate(8px, -8px);
    transform: translate(8px, -8px); }
  100% {
    -webkit-transform: translate(8px, 8px);
    -moz-transform: translate(8px, 8px);
    -ms-transform: translate(8px, 8px);
    -o-transform: translate(8px, 8px);
    transform: translate(8px, 8px); } }
.loopy-eyes {
  -webkit-animation: loopy-eyes 1s infinite linear;
  -moz-animation: loopy-eyes 1s infinite linear;
  -ms-animation: loopy-eyes 1s infinite linear;
  -o-animation: loopy-eyes 1s infinite linear;
  animation: loopy-eyes 1s infinite linear; }

@-webkit-keyframes crying {
  0% {
    -webkit-transform: translate(-1px, -1px);
    -moz-transform: translate(-1px, -1px);
    -ms-transform: translate(-1px, -1px);
    -o-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px); }
  100% {
    -webkit-transform: translate(0, 1px);
    -moz-transform: translate(0, 1px);
    -ms-transform: translate(0, 1px);
    -o-transform: translate(0, 1px);
    transform: translate(0, 1px); } }
@-moz-keyframes crying {
  0% {
    -webkit-transform: translate(-1px, -1px);
    -moz-transform: translate(-1px, -1px);
    -ms-transform: translate(-1px, -1px);
    -o-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px); }
  100% {
    -webkit-transform: translate(0, 1px);
    -moz-transform: translate(0, 1px);
    -ms-transform: translate(0, 1px);
    -o-transform: translate(0, 1px);
    transform: translate(0, 1px); } }
@keyframes crying {
  0% {
    -webkit-transform: translate(-1px, -1px);
    -moz-transform: translate(-1px, -1px);
    -ms-transform: translate(-1px, -1px);
    -o-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px); }
  100% {
    -webkit-transform: translate(0, 1px);
    -moz-transform: translate(0, 1px);
    -ms-transform: translate(0, 1px);
    -o-transform: translate(0, 1px);
    transform: translate(0, 1px); } }
.crying {
  -webkit-animation: crying 0.2s infinite linear;
  -moz-animation: crying 0.2s infinite linear;
  -ms-animation: crying 0.2s infinite linear;
  -o-animation: crying 0.2s infinite linear;
  animation: crying 0.2s infinite linear; }

.top-0 {
  top: 0; }

.top-10 {
  top: 10%; }

.top-20 {
  top: 20%; }

.top-30 {
  top: 30%; }

.top-40 {
  top: 40%; }

.top-50 {
  top: 50%; }

.top-60 {
  top: 60%; }

.top-70 {
  top: 70%; }

.top-80 {
  top: 80%; }

.top-90 {
  top: 90%; }

.top-100 {
  top: 100%; }

.bottom-0 {
  bottom: 0; }

.bottom-10 {
  bottom: 10%; }

.bottom-20 {
  bottom: 20%; }

.bottom-30 {
  bottom: 30%; }

.bottom-40 {
  bottom: 40%; }

.bottom-50 {
  bottom: 50%; }

.bottom-60 {
  bottom: 60%; }

.bottom-70 {
  bottom: 70%; }

.bottom-80 {
  bottom: 80%; }

.bottom-90 {
  bottom: 90%; }

.bottom-100 {
  bottom: 100%; }

.left-0 {
  left: 0; }

.left-10 {
  left: 10%; }

.left-20 {
  left: 20%; }

.left-30 {
  left: 30%; }

.left-40 {
  left: 40%; }

.left-50 {
  left: 50%; }

.left-60 {
  left: 60%; }

.left-70 {
  left: 70%; }

.left-80 {
  left: 80%; }

.left-90 {
  left: 90%; }

.left-100 {
  left: 100%; }

.right-0 {
  right: 0; }

.right-10 {
  right: 10%; }

.right-20 {
  right: 20%; }

.right-30 {
  right: 30%; }

.right-40 {
  right: 40%; }

.right-50 {
  right: 50%; }

.right-60 {
  right: 60%; }

.right-70 {
  right: 70%; }

.right-80 {
  right: 80%; }

.right-90 {
  right: 90%; }

.right-100 {
  right: 100%; }