Responsive Nintendo CSSwitch (CSS Art)

HTML

              
                <article aria-label="Drawing of a Nintendo Switch">
  <section class="comfort-grip">
    <div class="grip"></div>
    <div class="grip right"></div>
    <div class="holder"></div>
  </section>
  <section class="controller left">
    <section class="bar">
      <div class="cord"></div>
      <button class="sub-lr"></button>
      <button class="sub-rr"></button>
      <div class="peripheral"></div>
      <div class="minus-sign"></div>
    </section>
    <section class="connector">
      <button class="con-lr"></button>
      <button class="con-rr"></button>
      <div class="con-part"></div>
    </section>
    <button class="lr" aria-label="LR"></button>
    <button class="minus" aria-label="minus"></button>
    <button class="mushroom round" aria-label="mushroom"></button>
    <button class="direction arrow round up" aria-label="up"></button>
    <button class="direction arrow round left" aria-label="left"></button>
    <button class="direction arrow round right" aria-label="right"></button>
    <button class="direction arrow round down" aria-label="down"></button>
    <button class="menu" aria-label="menu"></button>
  </section>
  <section class="controller right">
    <section class="bar">
      <div class="cord"></div>
      <button class="sub-lr"></button>
      <button class="sub-rr"></button>
      <div class="peripheral"></div>
      <div class="minus-sign"></div>
    </section>
    <section class="connector">
      <button class="con-lr"></button>
      <button class="con-rr"></button>
      <div class="con-part"></div>
    </section>
    <button class="lr rr" aria-label="RR"></button>
    <button class="minus plus" aria-label="plus"></button>
    <button class="direction round up x" aria-label="x"></button>
    <button class="direction round left y" aria-label="y"></button>
    <button class="direction round right a" aria-label="a"></button>
    <button class="direction round down b" aria-label="b"></button>
    <button class="mushroom round" aria-label="mushroom"></button>
    <button class="round home" aria-label="home"></button>
  </section>
  <section class="body">
    <button class="volume" aria-label="volume"></button>
    <div class="frame"></div>
    <div class="screen"></div>
  </section>
  <section class="comfort-grip">
    <div class="main-frame">
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="logo"></div>
      <div class="logo right"></div>
      <div class="nintendo">NINTENDO</div>
      <div class="switch">SWITCH</div>
    </div>
  </section>
</article>

<a id="youtube" href="https://www.youtube.com/watch?v=YDaHZ8qW6cU" target="_blank"><span>Watch how this drawing was coded</span></a>

CSS

              
                article {
  --joycon-left: #00c5e2;
  --joycon-left-shadow: #0128;
  --joycon-right: #ff6658;
  --joycon-right-shadow: #c218;
  position: relative;
  font-size: 1000px;
  width: 1000px;
  max-width: 1000px;
  height: 425.6px;
  background: #f000;
}

article *,
article *::before,
article *::after {
  position: absolute;
  box-sizing: border-box;
}

:focus {
  outline: 1px dashed;
  outline-offset: 2px;
}

.round {
  border-radius: 50%;
}

.comfort-grip,
.connector {
  display: none;
}

.body {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 721px;
  height: 99%;
}

