<!-- 

Inspired by Neumorphism, a new trend in UI design, I've coded a web version of an OP-1 synthesizer by Teenage Engineering.
 
-->

<body>
    <div class="op1-container-layer1">
      <div class="op1-container-layer2">
        <div class="inner-profile">
          <div class="dark-background">
            <div class="upper-part">
              <div class="speaker-block"><div class="speaker"></div></div>
              <div class="button-group-1">
                <div class="long-button-block">
                  <div class="vol-knob">
                    <div class="knob-dot"></div>
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="36"
                      alt="Help button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/help-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="36"
                      alt="Tempo button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/tempo-icon.svg"
                    />
                  </div>
                </div>
              </div>
              <div class="op-screen">
                <img
                  class="op-screen-background"
                  width="268"
                  alt="op1-display-background"
                  src="https://pizzabreakfast.co/project-assets/web-op-1/op1-display-background.svg"
                />
                <div class="tape-rolls">
                  <img
                    class="roll-1 rotate-center"
                    width="60"
                    alt="roll-1"
                    src="https://pizzabreakfast.co/project-assets/web-op-1/roll-1.svg"
                  />
                  <img
                    class="rotate-center"
                    width="60"
                    alt="roll-2"
                    src="https://pizzabreakfast.co/project-assets/web-op-1/roll-2.svg"
                  />
                </div>
                <img
                  class="gloss"
                  width="268"
                  alt="Display gloss image"
                  src="https://pizzabreakfast.co/project-assets/web-op-1/gloss.svg"
                />
              </div>
              <div class="knobs">
                <div class="knob-block">
                  <div class="outer-knob">
                    <div class="knob-blue">
                      <div class="imprint-blue"></div>
                    </div>
                  </div>
                </div>
                <div class="knob-block">
                  <div class="outer-knob">
                    <div class="knob-green">
                      <div class="imprint-green"></div>
                    </div>
                  </div>
                </div>
                <div class="knob-block">
                  <div class="outer-knob">
                    <div class="knob-white">
                      <div class="imprint-white"></div>
                    </div>
                  </div>
                </div>
                <div class="knob-block">
                  <div class="outer-knob">
                    <div class="knob-orange">
                      <div class="imprint-orange"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="top-right">
                <div class="button-block">
                  <div class="button">
                    <img
                      width="36"
                      alt="Microphone button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/mic-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <div>
                      <img
                        width="16"
                        alt="Album button icon"
                        src="https://pizzabreakfast.co/project-assets/web-op-1/album-icon.svg"
                      />
                      <p class="condensed-10px">COM</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="transports-controls-keyboard">
              <div class="transports">
                <div class="button-block">
                  <div class="button">
                    <img
                      width="36"
                      alt="Synthesizer button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/synthesizer-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="36"
                      alt="Drum button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/drum-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="36"
                      alt="Tape button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/tape-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <div>
                      <img
                        width="16"
                        alt="Lift button icon"
                        src="https://pizzabreakfast.co/project-assets/web-op-1/lift-icon.svg"
                      />
                      <p class="normal-10px">1–4</p>
                    </div>
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="16"
                      alt="Drop button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/drop-icon.svg"
                    />
                    <img
                      width="16"
                      alt="Dot icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/dot-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <div>
                      <img
                        width="16"
                        alt="Split button icon"
                        src="https://pizzabreakfast.co/project-assets/web-op-1/split-icon.svg"
                      />
                      <p class="condensed-10px">JOIN</p>
                    </div>
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="36"
                      alt="Record button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/record-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="24"
                      alt="Play button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/play-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="24"
                      alt="Stop button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/stop-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="24"
                      alt="Back button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/back-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button">
                    <img
                      width="24"
                      alt="Forward button icon"
                      src="https://pizzabreakfast.co/project-assets/web-op-1/forward-icon.svg"
                    />
                  </div>
                </div>
                <div class="button-block">
                  <div class="button"><p>Shift</p></div>
                </div>
              </div>

              <div class="controls-keyboard">
                <div class="controls">
                  <div class="button-block">
                    <div class="button">
                      <img
                        width="36"
                        alt="Mixer button icon"
                        src="https://pizzabreakfast.co/project-assets/web-op-1/mixer-icon.svg"
                      />
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button"><p class="light-32px">1</p></div>
                  </div>
                  <div class="button-block">
                    <div class="button"><p class="light-32px">2</p></div>
                  </div>
                  <div class="button-block">
                    <div class="button"><p class="light-32px">3</p></div>
                  </div>
                  <div class="button-block">
                    <div class="button"><p class="light-32px">4</p></div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <div class="buttons-two-elements">
                        <p class="normal-18px">1</p>
                        <p class="condensed-12px green">IN</p>
                      </div>
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <div class="buttons-two-elements">
                        <p class="normal-18px">2</p>
                        <p class="condensed-12px green">OUT</p>
                      </div>
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <div class="buttons-two-elements">
                        <p class="normal-18px">3</p>
                        <img
                          width="24"
                          alt="Loop button icon"
                          src="https://pizzabreakfast.co/project-assets/web-op-1/loop-icon.svg"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <div class="buttons-two-elements">
                        <p class="normal-18px">4</p>
                        <img
                          width="24"
                          alt="Break button icon"
                          src="https://pizzabreakfast.co/project-assets/web-op-1/break-icon.svg"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <div class="buttons-two-elements">
                        <p class="normal-18px">5</p>
                        <p class="normal-12px orange">Я</p>
                      </div>
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <div class="buttons-two-elements">
                        <p class="normal-18px">6</p>
                        <img
                          width="24"
                          alt="Chop button icon"
                          src="https://pizzabreakfast.co/project-assets/web-op-1/chop-icon.svg"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <div class="buttons-two-elements">
                        <p class="normal-18px">7</p>
                        <p class="condensed-12px">M1</p>
                      </div>
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <div class="buttons-two-elements">
                        <p class="normal-18px">8</p>
                        <p class="condensed-12px">M2</p>
                      </div>
                    </div>
                  </div>
                  <div class="button-block">
                    <div class="button">
                      <img
                        width="36"
                        alt="Sequencer button icon"
                        src="https://pizzabreakfast.co/project-assets/web-op-1/sequencer-icon.svg"
                      />
                    </div>
                  </div>
                </div>
                <div class="keyboard">
                  <div class="black-keys-1">
                    <div class="black-key-block-long">
                      <div class="black-key-right"></div>
                    </div>
                    <div class="black-key-block-short">
                      <div class="black-key"></div>
                    </div>
                    <div class="black-key-block-long">
                      <div class="black-key-left"></div>
                    </div>
                  </div>
                  <div class="black-keys-2">
                    <div class="black-key-block-long">
                      <div class="black-key-right"></div>
                    </div>
                    <div class="black-key-block-long">
                      <div class="black-key-left"></div>
                    </div>
                  </div>
                  <div class="black-keys-3">
                    <div class="black-key-block-long">
                      <div class="black-key-right"></div>
                    </div>
                    <div class="black-key-block-short">
                      <div class="black-key"></div>
                    </div>
                    <div class="black-key-block-long">
                      <div class="black-key-left"></div>
                    </div>
                  </div>
                  <div class="black-keys-4">
                    <div class="black-key-block-long">
                      <div class="black-key-right"></div>
                    </div>
                    <div class="black-key-block-long">
                      <div class="black-key-left"></div>
                    </div>
                  </div>
                  <div class="white-keys-1">
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                  </div>
                  <div class="white-keys-2">
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                  </div>
                  <div class="white-keys-3">
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                  </div>
                  <div class="white-keys-4">
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                    <div class="white-key-block">
                      <div class="white-key"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-side-part">
          <div class="microphone-vu-op1">
            <img
              width="16"
              alt="Inbuilt microphone image"
              src="https://pizzabreakfast.co/project-assets/web-op-1/microphone.svg"
            />
            <div class="vu-meter">
              <div class="oval-4px"></div>
              <div class="oval-4px"></div>
              <div class="oval-4px"></div>
              <div class="oval-4px"></div>
              <div class="oval-4px"></div>
            </div>
            <h1 class="op1-label">OP-1</h1>
          </div>
        </div>
      </div>
    </div>
  </body>
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap");

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap");

