body {
  background: white;
  color: black;
  font-size: 100%;
  font-family: sans-serif;
}

svg {
  display: block;
}

.logo {
  width: 140px;
}

.comic {
  overflow: hidden;
}

.frame {
  position: relative;
  padding: 36px;
  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-size: 80%;
}
@media all and (min-width: 60em) {
  .narration {
    font-size: 100%;
  }
}
.narration {
  line-height: 1.5;
}
.narration span {
  -webkit-box-decoration-break: clone;
  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;
}

[dir=rtl] .narration span {
  display: inline-block;
  box-shadow: none;
}

.title {
  font-size: 24px;
  font-weight: 900;
}

.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-size: 80%;
}
@media all and (min-width: 60em) {
  .bubble {
    font-size: 100%;
  }
}
.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 0.4s ease;
  fill: #ff7e79;
}
.link-to-dnsimple:hover .dnsimple-logo-text {
  fill: white;
}

.comic-red {
  color: #ff7e79;
}

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

#certificat-face {
  transition: transform ease-in-out 0.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%;
}

/*# sourceMappingURL=main.css.map */