/* TYPE ANIMATION */



@keyframes worddrop {
    0% {
        transform: translate(0, -30%);
        opacity: 0;
        color: blue;
    }
    20% {
        transform: translate(0, 0%);
        opacity: 1;
    }
    40% {
        transform: translate(0, 0%);
        opacity: 1;
    }
    50% {
        transform: translate(0, 30%);
        color: red;
        opacity: 0;
    }
    100% {
        transform: translate(0, 30%);
        color: red;
        opacity: 0;
    }
}

.worddrop-wrapper {
    position: relative;
    justify-content: center;
    align-items: center;
}

.shabada, .feelgood {
    text-align: center;
}

.feelgood {
    padding-top: 45px;
}

article.lyric {
    height: 80vh;
    margin-top: 25vh;
}

.worddrop span {
    opacity: 0;
    display: inline-block;
    font-size: 3em;
    animation: worddrop 6s ease-in-out infinite;
    padding: 3px;
}

.shabada .worddrop span:nth-child(2) {
    animation-delay: 0.5s;
}

.shabada .worddrop span:nth-child(3) {
    animation-delay: 2.5s;
}

.shabada .worddrop span:nth-child(4) {
    animation-delay: 2.8s;
}

.shabada .worddrop span:nth-child(5) {
    animation-delay: 3.2s;
}

.shabada .worddrop span:nth-child(6) {
    animation-delay: 3.5s;
}

.shabada .worddrop span:nth-child(7) {
    animation-delay: 3.8s;
}

.feelgood .worddrop span:nth-child(1) {
    animation-delay: 4.5s;
}

.feelgood .worddrop span:nth-child(2) {
    animation-delay: 4.8s;
}

/* GLitch Effect */


/* VHS DROP IN EFFECT

@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
.jt {
    position: relative;
    font-size: 20vmin;
    font-family: 'Staatliches', sans-serif;
    text-transform: uppercase;
    font-display: swap;
    text-shadow: 0 0 10px tomato;
}

.jt__row {
    display: block;
}

.jt__row:nth-child(1) {
    clip-path: polygon(-10% 75%, 110% 75%, 110% 110%, -10% 110%);
}

.jt__row:nth-child(2) {
    clip-path: polygon(-10% 50%, 110% 50%, 110% 75.3%, -10% 75.3%);
}

.jt__row:nth-child(3) {
    clip-path: polygon(-10% 25%, 110% 25%, 110% 50.3%, -10% 50.3%);
}

.jt__row:nth-child(4) {
    clip-path: polygon(-10% 0%, 110% 0%, 110% 25.3%, -10% 25.3%);
}

.jt__row.jt__row--sibling {
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    width: 800px;
}

.jt__text {
    display: block;
    transform-origin: bottom left;
    animation: moveIn 2s 0s cubic-bezier(.36, 0, .06, 1) alternate infinite;
}

.jt__row:nth-child(1) .jt__text {
    transform: translateY(-0.1em);
}

.jt__row:nth-child(2) .jt__text {
    transform: translateY(-0.3em) scaleY(1.1);
}

.jt__row:nth-child(3) .jt__text {
    transform: translateY(-0.5em) scaleY(1.2);
}

.jt__row:nth-child(4) .jt__text {
    transform: translateY(-0.7em) scaleY(1.3);
}

.jt__row:nth-child(5) .jt__text {
    transform: translateY(-0.9em) scaleY(1.4);
}

.jt__row:nth-child(6) .jt__text {
    transform: translateY(-1.1em) scaleY(1.5);
}

@keyframes moveIn {
    50%, 100% {
        transform: translateY(0em)
    }
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
    }
}

.debug .jt__row:nth-child(even) {
    color: black;
    background: white;
}

.debug .jt__row:nth-child(odd) {
    color: white;
    background: black;
}

* {
    box-sizing: border-box
}

.jt-box {
    margin: 0;
    background: black;
    color: tomato;
    height: 100%;
}

.jt-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
} */

/* BOOMBOX */

/* everything has to be pixels for 3D reasons */

/* Booxbox Colors */

:root {
    --boxMain: var(--grey);
    --boxSecond: var(--lightgrey);
    --boxHigh: var(--red);
    --border: 6px solid var(--black);
    --borderRad: 2px;
    /* dimensions */
    --boxWidth: 760px;
    --boxHeight: 440px;
    --boxDepth: 200px;
}

