@font-face {
    font-family: Michroma;
    src:
     url(./assets/fonts/michroma.woff2) format("woff2"),
     url(./assets/fonts/michroma.woff) format("woff");
    font-display: swap;
   }

   @font-face {
    font-family: Tourney;
    src:
     url(./assets/fonts/tourney.woff2) format("woff2"),
     url(./assets/fonts/tourney.woff) format("woff");
    font-display: swap;
   }

   @font-face {
    font-family: Raleway;
    src:
     url(./assets/fonts/raleway.woff2) format("woff2"),
     url(./assets/fonts/raleway.woff) format("woff");
    font-display: swap;
   }

   :root {
    --casio-bgcolor: #becedd;
    --casio-color: #6b799e;
   }

   .colorButtons {
    display: flex;
    justify-content: center;
    padding: 0 10px;
   }

   .colorButtons button {
    width: 25px;
    height: 25px;
    margin: 0 5px;
    border-radius: 5px;
    border: 2px solid var(--casio-color);
    background: var(--casio-bgcolor);
   }

   body.dark {
    background: #000;
    -webkit-animation: prepareSong 8s ease 8s alternate 3;
    animation: prepareSong 8s ease 8s alternate 3;
   }

   .thanos {
    width: 100px;
    -webkit-animation: moveThanos 5s linear infinite;
    animation: moveThanos 5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 25;
    border-radius: 50%;
   }

   @-webkit-keyframes moveThanos {

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

    25% {
     transform: translate(90vw, 75vh);
    }

    50% {
     transform: translate(90vw, 0);
    }

    75% {
     transform: translate(0, 75vh);
    }
   }

   @keyframes moveThanos {

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

    25% {
     transform: translate(90vw, 75vh);
    }

    50% {
     transform: translate(90vw, 0);
    }

    75% {
     transform: translate(0, 75vh);
    }
   }

   @-webkit-keyframes prepareSong {
    0% {
     background: #000;
    }

    100% {
     background: #333;
    }
   }

   @keyframes prepareSong {
    0% {
     background: #000;
    }

    100% {
     background: #333;
    }
   }

   body.party {
    background: var(--body-color, #000);
   }

   #pianoplay .container {
    display: flex;
    justify-content: center;
    margin-top: 3em;
   }

   #pianoplay .casio-pt1 {
    display: flex;
    width: 900px;
    height: 250px;
    background: var(--casio-bgcolor);
    border-radius: 4px;
    font-family: Raleway, Arial, serif;
    font-weight: 400;
    font-size: 9px;
    color: var(--casio-color);
    padding: 8px 5px 5px 5px;
    box-shadow:
     0 2px 1px #fffc inset,
     1px 1px 0 #0001,
     1px 1px 0 var(--casio-bgcolor),
     2px 2px 0 #0003,
     2px 2px 0 var(--casio-bgcolor),
     4px 4px 0 #0005,
     4px 4px 0 var(--casio-bgcolor),
     6px 6px 0 #0006,
     6px 6px 0 var(--casio-bgcolor),
     8px 8px 0 #0007,
     8px 8px 0 var(--casio-bgcolor),
     8px 8px 4px #0005;
   }

   #pianoplay .casio-pt1 .casio-left {
    width: 200px;
    min-width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
   }

   #pianoplay .casio-pt1 .casio-left .speaker-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
   }

   #pianoplay .casio-pt1 .casio-left .speaker-container .speaker {
    width: 170px;
    height: 180px;
    background:
     repeating-linear-gradient(to bottom, #0003 0 2px, #0005 2px 3px, transparent 3px 7px),
     linear-gradient(to right,
     transparent 0 32%,
     var(--casio-bgcolor) 32% 35%,
     transparent 35% 66%,
     var(--casio-bgcolor) 66% 68%,
     transparent 68% 100%),
     radial-gradient(circle, #0001 65%, transparent 65% 100%);
   }

   #pianoplay .casio-pt1 .casio-left .speaker-bottom {
    width: 100%;
    height: 50px;
    display: flex;
   }

   #pianoplay .casio-pt1 .casio-left .speaker-bottom .power {
    width: 60px;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   }

   #pianoplay .casio-pt1 .casio-left .speaker-bottom .power .led {
    width: 12px;
    height: 4px;
    background: #2f1f2a;
   }

   #pianoplay .casio-pt1 .casio-left .speaker-bottom .power .led.on {
    background: #c01812;
   }

   #pianoplay .casio-pt1 .casio-left .speaker-bottom .logo {
    display: flex;
    width: 100%;
    align-items: baseline;
   }

   #pianoplay .casio-pt1 .casio-left .speaker-bottom .logo .brand {
    font-family: "Michroma", sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-left: 6px;
   }

   #pianoplay .casio-pt1 .casio-left .speaker-bottom .logo .model {
    font-family: "Tourney", serif;
    font-weight: normal;
    font-size: 18px;
    margin-left: 6px;
   }

   #pianoplay .casio-pt1 .casio-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-right: 8px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls {
    min-height: 80px;
    border-top: 2px solid var(--casio-color);
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label {
    display: flex;
    align-items: flex-end;
    font-size: 9px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .semi.box {
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
    padding: 2px 3px;
    position: absolute;
    height: 10px;
    transform: translate(-28px, -2px);
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .options {
    display: flex;
    align-items: flex-end;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group.buttons span:not(.fill)::after {
    content: "â–ª";
    display: block;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .fill {
    margin: 0 2px;
    display: flex;
    justify-content: center;
    width: 5px;
    text-align: center;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group.buttons .arrow {
    width: 4px;
    margin: 0 6px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group .box {
    display: inline-block;
    border: 1px solid var(--casio-color);
    border-radius: 2px;
    padding: 0 10px;
    font-size: 10px;
    margin: 4px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group .box.last {
    margin-left: 2em;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group .fill {
    background: var(--casio-color);
    color: var(--casio-bgcolor);
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group .options {
    display: flex;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group .options>span {
    display: inline-block;
    max-width: 26px;
    padding: 2px 5px;
    text-align: center;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group .options>span.inline {
    max-width: none;
    width: 42px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label .group .options .volume {
    -webkit-clip-path: polygon(0 50%, 100% 15%, 100% 85%, 0 50%);
    clip-path: polygon(0 50%, 100% 15%, 100% 85%, 0 50%);
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label> :nth-child(4) .options {
    margin-left: 6px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label> :nth-child(4) .options>span {
    width: 20px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-label> :nth-child(4) .options>span:nth-child(n+7) {
    transform: translateX(-3px);
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons {
    width: 100%;
    height: 25px;
    margin: 4px 0;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid {
    border: 1px solid #0004;
    border-bottom-color: #fff4;
    border-right-color: #fff4;
    width: 100%;
    height: 100%;
    background:
     linear-gradient(to bottom, var(--casio-bgcolor) 0 15%, transparent 15% 85%, var(--casio-bgcolor) 85% 100%),
     repeating-linear-gradient(to right, transparent 0 2px, #0004 2px 3px);
    display: flex;
    align-items: center;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid>div {
    background: var(--casio-bgcolor);
    padding: 0 6px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid>div:nth-child(1) {
    margin-left: 32px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid>div:nth-child(2) {
    margin-left: 36px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid>div:nth-child(3) {
    margin-left: 38px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid>div:nth-child(4) {
    margin-left: 36px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid>div:nth-child(5) {
    margin-left: 38px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group {
    display: flex;
    justify-content: space-around;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.buttons .button {
    margin: 0 10px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.end {
    margin-left: 24px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .group.end .big {
    margin: 0 4px;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .button {
    display: inline-block;
    border: 0;
    width: 8px;
    height: 18px;
    background: black;
    box-shadow:
     1px 1px 2px #0006,
     1px 0 0 #fff5 inset;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .button:active {
    box-shadow: 0 0 3px #0005 inset;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .big.button {
    width: 26px;
    background-image:
     linear-gradient(to top, #44517a 0 20%, transparent 20% 80%, #44517a 80% 100%),
     repeating-linear-gradient(to top, transparent 0 1px, #0003 1px 2px);
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .steelblue {
    background: #44517a;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .orange {
    background: #b34431;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .gold {
    background: #b67523;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .green {
    background: #398d79;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .grey {
    background: #53586b;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider {
    display: flex;
    align-items: center;
    height: 18px;
    border: 1px solid #0004;
    border-bottom-color: #fff7;
    border-right-color: #fff7;
    box-shadow: 2px 2px 2px #0003 inset;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input {
    display: none;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input+label {
    display: block;
    width: 12px;
    height: 8px;
    background: #000;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked+label {
    height: 16px;
    background: transparent;
    display: flex;
    position: relative;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked+label::before,
   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked+label::after {
    content: "";
    display: block;
    background: #444;
    width: 5px;
    border-radius: 1px;
    border-right: 1px solid #222;
    height: 16px;
    position: absolute;
   }

   #pianoplay .casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked+label::after {
    right: 0;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-top: 4px solid var(--casio-color);
    position: relative;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .name-keys {
    min-height: 15px;
    display: flex;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .name-keys .key-name {
    width: 100%;
    text-align: center;
    position: relative;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .name-keys .key-name[data-rhytm]::before {
    content: attr(data-rhytm);
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .name-keys .key-name:nth-child(9)::before {
    width: 200%;
    position: absolute;
    left: -50%;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .name-keys .key-name:nth-child(9)::after {
    margin-top: 10px;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .name-keys .key-name[data-rhytm]::after {
    content: "|";
    display: block;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .name-keys .instrument-type {
    font-size: 8px;
    position: absolute;
    right: 0;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys {
    min-height: 135px;
    position: relative;
    box-shadow: 0 1px 0 1px #1113;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .black-keys {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 73px;
    display: flex;
    justify-content: space-evenly;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key {
    grid-area: key;
    width: 22px;
    height: 100%;
    background-color: #111;
    background-image:
     linear-gradient(to right, #111 0 2px, transparent 2px),
     linear-gradient(to left, #111 0 2px, transparent 2px),
     linear-gradient(to top, transparent 0 3px, #fff8 4px 5px, transparent 8px);
    border: 1px outset #ccc;
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    z-index: 10;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(2),
   #pianoplay .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(4),
   #pianoplay .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(7),
   #pianoplay .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:nth-child(9) {
    margin-right: 28px;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:active,
   #pianoplay .casio-pt1 .casio-right .keys-container .keys .black-keys .black.key.active {
    z-index: 8;
    background-image:
     linear-gradient(to right, #111 0 2px, transparent 2px),
     linear-gradient(to left, #111 0 2px, transparent 2px),
     linear-gradient(to top, transparent 0 1px, #fff3 2px 3px, transparent 6px);
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .white-keys {
    display: flex;
    height: 100%;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key {
    width: 100%;
    height: 136px;
    background: #fff;
    border: 1px solid #ccc;
    border-left: 2px solid #fff;
    border-right: 2px solid #ddd;
    border-top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    z-index: 5;
    box-shadow: 0 2px 2px #0004;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key::after {
    content: "";
    display: block;
    background: linear-gradient(to bottom, #0006 0 1px, #0005 2px 10px, transparent 15% 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key:active,
   #pianoplay .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key.active {
    transform: translate(2px, 0);
    z-index: 2;
    border-top: 2px solid #fff;
    box-shadow: 0 0 2px #0004;
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key:active::after,
   #pianoplay .casio-pt1 .casio-right .keys-container .keys .white-keys .white.key.active::after {
    transform: translate(-2px, -2px);
   }

   #pianoplay .casio-pt1 .casio-right .keys-container .note-keys {
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 8px;
    justify-content: space-around;
    transform: translateY(3px);
    box-shadow: 0 5px 4px #0005 inset;
    border-right: 1px solid #fff2;
    border-top: 1px solid #0007;
    position: relative;
    top: -2px;
    left: -1px;
    padding: 0 1px;
   }