body {
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0 auto;
}

/* Typefaces */

h1 {
  font-family: "Roboto";
  font-weight: normal;
  font-size: 28px;
  margin: auto;
}

.op1-label {
  display: flex;
  text-align: left;
  width: 60px;
  height: 33px;
  line-height: 33px;
  font-weight: 300;
  color: rgba(67, 75, 95, 0.7);
  transform: rotate(-90deg);
  grid-row: 5;
  margin: 0px;
}

p {
  font-family: "Roboto";
  font-weight: normal;
  font-size: 12px;
  margin: auto;

  color: rgba(67, 75, 95, 0.7);
}

.condensed-10px {
  font-family: "Roboto Condensed";
  font-size: 10px;
}

.condensed-12px {
  font-family: "Roboto Condensed";
  font-size: 12px;
  letter-spacing: 0.04em;
  height: 14px;
}

.normal-10px {
  font-size: 10px;
}

.normal-12px {
  font-size: 12px;
}

.normal-18px {
  font-size: 18px;
}

.light-32px {
  font-size: 32px;
  font-weight: 300;
}

.green {
  color: #05bf37;
}

.orange {
  color: #ff5932;
}

.two-line-text {
  align-items: center;
  justify-content: center;
}

/* Container and background */

.op1-container-layer1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 1256px;
  max-width: 1256px;
  height: 452px;

  background: linear-gradient(107.83deg, #dedfe4 1.91%, #cacdd4 97.76%);
  box-sizing: border-box;
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}