.frame {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: 
    radial-gradient(farthest-side, #2f3638 50%, #0000) -1% 3% / 2% 2%,
    radial-gradient(farthest-side, #2f3638, #0000) 1% -0.75% / 2% 2%,
    radial-gradient(95% 70% at 0% 0%, #2f3638 85%, #fff3, #f000) 0.5% 0.75% / 1.55% 5.25% no-repeat,
    radial-gradient(farthest-side, #2f3638 50%, #0000) 101% 3% / 2% 2%,
    radial-gradient(farthest-side, #2f3638, #0000) 99% -0.75% / 2% 2%,
    radial-gradient(95% 70% at 100% 0%, #2f3638 85%, #fff3, #f000) 99.5% 0.75% / 1.55% 5.25% no-repeat,
    linear-gradient(#0000 1%, #fff3 2%, #0000 4%),
    linear-gradient(#0000 95%, #0008),
    #2f3638;
  background-repeat: no-repeat;
  box-shadow:
    inset -1.5px 0 0.75px -0.75px #fff5,
    inset 1.5px 0 0.75px -0.75px #fff6;
  -webkit-mask:
    radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 0 3.9% / 0.6% 1% no-repeat,
    radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 1.7% 0% / 0.4% 1% no-repeat,
    radial-gradient(78.33% 60.33% at 0% 0%, #f000 99%, #f00) 0.5% 0.75% / 1.55% 5.25% no-repeat,
    radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 100% 3.9% / 0.6% 1% no-repeat,
    radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 98.3% 0% / 0.4% 1% no-repeat,
    radial-gradient(78.33% 60.33% at 100% 0%, #f000 99%, #f00) 99.5% 0.75% / 1.55% 5.25% no-repeat,
    linear-gradient(#0000 4.7%, #000 0),
    linear-gradient(90deg,#0000 1.9%, #000 0 98.1%, #0000 0);
}

.frame::before {
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  height: 93%;
  border-radius: 11px;
  border: 0.3px solid #000;
  box-shadow: 
    0 0.45px 1px #fff8,
    inset 0 0.6px 1.5px -0.25px #000,
    inset 0 0.7px 1.5px -0.25px #fffc;
  background: 
    radial-gradient(circle at 32.7% 98%, #0e0e0e 0.9%, #000 0 1%, #0e0e0e 0 1.2%, #0000 0),
    linear-gradient(#0e0e0e 0 0) 32.33% 100% / 2.1% 2% no-repeat,
    #000;
}

.screen {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 77.5%;
  border-radius: 1.5px;
  background: #292d30;
  box-shadow: inset 0 1.5px 5px -1.5px #000c;
}

.controller {
  --color: var(--joycon-left);
  --color-shadow: var(--joycon-left-shadow);
  --connection: 20px 10.5px 0 -12.3px #020100;
  width: 138.5px;
  height: 99%;
  bottom: 0;
  left: 0;
  border-radius: 90px 4px 2px 90px;
  background: 
    var(--color);
  box-shadow:
    var(--connection),
    inset 1px -9px 10px -3px #0125, /* modif */
    inset 35px 0 25px -25px #0002,
    inset -2px 0 4px var(--color),
    inset 6px 16px 5px -8px var(--color),
    inset 0 17px 5px -8px #fff,
    inset 5px -5px 10px -4px var(--color-shadow);
}

.controller::before {
  content: "";
  width: 2.75px;
  aspect-ratio: 1;
  background: #393537;
  box-shadow: inset 0.1px 0.75px 0.4px #fff3;
  left: 100%;
  top: 97.75%;
  border-radius: 50%;
}

.controller.right {
  --color: var(--joycon-right);
  --color-shadow: var(--joycon-right-shadow);
  --connection: -0.02em 0.0105em 0 -0.0123em #020100;
  left: auto;
  right: 0;
  border-radius: 4px 90px 90px 2px;
  box-shadow:
    var(--connection),
    inset -0.001em -0.009em 0.01em -0.003em #2107,
    inset -0.035em 0 0.025em -0.025em #0002,
    inset 0.002em 0 0.004em var(--color),
    inset -0.006em 0.016em 0.005em -0.008em var(--color),
    inset 0 0.017em 0.005em -0.008em #fff,
    inset -0.01em 0 0.01em -0.004em var(--color-shadow);
}

.controller.right::before {
  left: auto;
  right: 100%;
  box-shadow: inset -0.0001em 0.00075em 0.0004em #fff3;
}
button {
  border: 0;
  font-size: 1em;
  padding: 0;
}

.bar {
  display: none;
}

.minus {
  --c: #404040;
  width: 17%;
  height: 1.8%;
  background: var(--c);
  top: 8.9%;
  right: 7.7%;
  border-radius: 0.0015em;
  border: 0.001em solid var(--color-shadow);
  box-shadow:
    inset 1px -1px 1px #0008,
    inset -1px 0 1px #0003,
    inset 0 1px 1px #fff6,
    0 2px 2px -1px #0006;
}

.plus {
  left: 7.7%;
  right: auto;
}

.plus::before {
  content: "";
  width: 37.5%;
  height: 410%;
  background: var(--c);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.0015em;
  border: 0.001em solid var(--color-shadow);
  box-shadow:
    0 0.004em 0.02em var(--color-shadow),
    inset -0.0006em 0 0.0004em #0007,
    inset 0.0006em 0 0.0004em #0007,
    inset 0 -0.001em 0.0005em -0.0002em #0008,
    inset 0 0.00075em 0.0005em -0.0002em #fff6;
}

.plus::after {
  content: "";
  width: 35%;
  aspect-ratio:1 ;
  background: 
    /* top left */
    radial-gradient(circle at 0 0, #834 20%, #0000 20% 35%, var(--c) 0) 0 0 / 50% 50%,
    conic-gradient(at 0 0, #000, #fff) 1% 1% / 40% 40%,
    /* top right */
    radial-gradient(circle at 100% 0, #834 20%, #0000 20% 35%, var(--c) 0) 100% 0 / 50% 50%,
    conic-gradient(at 100% 0, #fff 25%, #000) 99% 1% / 40% 40%,
    /* bottom left */
    radial-gradient(circle at 0% 100%, #834 20%, #0000 20% 35%, var(--c) 0) 1% 99% / 50% 50%,
    radial-gradient(at 0% 100%,  #0008, #0000) 1% 99% / 40% 40%,
    /* bottom right */
    radial-gradient(circle at 100% 100%, #834 20%, #0000 20% 35%, var(--c) 0) 99% 99% / 50% 50%,
    radial-gradient(at 100% 100%,  #0008, #0000) 100% 99% / 40% 40%,
    var(--c);
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mushroom {
  width: 47%;
  aspect-ratio: 1;
  border: 0.001em solid var(--color-shadow);
  top: 17.5%;
  left: 30%;
  background:
    radial-gradient(circle at 50% 0, #6669, #6660 60%),
    #2a2e31;
  box-shadow:
    /* inside */
    inset 0 0.0001em 0.00125em -0.0005em var(--color),
    inset 0 0.003em 0.003em #0004,
    inset 0 -0.005em 0.003em #0006,
    /* shadows */
    0 -0.0009em 0.001em 0.001em #0003,
    0 0.00075em 0.001em 0.001em #0003,
    0 0.01em 0.01em -0.0025em #0004,
    0 0.025em 0.035em var(--color-shadow);
}

.right .mushroom {
  top: 45.25%;
  left: 23.25%
}

.mushroom::before {
  content: "";
  width: 80%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%; 
  background: radial-gradient(circle at 50% 0, #6669, #6660 60%);
  box-shadow:
    inset 0 0 0.001em #0008,
    inset 0 0.002em 0.002em #0008,
    inset 0 -0.001em 0.001em 0.001em #fff4,
    0 0.001em 0.001em #fff2,
    0 -0.0007em 0.001em 0.0006em #0008,
    0 -0.0025em 0.0015em 0.0006em #fff2
}

.mushroom::after {
  content: "";
  width: 95%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%; 
  background: 
    /* up */
    linear-gradient(90deg, #000, #0000 20% 80%, #000) 50% 0 / 3% 12%,
    linear-gradient(#000 5%, #444 15% 30%, #666 50%, #3c3c3c, #484848) 50% 0 / 3% 12%,
    /* left */
    linear-gradient(#0000 30% 90%, #fff) 0% 50% / 12% 3%,
    linear-gradient(#000, #0000 30% 70%, #000) 0% 50% / 12% 3%,
    linear-gradient(90deg, #fff4, #222 10% 50%, #444) 0% 50% / 12% 3%,
    /* right */
    linear-gradient(#0000 30% 90%, #fff) 100% 50% / 12% 3%,
    linear-gradient(#000, #0000 30% 70%, #000) 100% 50% / 12% 3%,
    linear-gradient(to left, #fff4, #222 10% 50%, #444) 100% 50% / 12% 3%,
    /* down */
    linear-gradient(90deg, #000, #0000 20% 80%, #000) 50% 100% / 3% 12%,
    linear-gradient(to top, #fff4, #111 15% 50%, #444) 50% 100% / 3% 12%,
    #f000;
  background-repeat: no-repeat;
}

.direction {
  display: grid;
  place-items: center;
  width: 23%;
  aspect-ratio: 1;
  border: 0.0007em solid var(--color-shadow);
  background:
    linear-gradient(#fff2, #fff0),
    #35393c;
  box-shadow:
    0 0.002em 0.007em var(--color-shadow),
    inset 0 0.0001em 0.0015em -0.0005em var(--color),
    inset 0 0 0.0005em 0.001em #323439,
    inset 0 0.002em 0.001em 0.0002em #def5,
    inset 0 -0.001em 0.0005em 0.0002em #000,
    inset 0 -0.001em 0.001em 0.002em #000c
}

.direction::before {
  font-size: 0.0175em;
  font-family: Helvetica, sans-serif;
  color: #fffa;
}

.arrow::before,
.arrow::after {
  content: "";
  width: 40%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #252525;
  clip-path: polygon(52% -2%, 100% 80%, 0 80%, 48% -2%);
}

.arrow::before {
  top: 51.5%;
  background: #fff3;
  filter: blur(0.01em);
}

.arrow.right::before,
.arrow.right::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.arrow.left::before,
.arrow.left::after {
  transform: translate(-50%, -50%) rotate(-90deg) ;
}

.arrow.down::before,
.arrow.down::after {
  transform: translate(-50%, -50%) rotate(180deg) ;
}

.direction.up {
  top: 41.75%;
  left: 41.9%;
}

.direction.down {
  top: 56.6%;
  left: 41.9%;
}

.direction.left {
  left: 18.25%;
  top: 49.25%;
}

.direction.right {
  left: 65.75%;
  top: 49.25%;
}

.direction.x {
  top: 14%;
  left: 35%;
}

.direction.x::before {
  content: "X";
}

.direction.y {
  top: 21.5%;
  left: 11.25%
}

.direction.y::before {
  content: "Y";
}

.direction.a {
  top: 21.5%;
  left: 59%
}

.direction.a::before {
  content: "A";
}

.direction.b {
  top: 29%;
  left: 35%
}

.direction.b::before {
  content: "B";
}

.menu {
  width: 19.35%;
  aspect-ratio: 1;
  border: 0.0009em solid var(--color-shadow);
  top: 68.5%;
  left: 60.5%;
  border-radius: 0.003em;
  background: #464b50;
  box-shadow: 
    inset 0 0.001em 0.001em -0.0005em #fff6,
    inset 0 -0.001em 0.001em -0.0005em #0006
}

.menu::before {
  content: "";
  width: 67%;
  aspect-ratio: 1;
  background: #33393c;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    inset 0 0.0009em 0.00075em #0008,
    0 0.0008em 0.00075em #fff5
}

.lr {
  background: linear-gradient(#4c5153 50%, #030405 60%);
  top: -1%;
  right: 18%;
  width: 83.5%;
  height: 21%;
  border-radius: 100em 2em 0 0;
  clip-path: ellipse(140% 87% at 100% 0%);
  box-shadow:
    inset -0.004em 0 0.003em -0.003em #333,
    inset -0.007em 0 0.003em -0.003em #4c5153,
    inset 0 0.0015em 0.001em #444,
    inset -0.001em 0.00175em 0.001em #fff;
  z-index: -1;
}

.lr.rr {
  left: 18%;
  right: auto;
  transform: scaleX(-1);
}

.volume {
  width: 8.5%;
  height: 0.7%;
  background: linear-gradient(#444, #222);
  left: 13.3%;
  top: -0.6%;
  border-radius: 0.0005em 0.0005em 0 0;
  clip-path: polygon(-20% -100%, 32% -100%, 32% 0, 33% 35%, 66% 35%, 67% 0%, 67% -100%, 110% -100%, 110% 120%, -20% 120%);
  z-index: -1;
}

.home {
  top: 67.6%;
  left: 17.5%;
  display: grid;
  place-items: center;
  width: 25%;
  aspect-ratio: 1;
  border: 0.0007em solid var(--color-shadow);
  background:
    linear-gradient(#0001, #0005),
    radial-gradient(#0000 52.5%, #9c9a9a 54%),
    #404547;
}

.home::before {
  content: "";
  top: 23%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50%;
  height: 24.5%;
  background: conic-gradient(at 50% 0, #0000 132deg, #010202 0 228deg, #0000 0);
  box-shadow: 0 0.5px 0.75px -0.25px #fff8
}

.home::after {
  content: "";
  color: #010202;
  top: 46%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 39%;
  height: 24.5%;
  box-shadow: 
    inset -0.004em 0,
    inset 0.004em 0,
    inset 0 -0.004em 0,
    0 0.5px 0.75px -0.25px #fff5
}

/* demo */
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

button:active,
.plus:active::before,
.plus:active::after,
.active {
  background: yellow !important;
}

@media (max-width: 1010px) {
  article {
    width: 663px;
  }

  .controller {
    left: 102px;
  }

  .controller.right {
    right: 102px;
  }

  .body {
    display: none;
  }

  .comfort-grip {
    display: block;
    width: 100%;
    height: 461px;
  }

  .grip {
    width: 24%;
    height: 82.5%;
    bottom: 7.5%;
    left: 0%;
    transform: rotate(12deg);
    background: 
      radial-gradient(50% 100% at 69% 50%, #fff1, #fff0 50%),
      radial-gradient(100% 100% at 60% 60%, #ffffff18, #fff0 30%),
      linear-gradient(#0000, #0003),
      #2f3638;
    border-radius: 120% 120% 170% 125% / 120% 120% 140% 110%;
    transform-origin: 50% 100%;
    box-shadow:
      inset 25px 20px 20px -10px #00050ccc,
      inset -20px -10px 30px -10px #0008,
      inset 32px 50px 15px -15px #fff5,
      inset 0 0 50px #0008;
  }

  .grip.right {
    left: auto;
    right: 0;
    transform: scaleX(-1) rotate(12deg);
  }

  .comfort-grip ~ .comfort-grip {
    height: 100%;
  }

  .holder {
    width: 70%;
    height: 365px;
    background: #2f3638;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 7% 7% 250px 250px / 10% 10% 26% 26%;
    box-shadow:
      inset 2px -10px 2px -1px #000,
      inset -2px -10px 2px 0px #000,
      -1px 1px 2px -1.5px #fffc,
      0 40px 0 -20px #000c,
      -3px 10px 10px 3px #2f3638,
      1px 1px 2px -1.5px #fffc,
      2px 10px 10px 3px #2f3638;
    clip-path: polygon(-100% 0%, 200% 0%, 200% 100%, 66% 100%, 65.75% 100.75%, 34.25% 100.75%, 34% 100%, -100% 100%);
  }

  .main-frame {
    width: 181px;
    height: 99%;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 2px;
    -webkit-mask:
      radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 0 3.9% / 2.4% 1% no-repeat,
      radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 6.8% 0% / 1.6% 1% no-repeat,
      radial-gradient(78.33% 60.33% at 0% 0%, #f000 99%, #f00) 2% 0.75% / 6.2% 5.25% no-repeat,
      radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 100% 3.9% / 2.4% 1% no-repeat,
      radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 93.2% 0% / 1.6% 1% no-repeat,
      radial-gradient(78.33% 60.33% at 100% 0%, #f000 99%, #f00) 98% 0.75% / 6.2% 5.25% no-repeat,
      linear-gradient(#0000 4.7%, #000 0),
      linear-gradient(90deg,#0000 7.5%, #000 0 92.5%, #0000 0);
    background: 
      radial-gradient(farthest-side, #2f3638 50%, #0000) -1% 3% / 2% 2%,
      radial-gradient(farthest-side, #2f3638, #0000) 1% -0.75% / 2% 2%,
      radial-gradient(95% 70% at 0% 0%, #2f3638 85%, #fff3, #f000) 0.5% 0.75% / 1.55% 5.25% no-repeat,
      radial-gradient(farthest-side, #2f3638 50%, #0000) 101% 3% / 2% 2%,
      radial-gradient(farthest-side, #2f3638, #0000) 99% -0.75% / 2% 2%,
      radial-gradient(95% 70% at 100% 0%, #2f3638 85%, #fff3, #f000) 99.5% 0.75% / 1.55% 5.25% no-repeat,
      linear-gradient(#0000 1%, #fff3 2%, #0000 4%),
      linear-gradient(#0000 97%, #0008),
      radial-gradient(at 0 100%, #2f3638 1%, #0000 10%),
      radial-gradient(at 100% 100%, #2f3638 1%, #0000 10%),
      linear-gradient(#fff0 96%, #ffffff08, #fff0 98.5%),
      linear-gradient(#0000, #0013 5%, #0000 50%),
      #2f3638; #3d4348;
    box-shadow:
      inset 4px 0 3px -3.5px #fff5,
      inset -4px 0 3px -3.5px #fff5,
      inset 3px 0 4px -3.5px,
      inset -3px 0 4px -3.5px;
    background-repeat: no-repeat;
  }

  .logo {
    width: 32.5px;
    height: 65px;
    background: radial-gradient(circle at 53.5% 26.5%, #1a1c21 6px, #1a1c2100 0);
    left: 57px;
    top: 138.5px;
    border: 5px solid #1a1c21;
    border-radius: 20px 0 0 20px;
    box-shadow: 1px 0.5px 2px -1.5px #fff3
  }

  .logo.right {
    left: 95.5px;
    width: 29px;
    background: radial-gradient(circle at 48% 55%, #1a1c2100 6px, #1a1c21 0);
    border: 0;
    border-radius: 0 17.5px 17.5px 0;
  }

  .nintendo {
    font-size: 12px;
    left: 51.5%;
    top: 51.75%;
    transform: translate(-50%, -50%);
    font-family: Helvetica, sans-serif;
    font-weight: 700;
    letter-spacing: 5.5px;
    color: #1a1c21;
  }

  .switch {
    font-size: 21px;
    left: 51%;
    top: 55.75%;
    transform: translate(-50%, -50%);
    font-family: Helvetica, sans-serif;
    font-weight: 700;
    letter-spacing: 4px;
    color: #1a1c21;
  }

  .light {
    top: 37.5%;
    left: 10.25%;
    border: 0.75px solid #000c;
    width:  6.5px;
    height: 6.5px;
    border-radius: 1.5px;
    background: 
      radial-gradient(at 0 0, #0004, #0000),
      #53565b;
    box-shadow: 
      inset -1px -1px 2px -1.5px #ffd3,
      1px 1.5px 1px -1.25px #fff3
  }

  .light:nth-child(3n),
  .light:nth-child(7n) {
    top: 45.5%;
  }

  .light:nth-child(2n),
  .light:nth-child(6n) {
    top: 41.5%;
  }

  .light:nth-child(4n),
  .light:nth-child(8n) {
    top: 49.5%;
  }

  .light:nth-child(n + 5) {
    left: auto;
    right: 10.25%;
  }
}

@media (max-width: 670px) {
  article {
    width: 450px;
  }

  .comfort-grip {
    display: none;
  }

  .controller {
    --connection: 0 0 0 #0000;
    left: 0;
  }

  .controller.right {
    --connection: 0 0 0 #0000;
    right: 0;
  }

  .controller::before {
    content: none;
  }

  .bar {
    display: block;
    top: 0.25%;
    left: 100%;
    width: 50px;
    height: 98%;
  }

  .controller.right .bar {
    left: auto;
    right: 100%;
    transform: scalex(-1)
  }

  .bar button {
    width: 100%;
    height: 14.25%;
    left: 10px;
    border-radius: 4px;
    background:
      radial-gradient(20% 100% at 100% 50%, #0008 30%, #31333800 40%),
      radial-gradient(20% 100% at 100% 50%, #232629 40%, #23262900 60%),
      linear-gradient(#232629 5%, #fff7, #414649 25% 75%, #232629)
  }

  .sub-lr {
    top: 19.75%;
  }

  .sub-rr {
    top: 60.25%;
  }

  .minus-sign {
    width: 21px;
    height: 5.5px;
    background: #343a3b;
    top: 38px;
    left: 7.25px;
    border-radius: 0.75px;
    box-shadow: 
      inset 0 0 2px #2f3638,
      0 1px 3px -1.5px #fff4
  }

  .controller.right .minus-sign::before {
    content: "";
    width: 5.5px;
    height: 21px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: inherit;
    box-shadow: 
      inset 0 0 2px #2f3638,
      0 3px 3px -2px #fff4
  }

  .peripheral {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px 120px 110px 0 / 6px 120px 110px 0; 
    background: #3f4648; #5e656a;
    box-shadow:
      inset 2px 0 3px -1px #000c,
      inset -5px 5px 5px #303538,
      inset -10px -5px 5px #303538,
      inset -5px 9px 5px #fff4;
    -webkit-mask:
      radial-gradient(95% 250% at 100% 64%, #0000 7%, #f00 7.5%) 100% 0 / 100% 42% no-repeat,
      radial-gradient(95% 250% at 100% 67.5%, #0000 7%, #f00 7.5%) 100% 67.25% / 100% 42% no-repeat,
      radial-gradient(160% 20% at 0 100%, #0000 38%, #f00 38.5%) 0 100% / 40% 50% no-repeat,
      radial-gradient(160% 30% at 110% 101%, #0000 65%, #f00 0) 100% 100% / 62% 25% no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 29% 100%, 0% 96%)
  }

  .cord {
    width: 12px;
    height: 100vh;
    background: #f004;
    left: 47%;
    top: 30%;
    background:
      linear-gradient(#000 33%, #0000 34%) 50% 50% / 11px 100%,
      linear-gradient(#0009 32%, #0000 38%) 50% 50% / 11px 100%,
      linear-gradient(90deg, #0000, #6666, #0000),
      linear-gradient(45deg, #253a3e, #21212c, #656a6e, #253a3e) 0.5px 0 / 6px 6px,
      linear-gradient(-45deg, #253a3e, #31313c, #707070, #253a3e) 5.5px 3px / 6px 6px,
      radial-gradient(farthest-side, #353a3ecc 99.99%, #f000) 50% 50% / 12px 8px;
    background-repeat: repeat-y;
  }
}

@media (max-width: 460px) {
  article {
    width: 90%;
    min-width: 320px;
  }

  .connector {
    display: block;
    top: 22px;
    left: 100%;
    left: calc(100% - 1px);
    width: 13.5px;
    height: 358px;
    z-index: -1;
  }

  .controller.right .connector {
    transform: scaleX(-1);
    left: auto;
    right: 100%;
    right: calc(100% - 1px);
  }

  .con-lr, 
  .con-rr {
    width: 90%;
    height: 9.75%;
    background: var(--color);
    top: 25.25%;
    right: 0;
    transform: translateY(-50%);
    border-radius: 2px;
    box-shadow:
      inset -1.5px -2px 4px -1px #0005,
      inset -1px 1px 2px -1.5px #0006
  }

  .con-rr {
    top: 73%;
  }
  
  .con-part {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0px;
  }
  
  .con-part::after {
    content: "";
    width: 60%;
    right: 0;
    height: 100%;
    top: 0;
    box-shadow:
      inset -3px 2px 2px -1px #0008,
      inset 0 4px 1px -2px #0007,
      inset 0 3px 1px #fff7;
    background: 
      linear-gradient(#0002, #0000, #0002),
      #42484d;
    border-radius: 2px 4px 3px 3px / 2px 4px 3px 10px;
    clip-path: polygon(0 0, 100% 0, 100% 18%, 70% 20%, 70% 31%, 100% 33%, 100% 65.5%, 70% 67.5%, 70% 78.5%, 100% 80.5%, 100% 100%, 0 100%);
  }
  
  .con-part::before {
    content: "";
    width: 60%;
    left: 0;
    height: 95%;
    top: 0;
    background:
      linear-gradient(90deg, #000, #0000 20% 40%, #000 60%),
      linear-gradient(#6e7474 0.66%, #0008 0, #6e7474cc 1.5%, #000c 2.5%, #0000 0),
      #1b2827;
  }

  .bar {
    display: none;
  }
}

@media (max-width: 360px) {
  article {
    width: 151px;
    min-width: 151px;
  }

  .controller.right {
    display: none;
  }

  .bar {
    display: none;
  }
}

/***/

#youtube {
  z-index: 2;
  display: block;
  width: 100px;
  height: 70px;
  position: absolute;
  top: 20px;
  right: 20px;
  background: red;
  border-radius: 50% / 11%;
  transition: transform 0.5s;
}

#youtube:hover,
#youtube:focus {
  transform: scale(1.1);
}

#youtube::before {
  content: "";
  display: block;
  position: absolute;
  top: 7.5%;
  left: -6%;
  width: 112%;
  height: 85%;
  background: red;
  border-radius: 9% / 50%;
}

#youtube::after {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 40px;
  width: 45px;
  height: 30px;
  border: 15px solid transparent;
  box-sizing: border-box;
  border-left: 30px solid white;
}

#youtube span {
  font-size: 0;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

JS

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions