body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-image: url(../img/pokemon.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -16em;
}

body::after {
    content: "";
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.containerprincipal {
    height: 29.3em;
    width: 19.3em;
    background-color: black;
    border-radius: 20% 20% 49% 49% / 2% 2% 6.5% 6.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.contornoconsola {
    height: 42em;
    width: 25em;
    background-color: #FED81F;
    border-radius: 20% 20% 49% 49% / 2% 2% 6.5% 6.5%;
    box-shadow: rgba(0, 0, 0, 0.17) -70px -70px 20px -70px inset, rgba(0, 0, 0, 0.15) 0px -20px 30px 0px inset, rgba(0, 0, 0, 0.1) 100px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px, rgba(0, 0, 0, 0.4) 20px 20px, rgba(0, 0, 0, 0.3) 15px 15px, rgba(0, 0, 0, 0.2) 20px 20px, rgba(0, 0, 0, 0.1) 20px 20px, rgba(0, 0, 0, 0.05) 35px 30px, 20px 12px 5px rgb(0, 0, 0), inset 0.2px 0.2px 13px 5px black;
    border: solid 2px black;
}

.nintendo {
    width: 6.7em;
    height: 1.4em;
    border-radius: 1em;
    border: 0.15em solid #b3a119e0;
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    color: #b3a119e0;
    top: 15em;
}

.marcodepantalla {
    height: 19em;
    width: 22em;
    background-color: black;
    margin-bottom: 19em;
    border-radius: 20% 20% 49% 49% / 2% 2% 6.5% 6.5%;
    position: absolute;
    background-image: url(../img/logogameboy.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 93%;
    background-size: 50%;
    top: -5em;
}

.ledapagado {
    height: 0.65em;
    width: 0.6em;
    background-color: rgba(143, 121, 121, 0.797);
    border-radius: 50%;
    top: 2em;
    left: 0rem;
}

.halfCircle {
    color: rgb(100, 97, 97);
    font-size: x-small;
    left: 1.2em;
    top: 3.22em;
}

.power {
    color: rgb(100, 97, 97);
    font-size: xx-small;
    font-weight: bold;
    top: 5.2em;
    left: 0.2em;
}

.pantalla {
    height: 13em;
    width: 15em;
    background-color: #66664D;
    box-shadow: rgba(255, 255, 255, 0.25) 0px 30px 60px -12px inset, rgba(255, 255, 255, 0.3) 0px 18px 36px -18px inset;
    top: -3em;
    left: 3em;
}

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

div {
    padding: 0;
    margin: 0;
    width: 3em;
    height: 3em;
    position: absolute;
}

.wrapper {
    position: absolute;
    height: 9em;
    margin: auto;
    top: -2em;
    bottom: 0;
    left: 1em;
    right: 0;
    filter: drop-shadow(3px 3px 3px #777);
    scale: 1.7;
}

.center {
    z-index: 2;
    top: 3em;
}

.center-circle {
    position: static;
    background: #777;
    border-radius: 100%;
    width: 75%;
    height: 75%;
    z-index: 3;
    margin: auto;
}

.up,
.right,
.down,
.left,
.center {
    background: #272727;
    padding: 12px;
    border: 1px solid #272727;
    margin-top: 90px;
    scale: .45;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.right {
    top: 2em;
    left: -2.70em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.left {
    top: 2em;
    right: 5.3em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.down {
    top: 3.3em;
    left: -4em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.up {
    left: -4em;
    top: 0.7em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.center {
    left: -4em;
    top: 2em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.up-triangle {
    position: absolute;
    bottom: 16px;
    right: 8px;
    margin: auto;
    width: 65%;
    height: 65%;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
    border-bottom: solid 20px #151414;
}

.right-triangle {
    position: absolute;
    bottom: 8px;
    right: 0px;
    margin: auto;
    width: 65%;
    height: 65%;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
    border-bottom: solid 20px #151414;
    transform: rotate(90deg);
}

.down-triangle {
    position: absolute;
    bottom: 0px;
    right: 8px;
    margin: auto;
    width: 65%;
    height: 65%;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
    border-bottom: solid 20px #151414;
    transform: rotate(180deg);
}

.left-triangle {
    position: absolute;
    bottom: 8px;
    left: 1px;
    margin: auto;
    width: 65%;
    height: 65%;
    border-left: solid 15px transparent;
    border-right: solid 15px transparent;
    border-bottom: solid 20px #151414;
    transform: rotate(-90deg);
}

.center-circle {
    background-color: #151414;
}

.boton1 {
    height: 3.5em;
    width: 3.5em;
    background-color: rgb(44, 44, 44);
    border-radius: 50%;
    top: 21em;
    right: 4em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}


.boton2 {
    height: 3.5em;
    width: 3.5em;
    background-color: rgb(44, 44, 44);
    border-radius: 50%;
    top: 18em;
    right: 0em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.botonselect {
    position: absolute;
    height: 20px;
    width: 40px;
    background-color: rgb(44, 44, 44);
    border-radius: 10px;
    border: solid 1px black;
    top: 32em;
    left: 6.5em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.botonstart {
    position: absolute;
    height: 20px;
    width: 40px;
    background-color: rgb(44, 44, 44);
    border-radius: 10px;
    border: solid 1px black;
    top: 32em;
    left: 11em;
    box-shadow:
        inset 3px 5px 5px -1px rgb(255 255 255 / 50%),
        inset -3px -3px 5px -1px rgb(0 0 0 / 99%),
        1px 1px 1px 2px rgb(0 0 0 / 80%),
        2.5px 5px 5px 1px rgb(0 0 0 / 90%);
}

.botonpower {
    height: 0.5em;
    width: 2em;
    background-color: black;
    top: -6.79em;
    left: 1.3em;
    border-radius: 15%;
}

.botonpower:hover {
    cursor: pointer;
}

.pikachu {
    height: 4em;
    width: 4em;
    background-image: url(../img/pikachu3.png);
    background-size: cover;
    top: 18em;
}

.containerdespeaker {
    height: 29em;
    width: 20em;
}

.speaker {
    height: 100px;
    position: absolute;
    right: 16px;
    width: 100px;
    top: 29em;
    right: -2.9em;
}

.speaker:before {
    background-color: #FFBE0B;
    border-radius: 50%;
    box-shadow: 0px 0px #EFAF00, 0px 10px #9F7500, 0px 20px #EFAF00, 0px 30px #9F7500, 0px 40px #EFAF00, 0px 50px #9F7500, 0px 60px #FFBE0B, 10px 0px #9F7500, 10px 10px #EFAF00, 10px 20px #9F7500, 10px 30px #EFAF00, 10px 40px #9F7500, 10px 50px #EFAF00, 10px 60px #9F7500, 20px 0px #EFAF00, 20px 10px #9F7500, 20px 20px #EFAF00, 20px 30px #9F7500, 20px 40px #EFAF00, 20px 50px #9F7500, 20px 60px #EFAF00, 30px 0px #9F7500, 30px 10px #EFAF00, 30px 20px #9F7500, 30px 30px #EFAF00, 30px 40px #9F7500, 30px 50px #EFAF00, 30px 60px #9F7500, 40px 0px #EFAF00, 40px 10px #9F7500, 40px 20px #EFAF00, 40px 30px #9F7500, 40px 40px #EFAF00, 40px 50px #9F7500, 40px 60px #EFAF00, 50px 0px #9F7500, 50px 10px #EFAF00, 50px 20px #9F7500, 50px 30px #EFAF00, 50px 40px #9F7500, 50px 50px #EFAF00, 50px 60px #9F7500, 60px 0px #FFBE0B, 60px 10px #9F7500, 60px 20px #EFAF00, 60px 30px #9F7500, 60px 40px #EFAF00, 60px 50px #9F7500, 60px 60px #FFBE0B;
    content: '';
    height: 6px;
    left: 5px;
    position: absolute;
    top: 5px;
    transform: skew(0deg, -12deg);
    transform: translate(-50%, -50%);
    width: 6px;
}

.speaker2 {
    height: 100px;
    position: absolute;
    right: 16px;
    width: 100px;
    top: 29em;
    right: -1.6em;
}

.speaker2:before {
    background-color: #FFBE0B;
    border-radius: 50%;
    box-shadow: 0px 0px #EFAF00, 0px 10px #9F7500, 0px 20px #EFAF00, 0px 30px #9F7500, 0px 40px #EFAF00, 0px 50px #9F7500, 0px 60px #FFBE0B, 10px 0px #9F7500, 10px 10px #EFAF00, 10px 20px #9F7500, 10px 30px #EFAF00, 10px 40px #9F7500, 10px 50px #EFAF00, 10px 60px #9F7500;
    content: '';
    height: 6px;
    left: 5px;
    position: absolute;
    top: 5px;
    transform: skew(0deg, -12deg);
    transform: translate(-50%, -50%);
    width: 6px;
}

.botonselect:hover{
    cursor: pointer;
}

.botonstart:hover{
    cursor: pointer;
}

.wrapper:hover{
cursor: pointer;
}

.boton1:hover{
cursor: pointer;
}

.boton2:hover{
cursor: pointer;
}

.boton1:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.boton2:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.up:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.left:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.right:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.down:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.center:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.botonstart:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.botonselect:active {
    background: #3c3b3b;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }

.botonpower:active {
    background: #000000;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
     outline: none;
  }