* {
  user-select: none; }

body {
  background-image: url("/assets/images/background.png");
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: space-around;
  height: 94vh;
  padding-top: 4vh; }

abbr {
  text-decoration: none; }

.cat-row {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center; }
  .cat-row .container {
    max-width: 400px;
    position: relative;
    width: 40%;
    height: 40%; }
    .cat-row .container.cat-green, .cat-row .container.cat-blue {
      transform: scaleX(-1); }
    .cat-row .container .cat {
      width: 80%;
      bottom: 0;
      right: 0;
      position: absolute;
      cursor: pointer;
      /********
Keyframes
********/
      /********
Keyframes
********/
      /********
Keyframes
********/
      /********
Keyframes
********/
      /********
Keyframes
********/
      /********
Keyframes
********/
      /********
Keyframes
********/
      /********
Keyframes
********/ }
      .cat-row .container .cat .tail-top {
        transform-origin: center;
        animation: wiggle-tail 1.0s ease infinite; }

@keyframes wiggle-tail {
  50% {
    transform: rotate(20deg) translateY(-130px) translateX(-132px); } }
      .cat-row .container .cat.idle .head, .cat-row .container .cat.idle .necklace {
        transform-origin: center;
        animation: idle-bend-head 1.5s ease infinite; }
      .cat-row .container .cat.idle .body {
        transform-origin: top;
        animation: idle-bend-upper-body 1.5s ease infinite; }
      .cat-row .container .cat.idle .leg-front-left {
        transform-origin: center;
        animation: idle-bend-leg-front-left 1.5s ease infinite; }
      .cat-row .container .cat.idle .leg-front-right {
        transform-origin: center;
        animation: idle-bend-leg-front-right 1.5s ease infinite; }
      .cat-row .container .cat.idle .leg-back-left {
        transform-origin: center;
        animation: idle-bend-leg-back-left 1.5s ease infinite; }
        .cat-row .container .cat.idle .leg-back-left .bottom {
          transform-origin: center;
          animation: idle-bend-leg-back-left-bottom 1.5s ease infinite; }
      .cat-row .container .cat.idle .leg-back-right {
        transform-origin: center;
        animation: idle-bend-leg-back-right 1.5s ease infinite; }

@keyframes idle-bend-upper-body {
  0% {
    transform: rotateZ(-7deg) translateX(-20px); }
  50% {
    transform: rotateZ(-6deg) translateX(-18px); }
  100% {
    transform: rotateZ(-7deg) translateX(-20px); } }

@keyframes idle-bend-head {
  0% {
    transform: rotateZ(-4deg) translateX(38px) translateY(22px); }
  50% {
    transform: rotateZ(-5deg) translateX(32px) translateY(15px); }
  100% {
    transform: rotateZ(-4deg) translateX(38px) translateY(22px); } }

@keyframes idle-bend-leg-front-left {
  0% {
    transform: rotateZ(-45deg) translateX(62px) translateY(-219px); }
  50% {
    transform: rotateZ(-43deg) translateX(60px) translateY(-211px); }
  100% {
    transform: rotateZ(-45deg) translateX(62px) translateY(-219px); } }

@keyframes idle-bend-leg-front-right {
  0% {
    transform: rotateZ(-3deg); }
  50% {
    transform: rotateZ(-2deg); }
  100% {
    transform: rotateZ(-3deg); } }

@keyframes idle-bend-leg-back-left {
  0% {
    transform: rotateZ(-1deg); }
  50% {
    transform: rotateZ(-3deg); }
  100% {
    transform: rotateZ(-1deg); } }

@keyframes idle-bend-leg-back-left-bottom {
  0% {
    transform: rotateZ(0deg); }
  50% {
    transform: rotateZ(4deg) translateX(23px) translateY(-7px); }
  100% {
    transform: rotateZ(0deg); } }

