article {
  --joycon-left: #00c5e2;
  --joycon-left-shadow: #0128;
  --joycon-right: #ff6658;
  --joycon-right-shadow: #c218;
  position: relative;
  font-size: 95vmin;
  width: 1em;
  aspect-ratio: 632 / 269;
  background: #f000;
}

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

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

.round {
  border-radius: 50%;
}

.bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://www.nintendo.com/sg/switch/index/img/switch_img.png);
  background-size: cover;
  opacity: 0.4;
}

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

.frame {
  width: 100%;
  height: 100%;
  border-radius: 0.002em;
  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 -0.0015em 0 0.00075em -0.00075em #fff5,
    inset 0.0015em 0 0.00075em -0.00075em #fff6;
/*   -webkit-mask:
    radial-gradient(40% 50% at 0 0, #0000 8%, #000 0) 0 0 / 55% 100% no-repeat,
    radial-gradient(40% 50% at 100% 0, #0000 8%, #000 0) 100% 0 / 55% 100% no-repeat
    ; */
  -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 2%, #000 0 98%, #0000 0)
    ;
}

.frame::before {
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  height: 93%;
  border-radius: 0.011em;
  border: 0.0003em solid #000;
  box-shadow: 
    0 0.00045em 0.001em #fff8,
    inset 0 0.0006em 0.0015em -0.00025em #000,
    inset 0 0.0007em 0.0015em -0.00025em #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: 0.001em;
  background: #292d30;
  box-shadow: inset 0 0.0015em 0.005em -0.0015em #000c;
}

.controller {
  opacity: 10.7;
  --color: var(--joycon-left);
  --color-shadow: var(--joycon-left-shadow);
  width: 13.85%;
  height: 99%;
  bottom: 0;
  left: 0;
  border-radius: 0.09em 0.004em 0.002em 0.09em;
  background: 
    var(--color);
  box-shadow:
    0.02em 0.0105em 0 -0.0123em #020100,
    inset 0.001em -0.009em 0.01em -0.003em var(--color-shadow),
    
    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.005em -0.005em 0.01em -0.004em var(--color-shadow)
    ;
}

.controller::before {
  content: "";
  width: 0.00275em;
  aspect-ratio: 1;
  background: #393537;
  box-shadow: inset 0.0001em 0.00075em 0.0004em #fff3;
  left: 100%;
  top: 97.75%;
  border-radius: 50%;
}

.controller.right {
  --color: var(--joycon-right);
  --color-shadow: var(--joycon-right-shadow);
  left: auto;
  right: 0;
  border-radius: 0.004em 0.09em 0.09em 0.002em;
  box-shadow:
    
    -0.02em 0.0105em 0 -0.0123em #020100,
    inset -0.001em -0.009em 0.01em -0.003em #000a,
    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;
}

.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 0.00075em -0.00075em 0.0005em #0008,
    inset -0.0006em 0 0.0005em #0003,
    inset 0 0.00075em 0.0005em #fff6,
    0 0.002em 0.0025em -0.001em #0006;
}

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

.plus::before {
  content: "";
  width: 35%;
  height: 400%;
  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%);
/*   -webkit-mask:
    radial-gradient(200% 250% at 0 0, #0000 0%, #000 20%) 0 0 / 50% 50% no-repeat,
    radial-gradient(200% 250% at 100% 0, #0000 0%, #000 20%) 100% 0 / 50% 50% no-repeat,
    radial-gradient(200% 250% at 100% 100%, #0000 20%, #000 0) 100% 100% / 50% 50% no-repeat,
    radial-gradient(200% 250% at 0 100%, #0000 20%, #000 20%) 0 100% / 50% 50% no-repeat */
    ;
}

.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: "C"; "X";
}

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

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

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

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


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

.direction.b::before {
  content: "3"; "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 0),
    #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.00015em 0.0001em -0.00008em #fff
}

.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.00015em 0.0001em -0.00008em #fff
}


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

img {
  width: 95vmin;
  margin-top: 3vmin;
}

/***/

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