html,
body {
    margin: 0;
    background: #DFEDF7;
}

.content {
    height: 100vh;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    color: rgba(241, 241, 241, 0.527);
}

.centerbox {
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    height: 100%;
    width: 100%;
}

.diorama {
    width: 95vw;
    max-height: 95vh;
}

.ninja {
    transform: translate(630px, 0);
    -webkit-animation: ninja 25s ease-in-out 1;
    animation: ninja 25s ease-in-out 1;
}

@-webkit-keyframes ninja {
    0% {
        transform: translate(630px, -400px);
    }

    50% {
        transform: translate(630px, -100px);
    }

    70% {
        transform: translate(630px, -300px);
    }

    100% {
        transform: translate(630px, 0);
    }
}

@keyframes ninja {
    0% {
        transform: translate(630px, -400px);
    }

    50% {
        transform: translate(630px, -100px);
    }

    70% {
        transform: translate(630px, -300px);
    }

    100% {
        transform: translate(630px, 0);
    }
}

.arm {
    transform: translate(870px, -222px);
    -webkit-animation: arm 5s ease-in-out 25s 1;
    animation: arm 5s ease-in-out 25s 1;
}

@-webkit-keyframes arm {
    0% {
        transform: translate(870px, -222px);
    }

    50% {
        transform: translate(870px, -222px);
    }

    70% {
        transform: translate(870px, -30px);
    }

    90% {
        transform: translate(870px, 222px);
    }

    95% {
        transform: matrix(0, 1, -1, 0, 870, 222)
    }

    98% {
        transform: matrix(0, -1, 1, 0, 870, 222)
    }

    100% {
        transform: matrix(0, -1, 1, 0, 870, -222)
    }
}

@keyframes arm {
    0% {
        transform: translate(870px, -222px);
    }

    50% {
        transform: translate(870px, -222px);
    }

    70% {
        transform: translate(870px, -30px);
    }

    90% {
        transform: translate(870px, 222px);
    }

    95% {
        transform: matrix(0, 1, -1, 0, 870, 222)
    }

    98% {
        transform: matrix(0, -1, 1, 0, 870, 222)
    }

    100% {
        transform: matrix(0, -1, 1, 0, 870, -222)
    }
}

.star {
    transform: translate(870px, -222px);
    -webkit-animation: star 5s 25.2s 1;
    animation: star 5s 25.3s 1;
}

@-webkit-keyframes star {
    0% {
        transform: translate(940px, 320px);
        opacity: 0
    }

    92% {
        transform: translate(940px, 320px);
        opacity: 0
    }

    100% {
        transform: translate(1165px, 390px);
        opacity: 1
    }
}

@keyframes star {
    0% {
        transform: translate(940px, 320px);
        opacity: 0
    }

    92% {
        transform: translate(940px, 320px);
        opacity: 0
    }

    100% {
        transform: translate(1165px, 390px);
        opacity: 1
    }
}

.starstuck,
.eye {
    -webkit-animation: starstuck 30.2s ease-in-out 1;
    animation: starstuck 30.5s ease-in-out 1;
}

@-webkit-keyframes starstuck {
    0% {
        opacity: 0
    }

    99% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes starstuck {
    0% {
        opacity: 0
    }

    99% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}


.teeth {
    -webkit-animation: teeth 2s cubic-bezier(0.87, -0.55, 0.17, 1.83) 15;
    animation: teeth 2s cubic-bezier(0.87, -0.55, 0.17, 1.83) 15;
}

@-webkit-keyframes teeth {
    0% {
        opacity: 0
    }

    30% {
        opacity: 1
    }

    70% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes teeth {
    0% {
        opacity: 0
    }

    30% {
        opacity: 1
    }

    70% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.shifteye {
    -webkit-animation: shifteye 4s cubic-bezier(0.87, -0.55, 0.17, 1.83) 15s 1;
            animation: shifteye 4s cubic-bezier(0.87, -0.55, 0.17, 1.83) 15s 1;
    opacity:0;
}

@-webkit-keyframes shifteye {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes shifteye {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.tail {
    -webkit-animation: tail 4s ease-in-out 8;
    animation: tail 4s ease-in-out 8;
    transform-origin: 158px 0;
}

@-webkit-keyframes tail {
    0% {
        transform: matrix(1.2, 0, 0, 1.3, 850, 730);
    }

    25% {
        transform: matrix(1.2, .1, -.1, 1.3, 850, 730);
    }

    50% {
        transform: matrix(1.2, .3, -.3, 1.3, 850, 730);
    }

    70% {
        transform: matrix(1.2, -.08, .08, 1.3, 850, 730);
    }

    100% {
        transform: matrix(1.2, 0, 0, 1.3, 850, 730);
    }
}

@keyframes tail {
    0% {
        transform: matrix(1.2, 0, 0, 1.3, 850, 730);
    }

    25% {
        transform: matrix(1.2, .1, -.1, 1.3, 850, 730);
    }

    50% {
        transform: matrix(1.2, .3, -.3, 1.3, 850, 730);
    }

    70% {
        transform: matrix(1.2, -.08, .08, 1.3, 850, 730);
    }

    100% {
        transform: matrix(1.2, 0, 0, 1.3, 850, 730);
    }
}

/* final screen and replay */

.fin {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    background: #222;
    height: 100vh;
    width: 100vw;
    -webkit-animation: fin 34s linear 1;
    animation: fin 34s linear 1;
}

.fin p {
    color: #ddd;
    font-size: calc(1.2rem + 6 * ((100vw - 320px) / 680));
    text-align: center;
    font-family: 'Rhodium Libre', serif;
}

@-webkit-keyframes fin {
    0% {
        opacity: 0
    }


    99% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fin {
    0% {
        opacity: 0
    }


    99% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fin button {
    height: 70px;
    width: 70px;
    background: #222;
    /* margin: 15px auto; */
    border: 0;
    outline: 0;
    border-radius: 110%;
}

.fin button:hover {
    background: #222;
}

.fin button:focus {
    border: 2px dashed #777;
}

/* allows the svg hover effect */

.replay {
    margin: 3px 0 0 -1px;
    fill: #777;
    cursor: pointer;
    transition: 500ms;
}

.replay:hover,
.replay:focus {
    fill: #ddd;
    border: 0;
    outline: 0;
}

.replay:active {
    fill: #5b9ac6;
    border: 0;
    outline: 0;
}

/* devanagari */
@font-face {
    font-family: 'Rhodium Libre';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/rhodiumlibre/v7/1q2AY5adA0tn_ukeHcQHqpx6lELBe72g.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
    font-display: swap;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Rhodium Libre';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/rhodiumlibre/v7/1q2AY5adA0tn_ukeHcQHqpx6lE3Be72g.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
    font-display: swap;
  }
  /* latin */
  @font-face {
    font-family: 'Rhodium Libre';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/rhodiumlibre/v7/1q2AY5adA0tn_ukeHcQHqpx6lEPBew.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    font-display: swap;
  }