@keyframes idle-bend-leg-back-right {
  0% {
    transform: rotateZ(0deg); }
  50% {
    transform: rotateZ(4deg); }
  100% {
    transform: rotateZ(0deg); } }
      .cat-row .container .cat.idle-to-press .head, .cat-row .container .cat.idle-to-press .necklace {
        transform-origin: center;
        animation: idle-to-press-head 0.5s ease; }
      .cat-row .container .cat.idle-to-press .body {
        transform-origin: top;
        animation: idle-to-press-body 0.5s ease; }
      .cat-row .container .cat.idle-to-press .leg-front-left {
        transform-origin: center;
        animation: idle-to-press-leg-front-left 0.5s ease;
        transform: rotateZ(-43deg) translateX(48px) translateY(105px); }
      .cat-row .container .cat.idle-to-press .leg-front-right {
        transform-origin: center;
        animation: idle-to-press-leg-front-right 0.5s ease;
        transform: rotateZ(-3deg); }
      .cat-row .container .cat.idle-to-press .leg-back-left {
        transform-origin: center;
        animation: idle-to-press-leg-back-left 0.5s ease;
        transform: rotateZ(-3deg); }
        .cat-row .container .cat.idle-to-press .leg-back-left .bottom {
          transform-origin: center;
          animation: idle-to-press-leg-back-left-bottom 0.5s ease;
          transform: rotateZ(7deg); }
      .cat-row .container .cat.idle-to-press .leg-back-right {
        transform-origin: center;
        animation: idle-to-press-leg-back-right 0.5s ease;
        transform: rotateZ(-3deg); }

@keyframes idle-to-press-body {
  0% {
    transform: rotateZ(-7deg) translateX(-20px); }
  100% {
    transform: rotate(0deg) translateX(0px); } }

@keyframes idle-to-press-head {
  0% {
    transform: rotateZ(-4deg) translateX(38px) translateY(22px); }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(0px); } }

@keyframes idle-to-press-leg-front-left {
  0% {
    transform: rotateZ(-45deg) translateX(62px) translateY(-219px); }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(0px); } }

@keyframes idle-to-press-leg-front-right {
  0% {
    transform: rotateZ(-3deg); }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(0px); } }

@keyframes idle-to-press-leg-back-left {
  0% {
    transform: rotateZ(-1deg); }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(0px); } }

@keyframes idle-to-press-leg-back-left-bottom {
  0% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(0px); } }

@keyframes idle-to-press-leg-back-right {
  0% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(0px); } }
      .cat-row .container .cat.press-to-idle .head, .cat-row .container .cat.press-to-idle .necklace {
        transform-origin: center;
        animation: press-to-idle-head 1s ease; }
      .cat-row .container .cat.press-to-idle .body {
        transform-origin: top;
        animation: press-to-idle-body 1s ease; }
      .cat-row .container .cat.press-to-idle .leg-front-left {
        transform-origin: center;
        animation: press-to-idle-leg-front-left 1s ease; }
      .cat-row .container .cat.press-to-idle .leg-front-right {
        transform-origin: center;
        animation: press-to-idle-leg-front-right 1s ease; }
      .cat-row .container .cat.press-to-idle .leg-back-left {
        transform-origin: center;
        animation: press-to-idle-leg-back-left 1s ease; }
        .cat-row .container .cat.press-to-idle .leg-back-left .bottom {
          transform-origin: center;
          animation: press-to-idle-leg-back-left-bottom 1s ease; }
      .cat-row .container .cat.press-to-idle .leg-back-right {
        transform-origin: center;
        animation: press-to-idle-leg-back-right 1s ease; }

@keyframes press-to-idle-body {
  0% {
    transform: rotate(-15deg) translateX(-120px) translateY(70px); }
  100% {
    transform: rotateZ(-7deg) translateX(-20px); } }

@keyframes press-to-idle-head {
  0% {
    transform: rotate(-15deg) translateX(7px) translateY(75px); }
  100% {
    transform: rotateZ(-4deg) translateX(38px) translateY(22px); } }

@keyframes press-to-idle-leg-front-left {
  0% {
    transform: rotate(5deg) translateX(80px) translateY(140px); }
  100% {
    transform: rotateZ(-45deg) translateX(62px) translateY(-219px); } }

@keyframes press-to-idle-leg-front-right {
  0% {
    transform: rotate(35deg) translateX(130px) translateY(200px); }
  100% {
    transform: rotateZ(-3deg) translateX(0px) translateY(0px); } }

@keyframes press-to-idle-leg-back-left {
  0% {
    transform: rotate(-15deg) translateX(10px) translateY(60px); }
  100% {
    transform: rotateZ(-1deg) translateX(0px) translateY(0px); } }

@keyframes press-to-idle-leg-back-left-bottom {
  0% {
    transform: rotate(35deg) translateX(110px) translateY(-110px); }
  100% {
    transform: rotateZ(0deg) translateX(0px) translateY(0px); } }

