body {
  color: white;
  background-color: rebeccapurple;
  opacity: 1;
  background-image:  linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

h1,h2,p {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

midi-player {
  display: block;
  width: 33vw;
  margin: 4px;
  margin-bottom: 0;
}
midi-player::part(control-panel) {
  background: pink;
  border: 5px outset rebeccapurple;
  border-radius: 0;
}
midi-player::part(play-button) {
  color: white;
  border: 2px solid currentColor;
  background-color: rebeccapurple;
  border-radius: 0;
  transition: all 0.2s;
  content: 'hello';
}
midi-player::part(play-button):hover {
  color: rebeccapurple;
  background-color: white;
}
midi-player::part(time) {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: rebeccapurple;
}
midi-player::part(seek-bar) {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
  width: 100%;
  height: 33px; 
  background: pink;
  outline: none;
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}
/* Mouse-over effects */
midi-player::part(seek-bar):hover, midi-player::part(seek-bar):active {
  border: 5px solid rebeccapurple;
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
midi-player::part(seek-bar)::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 33px;
  height: 33px;
  background: rebeccapurple;
  cursor: pointer;
}
midi-player::part(seek-bar)::-moz-range-thumb {
  width: 33px;
  height: 33x;
  background: rebeccapurple;
  cursor: pointer;
}

.rainbow {
  font-family: "Arial Black", sans-serif;
  font-weight: bold;
  background: linear-gradient(90deg, #9c00ff, #ff0000, #ff8800, #ffff00, #02be02, #0000ff, #4f00ff, #9c00ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transform: scaleY(1.5) scaleX(0.6);
  transform-origin: left;
  display: inline-block;
  position: relative;
  font-size: 8rem;
}
.rainbow-wrapper {
  font-family: "Arial Black", sans-serif;
  font-size: 8rem;
  font-weight: bold;
  position: relative;
  display: inline-block;
  perspective: 150px;
  perspective-origin: bottom center;
  background-color: white;
  border: 5px outset rebeccapurple;
  transform: skewY(-8deg) scaleY(1.3) scaleX(0.8);
  margin-bottom: 100px;
}
.rainbow-wrapper:before {
  position: absolute;
  content: attr(data-content);
  transform: rotateX(60deg) skewX(65deg) scaleY(2.8) scaleX(0.9);
  transform-origin: bottom right;
  color: black;
  opacity: 0.2;
  bottom: -2rem;
}