@media screen and (max-width: 800px) {
    :root {
        --boxWidth: 100%;
        --boxHeight: 600px;
    }
}

* {
    box-sizing: border-box;
}

#boombox {
    width: var(--boxWidth);
    height: var(--boxHeight);
    margin: 0px auto;
    perspective: 1000px;
    perspective-origin: 50% 100px;
    transform-style: preserve-3d;
}

.boombox-body {
    position: relative;
    width: var(--boxWidth);
    height: var(--boxHeight);
    transform-style: preserve-3d;
    transform: scale(0.8);
}

[class^="bb"] {
    position: absolute;
    transform-style: preserve-3d;
    background-color: var(--boxMain);
    border: var(--border);
}

.bb-top {
    width: var(--boxWidth);
    height: var(--boxDepth);
    transform: rotateX( -90deg);
    transform-origin: top right;
}

.bb-right {
    width: var(--boxDepth);
    height: var(--boxHeight);
    right: 0px;
    transform: rotateY(-90deg);
    transform-origin: top right;
}

.bb-bottom {
    width: var(--boxWidth);
    height: var(--boxDepth);
    bottom: 0px;
    transform: rotateX(90deg);
    transform-origin: bottom left;
}

.bb-left {
    width: var(--boxDepth);
    height: var(--boxHeight);
    transform: rotateY(90deg);
    transform-origin: top left;
}

.bb-back {
    width: var(--boxWidth);
    height: var(--boxHeight);
    transform: translateZ(-200px) rotateY(180deg);
}

.bb-front {
    /*gradient with two circles for speakers*/
    width: var(--boxWidth);
    height: var(--boxHeight);
    background: var(--boxMain) repeat-x bottom left;
    background-image: radial-gradient(circle, var(--boxMain) 2vmin, var(--black) 2vmin, var(--black) 3vmin, var(--boxSecond) 3vmin, var(--boxSecond) 9vmin, var(--black) 9vmin, var(--black) 9.5vmin, var(--boxSecond) 9.5vmin, var(--boxSecond) 12vmin, var(--black) 12vmin, var(--black) 13vmin, var(--boxMain) 13vmin);
    background-size: 33.3% 70%;
    border: 6px solid var(--black);
    border-radius: var(--borderRad);
}

/*small screen with one circle*/

@media screen and (max-width: 800px) {
    .bb-front {
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 70%;
        background-image: radial-gradient(circle, var(--boxMain) 4vmin, var(--black) 4vmin, var(--black) 5vmin, var(--boxSecond) 5vmin, var(--boxSecond) 21vmin, var(--black) 21vmin, var(--black) 21.5vmin, var(--boxSecond) 21.5vmin, var(--boxSecond) 24vmin, var(--black) 24vmin, var(--black) 25vmin, var(--boxMain) 25vmin);
    }
}

.master-controls {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(2, 1fr) 12%;
    /*name our grid areas so they are more manipulative later*/
    grid-template-areas: "volin panin power" "vollab panlab power";
    justify-items: center;
    align-items: center;
    padding: 30px;
    height: 120px;
    background-color: var(--boxSecond);
    border-bottom: var(--border);
}

/* change control grid areas for smaller boom box */

@media screen and (max-width: 800px) {
    .master-controls {
        /*grid-gap: 10px;*/
        grid-template-columns: 16% 1fr 12%;
        grid-template-areas: "vollab volin power" "panlab panin power";
    }
}

.master-controls input, .master-controls label {
    display: block;
}

.master-controls label {
    padding-top: 20px;
}

@media screen and (max-width: 800px) {
    .master-controls label {
        padding-top: 6px;
    }
}

.master-controls input::before, .master-controls input::after {
    line-height: 2;
    color: var(--black);
}

.master-controls input::before {
    padding-right: 1vw;
}

.master-controls input::after {
    padding-left: 1vw;
}

.control-volume {
    grid-area: volin;
}

.control-volume::before {
    content: 'min';
}

.control-volume::after {
    content: 'max';
}

label[for="volume"] {
    grid-area: vollab;
    margin-top: 10px;
}

.control-panner {
    grid-area: panin;
}

.control-panner::before {
    content: 'left';
}

.control-panner::after {
    content: 'right';
}

label[for="panner"] {
    grid-area: panlab;
    margin-top: 10px;
}