@keyframes press-to-idle-leg-back-right {
  0% {
    transform: rotate(25deg) translateX(-20px) translateY(50px); }
  100% {
    transform: rotateZ(0deg) transalteX(0px) translateY(0px); } }
      .cat-row .container .cat.press .catSVG {
        transform-origin: center;
        animation: move-forward 1.0s ease infinite; }
      .cat-row .container .cat.press .head, .cat-row .container .cat.press .necklace {
        transform-origin: center;
        animation: press-bend-head 1.0s ease infinite; }
      .cat-row .container .cat.press .body {
        transform-origin: top;
        animation: press-bend-upper-body 1.0s ease infinite; }
      .cat-row .container .cat.press .leg-front-left {
        transform-origin: center;
        animation: press-bend-leg-front-left 1.0s ease infinite; }
      .cat-row .container .cat.press .leg-front-right {
        transform-origin: center;
        animation: press-bend-leg-front-right 1.0s ease infinite; }
      .cat-row .container .cat.press .leg-back-left {
        transform-origin: center;
        animation: press-bend-leg-back-left 1.0s ease infinite; }
        .cat-row .container .cat.press .leg-back-left .bottom {
          transform-origin: center;
          animation: press-bend-leg-back-left-bottom 1.0s ease infinite; }
      .cat-row .container .cat.press .leg-back-right {
        transform-origin: center;
        animation: press-bend-leg-back-right 1.0s ease infinite; }

@keyframes move-forward {
  50% {
    transform: translateX(-150px); } }

@keyframes press-bend-upper-body {
  50% {
    transform: rotate(-15deg) translateX(-120px) translateY(70px); } }

@keyframes press-bend-head {
  50% {
    transform: rotate(-15deg) translateX(7px) translateY(75px); } }

@keyframes press-bend-leg-front-left {
  50% {
    transform: rotate(5deg) translateX(80px) translateY(140px); } }

@keyframes press-bend-leg-front-right {
  50% {
    transform: rotate(35deg) translateX(130px) translateY(200px); } }

@keyframes press-bend-leg-back-left {
  50% {
    transform: rotate(-15deg) translateX(10px) translateY(60px); } }

@keyframes press-bend-leg-back-left-bottom {
  50% {
    transform: rotate(35deg) translateX(110px) translateY(-110px); } }

@keyframes press-bend-leg-back-right {
  50% {
    transform: rotate(25deg) translateX(-20px) translateY(50px); } }
      .cat-row .container .cat.idle-to-say .head, .cat-row .container .cat.idle-to-say .necklace {
        transform-origin: center;
        animation: idle-to-say-head 0.5s ease; }
      .cat-row .container .cat.idle-to-say .body {
        transform-origin: top;
        animation: idle-to-say-body 0.5s ease; }
      .cat-row .container .cat.idle-to-say .leg-front-left {
        transform-origin: center;
        animation: idle-to-say-leg-front-left 0.5s ease; }
      .cat-row .container .cat.idle-to-say .leg-front-right {
        transform-origin: center;
        animation: idle-to-say-leg-front-right 0.5s ease; }

@keyframes idle-to-say-head {
  0% {
    transform: rotateZ(-4deg) translateX(38px) translateY(22px); }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(2px); } }

@keyframes idle-to-say-leg-front-left {
  0% {
    transform: rotateZ(-45deg) translateX(62px) translateY(-219px); }
  100% {
    transform: rotate(0deg) translateX(7px) translateY(4px); } }

@keyframes idle-to-say-leg-front-right {
  0% {
    transform: rotateZ(-3deg) translateY(0px); }
  100% {
    transform: rotateZ(-3deg) translateY(-15px); } }

@keyframes idle-to-say-body {
  0% {
    transform: rotateZ(-7deg) translateX(-20px); }
  100% {
    transform: rotateZ(0deg) translateX(0px); } }
      .cat-row .container .cat.say-to-idle .head, .cat-row .container .cat.say-to-idle .necklace {
        transform-origin: center;
        animation: say-to-idle-head 0.5s ease; }
      .cat-row .container .cat.say-to-idle .body {
        transform-origin: top;
        animation: say-to-idle-body 0.5s ease; }
      .cat-row .container .cat.say-to-idle .leg-front-left {
        transform-origin: center;
        animation: say-to-idle-leg-front-left 0.5s ease; }
      .cat-row .container .cat.say-to-idle .leg-front-right {
        transform-origin: center;
        animation: say-to-idle-leg-front-right 0.5s ease; }

@keyframes say-to-idle-head {
  0% {
    transform: rotate(0deg) translateX(0px) translateY(2px); }
  100% {
    transform: rotateZ(-4deg) translateX(38px) translateY(22px); } }

