.box {
    height: 30vh;
    width: 18vh;
    border-radius: 10px;
    margin: 2vh;
    padding: 2vh;
    display: inline-block;
    font-family: 'Yellowtail', cursive;
    text-align: center;
    background-image: -webkit-radial-gradient(center, transparent 0%,hsla(0, 0%, 0%, 0.2) 65%,hsla(0, 0%, 0%, 0.4) 100%),
        -webkit-linear-gradient(transparent 40%,hsla(0, 0%, 0%, 0.3) 75%,hsla(0, 0%, 0%, 0.3) 100%);
    background-image: -moz-radial-gradient(center, transparent 0%,hsla(0, 0%, 0%, 0.2) 65%,hsla(0, 0%, 0%, 0.4) 100%),
        -moz-linear-gradient(transparent 40%,hsla(0, 0%, 0%, 0.3) 75%,hsla(0, 0%, 0%, 0.3) 100%);
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px)
}

.box>.name {
    clear: both;
    text-align: center;
    font-size: 5vh;
    top: 20vh;
    left: 0;
    width: 100%;
    position: absolute;
}

.reverb {
    background-color: hsl(194, 61%, 54%);
    width: 25vh;
}

.reverb .led.on {
    background-color: hsl(194, 64%, 77%);
    box-shadow:
        inset 0px -2px 7px 2px rgba(255,255,255,0.8),
        0px 0px 60px 30px hsla(194, 75%, 75%, 1),
        inset 2px 0px 4px 1px hsla(194,50%,55%,0.9);
}

.overdrive {
    background-color: hsl(90, 67%, 40%);
}

.overdrive .pot.small {
    top: -5vh;
}

.overdrive .pot:nth-child(1) .name {
    left: -2.5vh;
}
.overdrive .pot:nth-child(2) .name {
    left: 2vh;
}

.volume {
    background-color: hsl(50, 60%, 47%);
}

.volume .led.on {
    background-color: hsl(194, 90%, 97%);
    box-shadow:
        inset 0px -2px 7px 2px rgba(255,255,255,0.8),
        0px 0px 60px 30px hsla(0, 0%, 95%, 1),
        inset 2px 0px 4px 1px hsla(0,0%,95%,0.9);
}

.cabinet {
    background-color: hsl(326, 64%, 37%);
}

.cabinet .led.on {
    background-color: hsl(326, 64%, 77%);
    box-shadow:
        inset 0px -2px 7px 2px rgba(255,255,255,0.8),
        0px 0px 60px 30px hsla(326, 65%, 75%, 1),
        inset 2px 0px 4px 1px hsla(326,50%,55%,0.9);
}

.tremolo {
    width: 25vh;
    background-color: hsl(30, 93%, 29%);
}

.tremolo .led.on {
    background-color: hsl(40, 81%, 53%);
    box-shadow:
        inset 0px -2px 7px 2px rgba(255,255,255,0.8),
        0px 0px 60px 30px hsla(40, 65%, 75%, 1),
        inset 2px 0px 4px 1px hsla(40,50%,55%,0.9);
}

.delay {
    width: 35vh;
    background-color: hsl(0, 63%, 29%);
}

.delay .led.on {
    background-color: hsl(0, 81%, 73%);
    box-shadow:
        inset 0px -2px 7px 2px rgba(255,255,255,0.8),
        0px 0px 60px 30px hsla(0, 65%, 75%, 1),
        inset 2px 0px 4px 1px hsla(0,50%,55%,0.9);
}

.flanger {
    width: 25vh;
    background-color: hsl(231, 25%, 55%);
}

.flanger .led.on {
    background-color: hsl(231, 71%, 69%);
    box-shadow:
        inset 0px -2px 7px 2px rgba(231,255,255,0.8),
        0px 0px 60px 30px hsla(231, 65%, 75%, 1),
        inset 2px 0px 4px 1px hsla(231,50%,55%,0.9);
}

.chorus {
    width: 25vh;
    background-color: hsl(166, 21%, 55%);
}

.chorus .led.on {
    background-color: hsl(186, 71%, 69%);
    box-shadow:
        inset 0px -2px 7px 2px rgba(255,255,255,0.8),
        0px 0px 60px 30px hsla(186, 65%, 75%, 1),
        inset 2px 0px 4px 1px hsla(186,50%,55%,0.9);
}

.compressor {
    width: 25vh;
    background-color: hsl(226, 71%, 30%);
}

.compressor .led.on {
    background-color: hsl(246, 100%, 69%);
    box-shadow:
        inset 0px -2px 7px 2px rgba(255,255,255,0.8),
        0px 0px 60px 30px hsla(246, 65%, 75%, 1),
        inset 2px 0px 4px 1px hsla(246,50%,55%,0.9);
}

.noise-gate {
    width: 25vh;
    background-color: hsl(166, 11%, 85%);
}

.noise-gate .led.on {
    background-color: hsl(0, 100%, 53%);
    box-shadow: inset 0px -2px 7px 2px rgba(255,95,95,1),
    0px 0px 60px 30px hsla(0, 75%, 59%, 1),
    inset 2px 0px 4px 1px hsla(0,60%,45%,0.9);
}

.noise-gate .pot .name {
  color: black;
  text-shadow: 0 0 1px black;
}

.box {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

.box .bgs {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.box .bg, .box .obg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0px;
    border-radius: 10px;
}

.box .bg:nth-child(1) {
    background: black;
    -webkit-transform: translateZ(-3px);
}
.box .bg:nth-child(2) {
    background: black;
    -webkit-transform: translateZ(-6px);
}
.box .bg:nth-child(3) {
    background: black;
    -webkit-transform: translateZ(-10px);
}
.box .bg:nth-child(4) {
    background: black;
    -webkit-transform: translateZ(-14px);
}
.box .bg:nth-child(5) {
    background: black;
    -webkit-transform: translateZ(-19px);
}
.box .bg:nth-child(6) {
    background: black;
    -webkit-transform: translateZ(-24px);
}
.box .bg:nth-child(7) {
    background: black;
    -webkit-transform: translateZ(-30px);
}
.box .bg:nth-child(8) {
    background: black;
    -webkit-transform: translateZ(-30px);
}
.box .bg:nth-child(9) {
    background: black;
    -webkit-transform: translateZ(-37px);
}
.box .bg:nth-child(10) {
    background: black;
    -webkit-transform: translateZ(-44px);
}
.box .bg:nth-child(11) {
    background: black;
    -webkit-transform: translateZ(-50px);
}
.box .bg:nth-child(12) {
    background: black;
    -webkit-transform: translateZ(-57px);
}
.box .bg:nth-child(13) {
    background: black;
    -webkit-transform: translateZ(-64px);
}
.box .bg:nth-child(14) {
    background: black;
    -webkit-transform: translateZ(-75px);
}