@media screen and (max-width: 800px) {
    label[for="volume"], label[for="panner"] {
        margin-top: 0px;
    }
    .control-volume {
        margin-bottom: 20px;
    }
}

.control-power {
    grid-area: power;
    align-self: center;
    width: 40px;
    height: 40px;
    border: 3px solid var(--black);
    border-radius: 20px;
    cursor: pointer;
}

.control-power span {
    display: none;
}

/* tape area ~~~~~~~~~~~~~~~~~~~~~*/

.tape {
    display: grid;
    grid-template-rows: 222px 80px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "tape tape tape tape tape" "back play play play next";
    width: 300px;
    margin: 0px auto;
    background: var(--boxMain) no-repeat center center;
    background-image: radial-gradient(circle at 80px, var(--boxSecond) 20px, var(--black) 20px, var(--black) 25px, transparent 25px), radial-gradient(circle at 210px, var(--boxSecond) 20px, var(--black) 20px, var(--black) 25px, transparent 25px), linear-gradient(180deg, transparent 93px, var(--black) 93px, var(--black) 101px, var(--boxHigh) 101px, var(--boxHigh) 201px, var(--black) 201px, var(--black) 209px, transparent 209px), radial-gradient(circle at 80px, var(--boxHigh) 50px, var(--black) 50px, var(--black) 58px, transparent 58px), radial-gradient(circle at 210px, var(--boxHigh) 50px, var(--black) 50px, var(--black) 58px, transparent 58px);
    background-size: 100% 100%, 100% 100%, 42% 100%, 100% 100%, 100% 100%;
    border: var(--border);
    border-bottom-width: 0px;
    border-radius: var(--borderRad);
}

@media screen and (max-width: 800px) {
    .tape {
        /*width: 80%; margin-top: 30vh;*/
        margin-top: 220px;
        grid-template-rows: 168px 74px;
        background-image: radial-gradient(circle at 80px, var(--boxSecond) 20px, var(--black) 20px, var(--black) 25px, transparent 25px), radial-gradient(circle at 210px, var(--boxSecond) 20px, var(--black) 20px, var(--black) 25px, transparent 25px), linear-gradient(180deg, transparent 63px, var(--black) 63px, var(--black) 71px, var(--boxHigh) 71px, var(--boxHigh) 171px, var(--black) 171px, var(--black) 179px, transparent 179px), radial-gradient(circle at 80px, var(--boxHigh) 50px, var(--black) 50px, var(--black) 58px, transparent 58px), radial-gradient(circle at 210px, var(--boxHigh) 50px, var(--black) 50px, var(--black) 58px, transparent 58px);
    }
}

audio {
    grid-area: tape;
}

[class^="tape-controls"] {
    border: none;
}

[class^="tape-controls"] span {
    display: none;
}

.tape-controls-play {
    grid-area: play;
}

/* ~~~~~~~~~~~~~~~~ All the crazy range styling */

input[type=range] {
    -webkit-appearance: none;
    width: 30vw;
    background: transparent;
}

/* set min & max for different screen sizes */

@media screen and (min-width: 1100px) {
    input[type=range] {
        width: 270px;
    }
}

@media(max-width: 680px) {
    input[type=range] {
        width: 180px;
    }
}

@media(max-width: 380px) {
    input[type=range] {
        width: 130px;
    }
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -1vh;
    height: 4vh;
    width: 2vw;
    border: 0.5vmin solid var(--black);
    border-radius: var(--borderRad);
    background-color: var(--boxMain);
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    height: 4vh;
    width: 2vw;
    border: 0.5vmin solid var(--black);
    border-radius: var(--borderRad);
    background-color: var(--boxMain);
    cursor: pointer;
}

input[type=range]::-ms-thumb {
    height: 4vh;
    width: 2vw;
    border: 0.5vmin solid var(--black);
    border-radius: var(--borderRad);
    background-color: var(--boxMain);
    cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
    height: 2vh;
    cursor: pointer;
    background-color: var(--black);
    border-radius: var(--borderRad);
}

input[type=range]::-moz-range-track {
    height: 2vh;
    cursor: pointer;
    background-color: var(--black);
    border-radius: var(--borderRad);
}

input[type=range]::-ms-track {
    height: 2vh;
    cursor: pointer;
    background-color: var(--black);
    border-radius: var(--borderRad);
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: var(--boxMain);
}

/*~~~~~~~~~~~~~~~~ the play pause & power icons*/