@keyframes say-to-idle-body {
  0% {
    transform: rotateZ(0deg) translateX(0px); }
  100% {
    transform: rotateZ(-7deg) translateX(-20px); } }

@keyframes say-to-idle-leg-front-left {
  0% {
    transform: rotate(0deg) translateX(7px) translateY(4px); }
  100% {
    transform: rotateZ(-45deg) translateX(62px) translateY(-219px); } }

@keyframes say-to-idle-leg-front-right {
  0% {
    transform: rotateZ(-3deg) translateY(-15px); }
  100% {
    transform: rotateZ(-3deg) translateY(0px); } }
      .cat-row .container .cat.say .head, .cat-row .container .cat.say .necklace {
        animation: say-rotate-head 1.0s ease infinite; }
      .cat-row .container .cat.say .body {
        transform-origin: top;
        transform: rotateZ(0deg) translateX(0px); }
      .cat-row .container .cat.say .leg-front-left {
        transform-origin: center;
        animation: say-leg-front-left 1.0s ease infinite; }
      .cat-row .container .cat.say .leg-front-right {
        transform-origin: center;
        transform: rotateZ(-3deg) translateY(-15px); }

@keyframes say-rotate-head {
  0% {
    transform: rotate(0deg) translateX(0px) translateY(2px); }
  50% {
    transform: rotate(-10deg) translateX(-60px) translateY(65px); }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(2px); } }

@keyframes say-leg-front-left {
  0% {
    transform: rotate(0deg) translateX(7px) translateY(4px); }
  50% {
    transform: rotate(-30deg) translateX(27px) translateY(-170px); }
  100% {
    transform: rotate(0deg) translateX(7px) translateY(4px); } }
    .cat-row .container .bowl {
      position: absolute;
      width: 20%;
      height: 20%;
      min-width: 30px;
      min-height: 10px;
      bottom: 5%;
      left: 15%; }

.actions-container {
  display: flex;
  background-image: url("/assets/images/modal-background.png");
  color: #fafafa;
  position: fixed;
  top: 0;
  right: 0;
  width: 600px;
  height: 60px;
  border-bottom-left-radius: 6px;
  z-index: 10; }
  .actions-container .actions-menu {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    width: 400px; }
    .actions-container .actions-menu .action {
      margin: 0 20px;
      width: 25px;
      height: 25px;
      cursor: pointer; }
      .actions-container .actions-menu .action.restart {
        transform: rotateZ(115deg); }
      .actions-container .actions-menu .action.guillotine {
        height: 50px;
        margin-top: 5px; }
    .actions-container .actions-menu .guillotine.on-top {
      z-index: 10; }
    .actions-container .actions-menu .guillotine.dropped .blade {
      animation: 0.5s drop-guillotine ease-in 1 forwards; }
    .actions-container .actions-menu .guillotine.lifted .blade {
      animation: 0.5s lift-guillotine ease-in 1 forwards; }

@keyframes drop-guillotine {
  from {
    transform: translateY(0%); }
  to {
    transform: translateY(320%); } }

@keyframes lift-guillotine {
  from {
    transform: translateY(320%); }
  to {
    transform: translateY(0%); } }
    .actions-container .actions-menu .score-container {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.4rem;
      height: 30px;
      margin-top: -10px; }
      .actions-container .actions-menu .score-container .fish-score {
        width: 60%;
        height: 60%;
        min-width: 40px; }
      .actions-container .actions-menu .score-container #fish-score {
        stroke-width: 1;
        stroke: #232323;
        stroke-linecap: butt;
        stroke-dasharray: 0; }
      .actions-container .actions-menu .score-container .separator {
        padding: 10px; }
      .actions-container .actions-menu .score-container .score {
        font-size: 1.7rem; }

.modal {
  overflow: hidden;
  position: fixed;
  width: 70%;
  height: 300px;
  left: 15%;
  background-image: url("/assets/images/modal-background.png");
  color: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 1;
  font-size: 21px;
  border-radius: 8px;
  transition: height 1s; }
  .modal button {
    color: #e3e3e3;
    background-color: #343434;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    width: 200px;
    height: 50px;
    margin-top: 20px;
    cursor: pointer; }
    .modal button:hover {
      background-color: #454545;
      border: 1px solid #fcfcfc; }
  .modal.hidden {
    height: 0%; }
  .modal .audio {
    width: 80px;
    height: 80px;
    margin-top: 20px; }

.audio {
  border: 0px;
  background-image: url("/assets/images/audio.svg");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  transition: all 1s; }
  .audio.no-audio {
    background-image: url("/assets/images/no-audio.svg"); }