/* Base styles for the controller */
.controller-container {
    position: relative;
    width: 100%;
    /* Adjust width as necessary */
    height: 100%;
    /* Adjust height as necessary */
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
}

.controller {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    display: block;
    /* Ensure it displays as needed */
    margin-top: 30px;
    /* Adjust if necessary */
    margin-left: 0px;
}

.controller.active {
    display: block;
    /* Display only the active controller */
}

.controller.half {
    margin-top: 0px !important;
}

/* Responsive adjustments for different screen sizes */
@media screen and (max-width: 1440px) {

    /* Large desktops */
    .controller-container {
        transform: translate(-50%, -50%) scale(0.9);
    }

    .controller {
        transform: translate(-50%, -50%) scale(0.9);
    }
}

@media screen and (max-width: 1024px) {

    /* Tablets and smaller desktop screens */
    .controller-container {
        transform: translate(-50%, -50%) scale(0.8);
    }

    .controller {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

@media screen and (max-width: 768px) {

    /* Tablets */
    .controller-container {
        transform: translate(-50%, -50%) scale(0.7);
    }

    .controller {
        transform: translate(-50%, -50%) scale(0.7);
    }
}

@media screen and (max-width: 600px) {

    /* Small tablets / large phones */
    .controller-container {
        transform: translate(-50%, -50%) scale(0.6);
    }

    .controller {
        transform: translate(-50%, -50%) scale(0.6);
    }
}

@media screen and (max-width: 480px) {

    /* Mobile devices */
    .controller-container {
        transform: translate(-50%, -50%) scale(0.5);
    }

    .controller {
        transform: translate(-50%, -50%) scale(0.5);
    }
}

@media screen and (max-width: 360px) {

    /* Small mobile devices (like older phones) */
    .controller-container {
        transform: translate(-50%, -50%) scale(0.4);
    }

    .controller {
        transform: translate(-50%, -50%) scale(0.4);
    }
}


/*BEGIN XBOX360 Controller Styling*/

.controller.xbox-old {
    background: url(xbox-old-assets/base.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old.disconnected {
    background: url(xbox-old-assets/disconnected.png);
}

.xbox-old.disconnected div {
    display: none;
}

.xbox-old .triggers {
    position: absolute;
    background-repeat: no-repeat;
}

.xbox-old .trigger {
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .trigger.left {
    height: 784px;
    width: 906px;
    background: url(xbox-old-assets/L2.png);
    position: absolute;
    background-repeat: no-repeat;
}

.xbox-old .trigger.right {
    height: 784px;
    width: 906px;
    background: url(xbox-old-assets/R2.png);
    position: absolute;
    background-repeat: no-repeat;
}

.xbox-old .bumper {
    opacity: 0;
}

.xbox-old .bumper.pressed {
    opacity: 1;
}

.xbox-old .bumper.right {
    height: 784px;
    width: 906px;
    background: url(xbox-old-assets/R1.png);
    position: absolute;
    background-repeat: no-repeat;
}

.xbox-old .bumper.left {
    height: 784px;
    width: 906px;
    background: url(xbox-old-assets/L1.png);
    position: absolute;
    background-repeat: no-repeat;
}

.xbox-old .arrows {
    position: absolute;
    width: 205px;
    height: 19px;
    top: 250px;
    left: 291px;
    background-repeat: no-repeat;
}

.xbox-old .back {
    opacity: 0;
    position: absolute;
}

.xbox-old .start {
    opacity: 0;
    position: absolute;
}

.xbox-old .back.pressed {
    height: 784px;
    width: 906px;
    left: -291px;
    top: -250px;
    background: url(xbox-old-assets/Share.png);
    position: absolute;
    opacity: 1;
}

.xbox-old .start.pressed {
    height: 784px;
    width: 906px;
    left: -291px;
    top: -250px;
    background: url(xbox-old-assets/Options.png);
    opacity: 1;
}

.xbox-old .abxy {
    position: absolute;
    background-repeat: no-repeat;
}

.xbox-old .button {
    position: absolute;
}

.xbox-old .button.pressed {
    background-position-y: -00px;
    margin-top: 0px;
}

.xbox-old .a.pressed {
    background: url(xbox-old-assets/X.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .b.pressed {
    background: url(xbox-old-assets/O.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .x.pressed {
    background: url(xbox-old-assets/S.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .y.pressed {
    background: url(xbox-old-assets/T.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .meta.pressed {
    background: url(xbox-old-assets/meta.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .sticks {
    left: 122px;
    top: 256px;
    position: absolute;
    background-repeat: no-repeat;
}

.xbox-old .stick. {
    position: absolute;
}

.xbox-old .stick.pressed.left {
    position: absolute;
    background: url(xbox-old-assets/L3.png);
    height: 116px;
    width: 116px;
    background-repeat: no-repeat;
}

.xbox-old .stick.pressed.right {
    position: absolute;
    background: url(xbox-old-assets/R3.png);
    height: 116px;
    width: 116px;
    background-repeat: no-repeat;
}

.xbox-old .stick.left {
    position: absolute;
    background: url(xbox-old-assets/LS.png);
    height: 116px;
    width: 116px;
    background-repeat: no-repeat;
}

.xbox-old .stick.right {
    position: absolute;
    background: url(xbox-old-assets/RS.png);
    left: 382px;
    top: 152px;
    height: 116px;
    width: 116px;
    background-repeat: no-repeat;
}

.xbox-old .dpad {
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .face {
    background: url(xbox-old-assets/dpad.png);
    position: absolute;
}

.xbox-old .face.right.pressed {
    background: url(xbox-old-assets/RIGHT.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .face.left.pressed {
    background: url(xbox-old-assets/LEFT.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .face.up.pressed {
    background: url(xbox-old-assets/UP.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

.xbox-old .face.down.pressed {
    background: url(xbox-old-assets/DOWN.png);
    height: 784px;
    width: 906px;
    background-repeat: no-repeat;
}

/*END XBOX360 Controller Styling*/

/*BEGIN Xbox One Controller Styling*/
.controller.xbox {
    background: url(xbox-assets/base.png);
    height: 630px;
    width: 750px;
    /*    margin-left: -375px;
        margin-top: -285px;*/
}

.xbox.disconnected {
    background: url(xbox-assets/disconnected.png);
}

.xbox.disconnected div {
    display: none;
}

.xbox .triggers {
    width: 446px;
    height: 121px;
    position: absolute;
    left: 152px;
}

.xbox .trigger {
    width: 88px;
    height: 121px;
    background: url(xbox-assets/trigger.png);
    opacity: 0;
}

.xbox .trigger.left {
    float: left;
    background-position: 0 0;
}

.xbox .trigger.right {
    float: right;
    transform: rotateY(180deg);
}

.xbox .bumper {
    width: 170px;
    height: 61px;
    background: url(xbox-assets/bumper.png);
    opacity: 0;
}

.xbox .bumpers {
    position: absolute;
    width: 536px;
    height: 61px;
    left: 107px;
    top: 129px;
}

.xbox .bumper.pressed {
    opacity: 1;
}

.xbox .bumper.left {
    float: left;
}

.xbox .bumper.right {
    float: right;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.xbox .quadrant {
    position: absolute;
    background: url(xbox-assets/quadrant.png);
    height: 45px;
    width: 45px;
    top: 258px;
    left: 354px;
    z-index: 0;
}

.xbox .p0 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.xbox .p1 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.xbox .p2 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.xbox .p3 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.xbox .arrows {
    position: absolute;
    width: 141px;
    height: 33px;
    top: 264px;
    left: 306px;
}

.xbox .back,
.xbox .start {
    background: url(xbox-assets/start-select.png);
    width: 33px;
    height: 33px;
    opacity: 0;
    position: absolute;
}

.xbox .back.pressed,
.xbox .start.pressed {
    opacity: 1;
}

.xbox .back {
    float: left;
    top: -12px;
}

.xbox .start {
    background-position: 33px 0px;
    float: right;
    top: -12px;
    left: 105px;
}

.xbox .abxy {
    position: absolute;
    width: 153px;
    height: 156px;
    top: 192px;
    left: 488px;
}

.xbox .button {
    position: absolute;
    background: url(xbox-assets/abxy.png);
    width: 48px;
    height: 48px;
}

.xbox .button.pressed {
    background-position-y: -48px;
    margin-top: 0px;
    opacity: 1;
}

.xbox .a {
    background-position: 0 0;
    top: 108px;
    left: 55px;
}

.xbox .b {
    background-position: -49px 0;
    top: 58px;
    right: 0px;
}

.xbox .x {
    background-position: -98px 0;
    top: 58px;
    left: 4px;
}

.xbox .y {
    background-position: 48px 0;
    left: 55px;
    top: 7px;
}

.xbox .sticks {
    position: absolute;
    width: 371px;
    height: 196px;
    top: 239px;
    left: 144px;
}

.xbox .stick {
    position: absolute;
    background: url(xbox-assets/stick.png);
    background-position: -85px 0;
    height: 83px;
    width: 83px;
}

.xbox .stick.pressed {
    background-position: 0 0;
}

.xbox .stick.left {
    top: -12px;
    left: 6px;
}

.xbox .stick.right {
    top: 95px;
    left: 283px;
}

.xbox .dpad {
    position: absolute;
    width: 110px;
    height: 111px;
    top: 330px;
    left: 228px;
}

.xbox .face {
    background: url(xbox-assets/dpad.png);
    position: absolute;
    opacity: 0;
}

.xbox .face.pressed {
    opacity: 1;
}

.xbox .face.up {
    background-position: 34px 0;
    left: 38px;
    top: 0px;
    width: 34px;
    height: 56px;
}

.xbox .face.down {
    left: 38px;
    bottom: 0;
    width: 34px;
    height: 56px;
}

.xbox .face.left {
    background-position: 0 -93px;
    width: 55px;
    height: 35px;
    top: 38px;
    left: 0;
}

.xbox .face.right {
    background-position: 0 -57px;
    width: 55px;
    height: 35px;
    top: 38px;
    right: 0;
}

.xbox.half {
    margin-top: -315px;
}

.xbox {
    background: no-repeat center;
}

/*END Xbox One Controller Styling*/

/*BEGIN PS3 Controller Styling*/
.controller.ps {
    background: url(ps3-assets/base.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps.disconnected {
    background: url(ps3-assets/disconnected.png);
}

.ps.disconnected div {
    display: none;
}

.ps .triggers {
    position: absolute;
    background-repeat: no-repeat;
}

.ps .trigger {
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .trigger.left {
    height: 755px;
    width: 945px;
    background: url(ps3-assets/L2.png);
    position: absolute;
    background-repeat: no-repeat;
}

.ps .trigger.right {
    height: 755px;
    width: 945px;
    background: url(ps3-assets/R2.png);
    position: absolute;
    background-repeat: no-repeat;
}

.ps .bumper {
    opacity: 0;
}

.ps .bumper.pressed {
    opacity: 1;
}

.ps .bumper.right {
    height: 755px;
    width: 945px;
    background: url(ps3-assets/R1.png);
    position: absolute;
    background-repeat: no-repeat;
}

.ps .bumper.left {
    height: 755px;
    width: 945px;
    background: url(ps3-assets/L1.png);
    position: absolute;
    background-repeat: no-repeat;
}

.ps .arrows {
    position: absolute;
    width: 205px;
    height: 19px;
    top: 250px;
    left: 291px;
    background-repeat: no-repeat;
}

.ps .back {
    opacity: 0;
    position: absolute;
}

.ps .start {
    opacity: 0;
    position: absolute;
}

.ps .back.pressed {
    height: 755px;
    width: 945px;
    left: -291px;
    top: -250px;
    background: url(ps3-assets/Share.png);
    position: absolute;
    opacity: 1;
}

.ps .start.pressed {
    height: 755px;
    width: 945px;
    left: -291px;
    top: -250px;
    background: url(ps3-assets/Options.png);
    opacity: 1;
}

.ps .abxy {
    position: absolute;
    background-repeat: no-repeat;
}

.ps .button {
    position: absolute;
}

.ps .button.pressed {
    background-position-y: -00px;
    margin-top: 0px;
}

.ps .a.pressed {
    background: url(ps3-assets/X.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .b.pressed {
    background: url(ps3-assets/O.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .x.pressed {
    background: url(ps3-assets/S.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .y.pressed {
    background: url(ps3-assets/T.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .meta.pressed {
    background: url(ps3-assets/meta.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .sticks {
    left: 266px;
    top: 429px;
    position: absolute;
    background-repeat: no-repeat;
}

.ps .stick. {
    position: absolute;
}

.ps .stick.pressed.left {
    position: absolute;
    background: url(ps3-assets/L3.png);
    height: 124px;
    width: 124px;
    background-repeat: no-repeat;
}

.ps .stick.pressed.right {
    position: absolute;
    background: url(ps3-assets/R3.png);
    height: 124px;
    width: 124px;
    background-repeat: no-repeat;
}

.ps .stick.left {
    position: absolute;
    background: url(ps3-assets/LS.png);
    height: 124px;
    width: 124px;
    background-repeat: no-repeat;
}

.ps .stick.right {
    position: absolute;
    background: url(ps3-assets/RS.png);
    left: 292px;
    height: 124px;
    width: 124px;
    background-repeat: no-repeat;
}

.ps .dpad {
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .face {
    background: url(ps3-assets/dpad.png);
    position: absolute;
}

.ps .face.right.pressed {
    background: url(ps3-assets/RIGHT.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .face.left.pressed {
    background: url(ps3-assets/LEFT.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .face.up.pressed {
    background: url(ps3-assets/UP.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

.ps .face.down.pressed {
    background: url(ps3-assets/DOWN.png);
    height: 755px;
    width: 945px;
    background-repeat: no-repeat;
}

/* end ps3 white styles */

/*BEGIN PS4 Controller Styling*/

/*BEGIN PS4 Controller Styling*/
.controller.ds4 {
    background: url(ps4-assets/Base.png);
    height: 598px;
    width: 806px;
}

.ds4.disconnected {
    background: url(ps4-assets/Base.png);
}

.ds4.disconnected div {
    display: none;
}

.ds4 .triggers {
    width: 588px;
    height: 90px;
    position: absolute;
    top: px;
    left: 109px;
}

.ds4 .trigger {
    width: 99px;
    height: 100%;
    background: url(ps4-assets/Triggers_Pressed.png);
    opacity: 0;
}

.ds4 .trigger.left {
    float: left;
}

.ds4 .trigger.right {
    background-position-x: 98px;
    float: right;
}

.ds4 .bumper {
    width: 99px;
    height: 23px;
    background: url(ps4-assets/Bumper.png) no-repeat;
    opacity: 0;
}

.ds4 .bumpers {
    position: absolute;
    width: 588px;
    height: 23px;
    left: 112px;
    top: 94px;
}

.ds4 .bumper.pressed {
    opacity: 1;
}

.ds4 .bumper.left {
    float: left;
}

.ds4 .bumper.right {
    float: right;
    transform: rotateY(180deg) translateX(3px);
}

.ds4 .touchpad {
    width: 262px;
    height: 151px;
    position: absolute;
    left: 274px;
    top: 119px;
}

.ds4 .touchpad.pressed {
    background: url(ps4-assets/Touchpad.png) no-repeat center;
}

.ds4 .meta {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 383px;
    bottom: 215px;
    top: 335px;
}

.ds4 .meta.pressed {
    background: url(ps4-assets/PS_Logo.png) no-repeat center;
}

.ds4 .arrows {
    position: absolute;
    width: 352px;
    height: 46px;
    top: 142px;
    left: 227px;
}

.ds4 .back,
.ds4 .start {
    background: url(ps4-assets/Start.png);
    width: 27px;
    height: 48px;
    opacity: 0;
}

.ds4 .back.pressed,
.ds4 .start.pressed {
    opacity: 1;
}

.ds4 .back {
    float: left;
    transform: translateY(-6px) scale(0.9);
}

.ds4 .start {
    float: right;
    background-position: 28px 0;
    transform: translateX(1px) translateY(-6px) scale(0.9);
}



.ds4 .abxy {
    position: absolute;
    width: 170px;
    height: 171px;
    top: 156px;
    left: 569px;
}

.ds4 .button {
    position: absolute;
    width: 55px;
    height: 55px;
    background: url(ps4-assets/Face_Button.png);
}

.ds4 .button.pressed {
    background-position-y: 55px;
}

.ds4 .a {
    background-position: 0 0;
    bottom: 0;
    top: 119px;
    left: 58px;
}

.ds4 .b {
    background-position: -57px 0;
    top: 60px;
    right: -2px;
}

.ds4 .x {
    background-position: -113px 0;
    top: 58px;
    right: 115px;
}

.ds4 .y {
    background-position: 55px 0;
    top: 1px;
    left: 56px;
}

.ds4 .sticks {
    position: absolute;
    width: 361px;
    height: 105px;
    top: 309px;
    left: 228px;
}

.ds4 .stick {
    position: absolute;
    background: url(ps4-assets/Sticks.png);
    height: 94px;
    width: 94px;
}

.ds4 .stick.pressed.left {
    background-position-x: -96px;
}

.ds4 .stick.pressed.right {
    background-position-x: -192px;
}

.ds4 .stick.left {
    top: 0;
    left: 0;
}

.ds4 .stick.right {
    top: calc(100% - 105px);
    left: calc(100% - 105px);
}

.ds4 .dpad {
    position: absolute;
    width: 125px;
    height: 126px;
    top: 182px;
    left: 92px;
}

.ds4 .face {
    background: url(ps4-assets/Dpad.png);
    position: absolute;
}

.ds4 .face.up,
.ds4 .face.down {
    width: 36px;
    height: 52px;
}

.ds4 .face.left,
.ds4 .face.right {
    width: 52px;
    height: 36px;
}

.ds4 .face.right.pressed {
    left: 73px;
}

.ds4 .face.up {
    left: 44px;
    bottom: 10;
    background-position: -37px 0px;
}

.ds4 .face.down {
    left: 44px;
    top: 74px;
    bottom: 0;
    background-position: 0px 0;
}

.ds4 .face.left {
    top: 45px;
    left: 0;
    background-position: 104px 0;
}

.ds4 .face.right {
    top: 45px;
    right: 0px;
    background-position: 52px 0;
}

.ds4 .face.pressed {
    background-position-y: 52px;
}

.ds4.half {
    margin-top: -300px;
}

/*END PS4 Controller Styling*/

/*END PS4 Controller Styling*/

/* Begin PS5 Controller Styling */

.controller.ds5 {
    background: url(ps5-assets/ba5e.png) no-repeat center center;
    /* Center the background image */
    background-size: fill;
    /* Adjust this depending on your needs (cover, contain, etc.) */
    height: 700px;
    width: 1200px;
    /* margin-left: -403px;
       margin-top: -280px; */
}


.ds5.disconnected div {
    display: none;
}

.ds5 .triggers {
    width: 598px;
    height: 90px;
    position: absolute;
    left: 299px;
    top: 38px;
}

.ds5 .trigger {
    width: 99px;
    height: 100%;
    background: url(ps5-assets/Trigger_Pressed.png);
    opacity: 0;
}

.ds5 .trigger.left {
    float: left;
}

.ds5 .trigger.right {
    float: right;
    background-position-x: 99px;
}

.ds5 .bumper {
    width: 200px;
    height: 45px;
    background: url(ps5-assets/Bumper.png) no-repeat;
    opacity: 0;
}

.ds5 .bumpers {
    position: absolute;
    width: 672px;
    height: 23px;
    left: 263px;
    top: 132px;
}

.ds5 .bumper.pressed {
    opacity: 0.8;
}

.ds5 .bumper.left {
    /* -webkit-transform: rotateY(180deg); */
    /* transform: rotateY(180deg); */
    float: left;
}

.ds5 .bumper.right {
    float: right;
    transform: rotateY(180deg);
}

.ds5 .touchpad {
    width: 350px;
    height: 300px;
    position: absolute;
    left: 425px;
    top: 74px;
}

.ds5 .touchpad.pressed {
    background: url(ps5-assets/Touchpad.png) no-repeat center;
}

.ds5 .meta {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 546px;
    bottom: 264px;
}

.ds5 .meta.pressed {
    background: url(ps5-assets/Home.png) no-repeat center;
}

.ds5 .p0 {
    background-position: 0 -6px;
}

.ds5 .p1 {
    background-position: 0 -28px;
}

.ds5 .p2 {
    background-position: 0 -49px;
}

.ds5 .p3 {
    background-position: 0 -70px;
}

*/ .ds5 .arrows {
    position: absolute;
    width: 352px;
    height: 46px;
    top: 142px;
    left: 227px;
}

.ds5 .back,
.ds5 .start {
    background: url(ps5-assets/Select.png);
    width: 26px;
    height: 43px;
    opacity: 0;
}

.ds5 .start {
    position: absolute;
    left: 546px;
    bottom: -30px;
}

.ds5 .back {
    position: absolute;
    left: 170px;
    bottom: -30px;
}


.ds5 .back.pressed,
.ds5 .start.pressed {
    /* background-position-y: -21px; */
    /* margin-top: 2px; */
    opacity: 1;
}

.ds5 .back {
    float: left;
    /* width: 28px; */
}

.ds5 .start {
    float: right;
    /* width: 28px; */
    background-position: 0px 0;
}

.ds5 .abxy {
    position: absolute;
    width: 170px;
    height: 171px;
    top: 200px;
    left: 762px;
}

.ds5 .button {
    position: absolute;
    width: 55px;
    height: 55px;
    background: url(ps5-assets/FaceButtons.png);
}

.ds5 .button.pressed {
    background-position-y: 55px;
    /* margin-top: 5px; */
}

.ds5 .a {
    background-position: 0 0;
    bottom: 0px;
    left: 58px;
}

.ds5 .b {
    background-position: -57px 0;
    top: 57px;
    right: -3px;
}

.ds5 .x {
    background-position: -113px 0;
    top: 57px;
}

.ds5 .y {
    background-position: 55px 0;
    left: 58px;
    bottom: 119px;
}

.ds5 .sticks {
    position: absolute;
    width: 364px;
    height: 105px;
    top: 348px;
    left: 422px;
}

.ds5 .stick {
    position: absolute;
    background: url(ps5-assets/Sticks.png);
    height: 94px;
    width: 94px;
}

.ds5 .stick.pressed.left {
    background-position-x: -96px;
}

.ds5 .stick.pressed.right {
    background-position-x: -192px;
}

.ds5 .stick.left {
    top: 0;
    left: 0;
}

.ds5 .stick.right {
    top: calc(100% - 105px);
    left: calc(100% - 105px);
}

.ds5 .dpad {
    position: absolute;
    width: 125px;
    height: 126px;
    top: 220px;
    left: 286px;
}

.ds5 .face {
    background: url(ps5-assets/Dpad.png);
    position: absolute;
}

.ds5 .face.up,
.ds5 .face.down {
    width: 37px;
    height: 52px;
}

.ds5 .face.left,
.ds5 .face.right {
    width: 52px;
    height: 40px;
}

.ds5 .face.up {
    left: 44px;
    top: 0;
    background-position: -37px 0px;
}

.ds5 .face.down {
    left: 44px;
    bottom: 0;
    background-position: 0px 0;
}

.ds5 .face.left {
    top: 45px;
    left: 0;
    background-position: 104px 0;
}

.ds5 .face.right {
    top: 45px;
    right: 0px;
    background-position: 52px 0;
}

.ds5 .face.pressed {
    /* margin-top: 5px; */
    background-position-y: 52px;
}

.ds5.half {
    margin-top: -300px;
}


.ds5.white .back,
.ds5 .start {
    background-image: url(ps5-assets/Start.png);
    width: 26px;
    height: 43px;

}

.ds5 .start {
    position: absolute;
    top: 175px;
    left: 775px;

}

.ds5 .back {
    position: absolute;
    top: 175px;
    left: 400px;
}


/*END PS5 Controller Styling*/

/*BEGIN GameCube Controller Styling*/
.controller.gc {
    background: url(gc-assets/base.png) no-repeat;
    height: 837px;
    width: 978px;
}

.gc.disconnected {
    background: url(gc-assets/disconnected.png) no-repeat;
}

.gc.disconnected div {
    display: none;
}

.gc .triggers {
    width: 775px;
    height: 95px;
    position: absolute;
    left: 102px;
}

.gc .trigger {
    width: 131px;
    height: 100%;
    background: url(gc-assets/trigger.png);
    opacity: 0;
}

.gc .trigger.left {
    float: left;
}

.gc .trigger.right {
    float: right;
}

.gc .bumper {
    width: 158px;
    height: 100%;
    background: url(gc-assets/buttons.png) no-repeat;
    background-position: -358px 0px;
    opacity: 0;
}

.gc .bumpers {
    position: absolute;
    width: 792px;
    height: 73px;
    left: 103px;
    top: 138px;
}

.gc .bumper.pressed {
    opacity: 1;
}

.gc .bumper.left {
    /* -webkit-transform: rotateY(180deg); */
    /* transform: rotateY(180deg); */
    float: left;
    display: none;
}

.gc .bumper.right {
    float: right;
}

/*Not needed, but I like keeping them here for posterity*/
/*.gc .quadrant{
position: absolute;
background: url(gc-assets/player-n.png);
height: 17px;
width: 111px;
top: 140px;
left: 240px;
}
.gc .p0{
background-position: 0 -6px;
}
.gc .p1{
background-position: 0 -28px;
}
.gc .p2{
background-position: 0 -49px;
}
.gc .p3{
background-position: 0 -70px;
}*/

.gc .arrows {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 324px;
    left: 465px;
}

.gc .back,
.gc .start {
    width: 43px;
    height: 43px;
    background: #E7E7E7;
    border-radius: 100%;
    border: solid 4.5px rgba(0, 0, 0, .65);
    background-clip: content-box;
    opacity: 0;
}

.gc .back.pressed,
.gc .start.pressed {
    opacity: 1;
    filter: invert(1);
    -webkit-filter: invert(1);
}

.gc .back {
    display: none;
}

.gc .start {
    float: right;
}

.gc .abxy {
    position: absolute;
    width: 288px;
    height: 230px;
    top: 207px;
    left: 640px;
}

.gc .button {
    position: absolute;
    background: url(gc-assets/buttons.png);
    opacity: 0;
}

.gc .button.pressed {
    opacity: 1;
}

.gc .a {
    background-position: 0 0;
    width: 114px;
    height: 114px;
    bottom: 35px;
    left: 91px;
}

.gc .b {
    width: 71px;
    height: 71px;
    background-position: -116px 0;
    bottom: 0px;
    left: 1px;
}

.gc .x {
    width: 66px;
    height: 103px;
    background-position: -292px 0;
    top: 65px;
    right: 0px;
}

.gc .y {
    width: 103px;
    height: 66px;
    background-position: -189px 0;
    left: 67px;
    top: 2px;
}

.gc .sticks {
    position: absolute;
    width: 628px;
    height: 392px;
    top: 258px;
    left: 106px;
}

.gc .stick {
    position: absolute;
}

.gc .stick.left {
    top: 24px;
    left: 23px;
    background: url(gc-assets/left-stick.png) center no-repeat;
    height: 121px;
    width: 121px;
}

.gc .stick.right {
    top: calc(100% - 127px);
    left: calc(100% - 125px);
    background: url(gc-assets/cstick.png) center no-repeat;
    width: 84px;
    height: 84px;
}

.gc .dpad {
    position: absolute;
    width: 125px;
    height: 126px;
    top: 181px;
    left: 92px;
}

.gc .dpad {
    position: absolute;
    width: 130px;
    height: 130px;
    top: 497px;
    left: 263px;
}

.gc .face {
    background: url(gc-assets/dpad.png) no-repeat;
    position: absolute;
    opacity: 0;
}

.gc .face.up,
.gc .face.down {
    width: 44px;
    height: 65px;
}

.gc .face.left,
.gc .face.right {
    width: 65px;
    height: 44px;
}

.gc .face.up {
    left: 42px;
    top: 0;
    background-position: 0px 0px;
}

.gc .face.down {
    left: 42px;
    bottom: 0;
    background-position: -46px 0;
}

.gc .face.left {
    top: 43px;
    left: 0;
    background-position: -93px 0;
}

.gc .face.right {
    top: 43px;
    right: 0px;
    background-position: -160px 0;
}

.gc .face.pressed {
    opacity: 1;
}

/*END GameCube Controller Styling*/