[data-playing] {
    background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="black" /></svg>') no-repeat center center;
    background-size: 60% 60%;
    cursor: pointer;
}

[data-playing]:hover {
    background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="hsla(32, 100%, 50%, 1)" /></svg>') no-repeat center center;
    background-size: 60% 60%;
}

[data-playing="true"] {
    background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="black" /></svg>') no-repeat center center;
    background-size: 60% 60%;
}

[data-playing="true"]:hover {
    background: transparent url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="hsla(32, 100%, 50%, 1)" /></svg>') no-repeat center center;
    background-size: 60% 60%;
}

[data-power] {
    background: var(--boxSecond) url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>') no-repeat center center;
    background-size: 60% 60%;
}

[data-power]:hover, [data-power="on"] {
    background: var(--boxHigh) url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>') no-repeat center center;
    background-size: 60% 60%;
}

/* controls ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#move-controls {
    position: fixed;
    bottom: 0px;
    right: 0px;
    display: none;
    justify-content: flex-end;
    background: hsla(0, 0%, 100%, 0.5);
    border: var(--border);
    width: 20vw;
}

/* little hack for small screens to make sure you can press play */

@media screen and (max-width: 800px) {
    body {
        padding-bottom: 70px;
    }
}

#move-controls h3 {
    display: none;
}

.move-controls_xy, .move-controls_rotate {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 10vmin);
    margin: 3vmin;
}

.move-controls_xy button:nth-of-type(1), .move-controls_rotate button:nth-of-type(1) {
    grid-area: 2 / 1 / 3 / 2;
}

.move-controls_xy button:nth-of-type(2), .move-controls_rotate button:nth-of-type(2) {
    grid-area: 1 / 2 / 2 / 3;
}

.move-controls_xy button:nth-of-type(3), .move-controls_rotate button:nth-of-type(3) {
    grid-area: 2 / 3 / 3 / 4;
}

.move-controls_xy button:nth-of-type(4), .move-controls_rotate button:nth-of-type(4) {
    grid-area: 3 / 2 / 4 / 3;
}

.move-controls_z {
    display: grid;
    justify-items: center;
}

.move-controls_z button:nth-of-type(1) {
    align-self: end;
}

.move-controls_z button:nth-of-type(2) {
    align-self: start;
}

#move-controls button {
    display: inline-block;
    margin: 0px;
    padding: 3vmin 4vmin;
    background-color: var(--boxMain);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70% 70%;
    border: var(--border);
    border-radius: var(--borderRad);
    cursor: pointer;
}

@media screen and (max-width: 800px) {
    #move-controls button {
        padding: 2vmin 3vmin;
    }
}

#move-controls button:hover {
    background-color: var(--boxSecond);
}

#move-controls button span {
    display: none;
}

/* control icons */

#move-controls button[data-control="left"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M187.297,67.908h-82.468V17.505c0-7.606-9.242-11.446-14.575-6.044L8.995,93.147c-3.34,3.341-3.34,8.674,0,12.016 l81.259,81.685c5.402,5.404,14.575,1.564,14.575-6.041v-50.334h82.468c4.691,0,8.53-3.839,8.53-8.531V76.44C195.827,71.747,191.988,67.908,187.297,67.908z"/></svg>');
}

#move-controls button[data-control="up"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M132.405,185.293v-82.468h50.403c7.606,0,11.446-9.242,6.044-14.575L107.167,6.991c-3.341-3.34-8.674-3.34-12.016,0 L13.467,88.25c-5.404,5.402-1.564,14.575,6.041,14.575h50.334v82.468c0,4.691,3.839,8.53,8.531,8.53h45.501 C128.566,193.823,132.405,189.985,132.405,185.293z"/></svg>');
}

#move-controls button[data-control="right"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M15.021,130.402h82.468v50.403c0,7.606,9.242,11.446,14.575,6.044l81.259-81.686c3.34-3.341,3.34-8.673,0-12.015 l-81.259-81.685c-5.402-5.404-14.575-1.564-14.575,6.041v50.334H15.021c-4.691,0-8.53,3.839-8.53,8.531v45.5 C6.491,126.563,10.33,130.402,15.021,130.402z"/></svg>');
}

#move-controls button[data-control="down"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M69.913,13.018v82.468H19.509c-7.606,0-11.446,9.241-6.043,14.574l81.685,81.259c3.341,3.34,8.673,3.34,12.015,0 l81.685-81.259c5.404-5.402,1.564-14.574-6.041-14.574h-50.334V13.018c0-4.691-3.839-8.53-8.531-8.53h-45.5 C73.752,4.488,69.913,8.326,69.913,13.018z"/></svg>');
}

#move-controls button[data-control="back"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M142.706,182.798l-13.872-81.329l37.906-0.012c5.721-0.002,3.264-9.116-3.361-14.374l-53.61-80.126 c-0.319-3.294-0.823-3.294-1.402,0l-59.94,80.16c-7.087,5.331-10.219,14.378-4.5,14.377l37.855-0.012l-20.336,81.342 c-1.157,4.628,3.1,8.411,9.46,8.409l61.672-0.02C138.938,191.212,143.495,187.426,142.706,182.798z"/></svg>');
}

#move-controls button[data-control="forward"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 198.43"><path d="M90.711,12.843L74.096,93.626H28.482c-6.883,0-15.651,9.053-13.343,14.278l77.002,79.599 c4.844,3.271,12.844,3.271,17.784,0l79.272-79.599c2.421-5.293-6.051-14.278-12.933-14.278h-45.551l-14.347-80.783 c-0.815-4.596-2.861-8.356-4.545-8.356H95.492C93.808,4.487,91.656,8.247,90.711,12.843z"/></svg>');
}

#move-controls button[data-control="rotate-left"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.101 111.617 190.645 83.712"><path d="M12.402,114.717h51.956c8.287,0,12.437,10.02,6.577,15.879l-16.18,16.181c12.116,11.345,27.84,17.563,44.521,17.549 c30.004-0.027,55.93-20.597,63.09-49.161c0.521-2.079,2.372-3.547,4.516-3.547h22.208c2.905,0,5.113,2.639,4.575,5.494 c-8.385,44.53-47.482,78.218-94.449,78.218c-25.752,0-49.139-10.129-66.395-26.619l-13.842,13.842 c-5.859,5.859-15.878,1.709-15.878-6.577v-51.956C3.101,118.882,7.265,114.717,12.402,114.717z"/></svg>');
}

#move-controls button[data-control="rotate-up"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="56.567 58.151 83.712 190.644"><path d="M137.18,67.453v51.955c0,8.287-10.02,12.438-15.879,6.577l-16.182-16.181c-11.344,12.116-17.562,27.84-17.548,44.521 c0.027,30.004,20.597,55.93,49.161,63.09c2.078,0.521,3.547,2.372,3.547,4.516v22.208c0,2.905-2.639,5.113-5.494,4.575 c-44.53-8.385-78.218-47.482-78.218-94.449c0-25.752,10.129-49.139,26.619-66.394L69.345,74.029 c-5.859-5.859-1.709-15.878,6.577-15.878h51.955C133.014,58.151,137.18,62.315,137.18,67.453z"/></svg>');
}

#move-controls button[data-control="rotate-right"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.101 111.617 190.645 83.712"><path d="M193.745,124.019v51.956c0,8.286-10.019,12.437-15.878,6.577l-13.842-13.842c-17.256,16.49-40.643,26.619-66.395,26.619 c-46.967,0-86.064-33.688-94.449-78.218c-0.538-2.855,1.67-5.494,4.575-5.494h22.208c2.144,0,3.995,1.468,4.516,3.547 c7.16,28.564,33.086,49.134,63.09,49.161c16.682,0.015,32.405-6.204,44.521-17.549l-16.181-16.181 c-5.86-5.859-1.71-15.879,6.577-15.879h51.955C189.581,114.717,193.745,118.882,193.745,124.019z"/></svg>');
}

#move-controls button[data-control="rotate-down"] {
    background-image: url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="56.567 58.151 83.712 190.645"><path d="M127.877,248.795H75.922c-8.286,0-12.437-10.02-6.577-15.879l13.842-13.842c-16.49-17.255-26.619-40.642-26.619-66.394 c0-46.967,33.688-86.064,78.218-94.449c2.855-0.538,5.494,1.67,5.494,4.575v22.208c0,2.144-1.469,3.995-3.547,4.516 c-28.564,7.16-49.134,33.086-49.161,63.09c-0.015,16.682,6.204,32.405,17.548,44.521l16.182-16.181 c5.859-5.86,15.879-1.71,15.879,6.577v51.954C137.18,244.631,133.014,248.795,127.877,248.795z"/></svg>');
}