.op1-container-layer2 {
  display: flex;
  /* flex-direction: column; */
  justify-content: flex-start;
  align-items: center;
  min-width: 1256px;
  max-width: 1256px;
  height: 454px;

  background: linear-gradient(
    179.56deg,
    rgba(223, 224, 233, 0.5) 4.52%,
    rgba(205, 210, 220, 0.5) 96.3%
  );
  border: 2px solid #c4c4c2;
  box-sizing: border-box;
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.8);
  border-radius: 20px;
}

.inner-profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 1162px;
  max-width: 1162px;
  height: 416px;
  margin-left: 18px;

  border: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  box-shadow: inset 2px 2px 2px #d5d5d5;
  border-radius: 8px;
}

.dark-background {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 1160px;
  max-width: 1160px;
  height: 412px;
  background-color: #0f0e0f;
  border-radius: 6px;
}

/* Upper elements */

.upper-part {
  display: grid;
  grid-template-columns: repeat(8, 132px) 64px;
  grid-template-rows: repeat(1, 132px);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  margin-bottom: 4px;
}

.speaker-block {
  position: relative;
  display: flex;
  width: 132px;
  height: 132px;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;

  background: #dfe0e9;
  border-radius: 4px;
}

.speaker {
  background-image: url("https://pizzabreakfast.co/project-assets/web-op-1/speaker.svg");
  width: 109px;
  height: 109px;
  background-size: 109px;
}

.button-group-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.long-button-block {
  position: relative;
  width: 132px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  background: #dfe0e9;
  border-radius: 4px;
}

.vol-knob {
  position: relative;
  width: 44px;
  height: 44px;

  background: #fcfbfc;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  border-radius: 100%;
  margin-left: 10px;
}

.knob-dot {
  position: relative;
  width: 8px;
  height: 8px;
  left: 11px;
  top: 27px;

  background: #f3f3f3;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5),
    inset 1px 1px 1px rgba(209, 205, 199, 0.5);
  border-radius: 100%;
}

/* OP-1 screen */

.op-screen {
  position: relative;
  width: 268px;
  height: 132px;

  background-color: #0f0e0f;
  border-radius: 4px;
  grid-column: 3 / 4;
}

.tape-rolls {
  position: absolute;
  top: 22.5px;
  left: 45px;
  min-width: 176px;
  max-width: 176px;
  min-height: 60px;
  max-height: 60px;
  display: grid;
  grid-template-columns: 60px 60px;
  grid-template-rows: 60px;
  grid-gap: 56px;
}

.roll-1 {
  transform: rotate(320deg);
}

