@font-face {
  font-family: Michroma;
  src:
    url(https://manzdev.github.io/twitch-casio-pt1/michroma.woff2) format("woff2"),
    url(https://manzdev.github.io/twitch-casio-pt1/michroma.woff) format("woff");
  font-display: swap;
}

@font-face {
  font-family: Tourney;
  src:
    url(https://manzdev.github.io/twitch-casio-pt1/tourney.woff2) format("woff2"),
    url(https://manzdev.github.io/twitch-casio-pt1/tourney.woff) format("woff");
  font-display: swap;
}

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

:root {
  --casio-bgcolor: #171e27;
  --casio-color: #909eb4;
}

.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 {
  transition: background 1s;
}

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);
}

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

.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;
}

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

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

.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%);
      }

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

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

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

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

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

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

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

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

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

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

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

.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);
            }

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

.casio-pt1 .casio-right .casio-controls .controls-label .group.buttons span:not(.fill)::after {
              content: "▪";
              display: block;
            }

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

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

.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;
          }

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

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

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

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

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

.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%);
            }

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

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

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

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

.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;
        }

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

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

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

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

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

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

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

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

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

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

.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;
          }

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

.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);
          }

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

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

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

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

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

.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;
          }

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

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

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

.casio-pt1 .casio-right .casio-controls .controls-buttons .grid .slider input:checked + label::before,
              .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;
              }

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

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

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

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

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

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

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

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

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

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

.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;
        }

.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;
          }

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

.casio-pt1 .casio-right .keys-container .keys .black-keys .black.key:active,
            .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);
            }

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

.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;
          }

.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;
            }

.casio-pt1 .casio-right .keys-container .keys .white-keys .white.key:active,
            .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;
            }

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

.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;
      }

.created {
  background: 
    url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
    linear-gradient(to bottom, #884ced, #ec1cce);
  background-size: 75px 75px, cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 2em;
}

.created span,
  .created h2,
  .created p,
  .created a {
    font-family: Montserrat;
    margin: 0;
  }

.created a,
  .created p,
  .created span {
    color: #fff;    
  }

.created h2 {
    font-weight: 700;
    transform: translate(0, -4px);    
  }

.created a {
    -webkit-text-decoration-color: rgba(255,255,255,0.4);
            text-decoration-color: rgba(255,255,255,0.4);
  }

.created a:hover {
    color: #e6e82a;
  }