.rotate-center {
  -webkit-animation: rotate-center 5s linear infinite;
  animation: rotate-center 5s linear infinite;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.gloss {
  position: absolute;
  top: 0;
  left: 0;
}

/* Encoder section */

.knobs {
  display: flex;
  grid-column: 5 / 9;
  justify-content: space-between;
}

.knob-block {
  position: relative;
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #dfe0e9;
  border-radius: 4px;
}

.outer-knob {
  position: relative;
  background-image: url("https://user-images.githubusercontent.com/11149530/71559596-96038580-2a68-11ea-8e32-8d0d6dc0e95f.png");
  width: 79px;
  height: 79px;
  background-size: 79px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.knob-blue {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #5fbaf2;
  border: 2px solid #8bd0f9;
  box-sizing: border-box;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  border-radius: 100%;
}

.imprint-blue {
  position: relative;
  width: 32px;
  height: 9px;

  background: #5bb3ee;
  box-shadow: 1px 1px 2px #89d9ff, inset 1px 1px 1px #0292d4;
  border-radius: 4px;
  transform: rotate(-45deg);
}

.knob-green {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #00cd73;
  border: 2px solid #00f1ab;
  box-sizing: border-box;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  border-radius: 100%;
}

.imprint-green {
  position: relative;
  width: 32px;
  height: 9px;

  background: #00cf77;
  box-shadow: 1px 1px 2px rgba(0, 241, 171, 0.75),
    -1px -1px 1px rgba(0, 241, 171, 0.5), inset 2px 2px 4px #00b34d,
    inset -2px -2px 4px #00bf66;
  border-radius: 4px;
}

.knob-white {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #fcfbfc;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  border-radius: 100%;
}

.imprint-white {
  position: relative;
  width: 32px;
  height: 9px;

  background: #f3f3f3;
  /* plastic-button-inner */
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5),
    inset 1px 1px 1px rgba(209, 205, 199, 0.5);
  border-radius: 4px;
  transform: rotate(45deg);
}

.knob-orange {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ff6d27;
  border: 2px solid #ffa361;
  box-sizing: border-box;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  border-radius: 100%;
}

.imprint-orange {
  position: relative;
  width: 32px;
  height: 9px;

  background: #ff6e2b;
  box-shadow: 1px 1px 2px #ffaa70, inset 1px 1px 2px #f74b26,
    inset -1px -1px 1px #ff6423;
  border-radius: 4px;
  transform: rotate(-90deg);
}

.top-right {
  display: flex;
  flex-direction: column;
  grid-column: 9;
  justify-content: space-between;
}

.transports-controls-keyboard {
  display: flex;
  flex-direction: row;
}

.transports {
  width: 204px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(4, 64px);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.controls-keyboard {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}

.controls {
  display: grid;
  grid-template-columns: repeat(14, 64px);
  grid-template-rows: 64px;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  padding-bottom: 2px;
  margin-bottom: 2px;
}

.keyboard {
  display: grid;
  grid-template-columns: 268px 200px 268px 200px;
  grid-template-rows: 64px 132px;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.black-keys-1 {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  /* grid-column: 1; */
}

.black-keys-2 {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  grid-column: 2;
}

.black-keys-3 {
  display: flex;
  justify-content: space-between;
  grid-column: 3;
}

.black-keys-4 {
  display: flex;
  justify-content: space-between;
  grid-column: 4;
}

.white-keys-1 {
  display: flex;
  justify-content: space-between;
  grid-column: 1;
  grid-row: 2;
}

.white-keys-2 {
  display: flex;
  justify-content: space-between;
  grid-column: 2;
  grid-row: 2;
}

.white-keys-3 {
  display: flex;
  justify-content: space-between;
  grid-column: 3;
  grid-row: 2;
}

.white-keys-4 {
  display: flex;
  justify-content: space-between;
  grid-column: 4;
  grid-row: 2;
}

.button-block {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #d1d7e0;
  border-radius: 4px;
}

.button {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  background: #d8dbe3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  border-radius: 100%;
}

.buttons-two-elements {
  display: grid;
  grid-template-columns: 24px;
  grid-template-rows: 18px 18px;
  justify-content: center;
  align-items: center;
}

.black-key-block-short {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #dfe0e9;
  border-radius: 4px;
}

.black-key-block-long {
  width: 98px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #dfe0e9;
  border-radius: 4px;
}

.black-key {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 100%;

  background: #101010;
  border: 2px solid #e5e4eb;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
}

.black-key-left {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 100%;

  background: #101010;
  border: 2px solid #e5e4eb;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  transform: translateX(-16px);
}

.black-key-right {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 100%;

  background: #101010;
  border: 2px solid #e5e4eb;
  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  transform: translateX(16px);
}

.white-key-block {
  position: relative;
  width: 64px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d1d7e0;
  border-radius: 4px;
}

.white-key {
  position: relative;
  width: 42px;
  height: 110px;
  background: #d8dbe3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;

  /* rubber-button */
  box-shadow: 6px 6px 16px #9fa6b3, -6px -6px 16px #e8ebf3;
  border-radius: 50px;
}

#icon16px {
  width: 16px;
}

#icon24px {
  width: 24px;
}

#icon36px {
  width: 36px;
}

.right-side-part {
  display: grid;
  grid-template-columns: 72px;
  grid-template-rows: 1fr;
  justify-content: center;
}

.microphone-vu-op1 {
  display: grid;
  grid-template-columns: 64px;
  grid-template-rows: 64px 64px 64px 64px 132px;
  grid-gap: 4px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  /* text-align: center; */
}

.vu-meter {
  display: grid;
  grid-template-columns: 4px;
  grid-template-rows: repeat(5, 13px);
  grid-row: 3;
}

.oval-4px {
  width: 4px;
  height: 4px;

  background: #42434e;
  border-radius: 100%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.