:root{--bg-color: transparent}body{margin:0;padding:0;background-color:var(--bg-color);color:#fff;font-family:Outfit,sans-serif}#app{width:100%;height:100vh;display:flex;justify-content:center;align-items:center}.controller.ps5{background:url(https://i.imgur.com/fJIyBwn.png);width:807px;height:651px;margin-left:0;margin-top:0;position:relative}.ps5 .sticks{width:367px;height:100px;left:220px;top:333px;position:absolute}.ps5 .stick{background:url(https://i.imgur.com/nXaGdI2.png);width:100px;height:100px;position:absolute;transition:transform .05s linear}.ps5 .stick.pressed{background-position:-102px 0}.ps5 .stick.right{top:0;left:267px}.ps5 .abxy{width:181px;height:181px;left:573px;top:178px;position:absolute}.ps5 .button{background:url(https://i.imgur.com/DVqDSsJ.png);width:58px;height:58px;position:absolute;opacity:0;transition:opacity .05s ease-out,transform .05s ease-out,filter .05s ease-out}.ps5 .button.pressed{background-position-y:-59px;margin-top:0}.ps5 .button.active{opacity:1;transform:translateY(1px);filter:brightness(1.2)}.ps5 .a{background-position:0 0;left:61px;top:123px}.ps5 .b{background-position:-59px 0;left:123px;top:62px}.ps5 .x{background-position:-118px 0;left:0;top:61px}.ps5 .y{background-position:-177px 0;left:61px;top:0}.ps5 .arrows{left:195px;top:140px;width:416px;height:57px;position:absolute}.ps5 .quadrant{display:none}.ps5 .back,.ps5 .start{background:url(https://i.imgur.com/YJRVQxC.png);width:27px;height:57px;opacity:0;position:absolute}.ps5 .start{background-position:27px 0;right:0}.ps5 .back.active,.ps5 .start.active{opacity:1;transform:translateY(1px);filter:brightness(1.1)}.ps5 .dpad{width:144px;height:144px;left:71px;top:196px;position:absolute}.ps5 .face{background:url(https://i.imgur.com/hCmzXWK.png);position:absolute;opacity:0;transition:opacity .05s ease-out,transform .05s ease-out}.ps5 .face.active{opacity:1;transform:translateY(1px)}.ps5 .face.up{background-position:0 -68px;width:52px;height:63px;left:46px}.ps5 .face.down{background-position:-54px 63px;width:52px;height:63px;left:46px;top:81px}.ps5 .face.left{background-position:-108px -68px;width:64px;height:52px;left:-1px;top:47px}.ps5 .face.right{background-position:-175px -68px;width:63px;height:52px;left:81px;top:46px}.ps5 .bumpers{width:620px;height:35px;left:93px;top:114px;position:absolute;z-index:2}.ps5 .bumper{background:url(https://i.imgur.com/2YssqRT.png);width:110px;height:35px;opacity:0;position:absolute}.ps5 .bumper.active,.ps5 .bumper.pressed{opacity:1;transform:translateY(1px);filter:brightness(1.1)}.ps5 .bumper.left{left:0}.ps5 .bumper.right{right:0;background-position:0 0;transform:scaleX(-1);transform-origin:center}.ps5 .bumper.right.pressed{background-position:0 -36px;transform:scaleX(-1)}.ps5 .triggers{width:619px;height:108px;left:94px;position:absolute;top:0;z-index:1}.ps5 .trigger{background:url(https://i.imgur.com/LsxmGBD.png);width:111px;height:108px;opacity:0;position:absolute;top:0}.ps5 .trigger.left{left:0}.ps5 .trigger.right{background-position:-113px 0;transform:rotateY(0) scaleX(1);right:0}#gv-controller{cursor:pointer}.ps5 .touchpad{position:absolute;left:380px;top:200px;width:40px;height:40px;border-radius:50%;background:#2d5af0d9;box-shadow:0 0 10px #2d5af099;opacity:0;transition:opacity .05s ease-out,transform .05s ease-out,filter .05s ease-out;z-index:3}.ps5 .touchpad.active{opacity:1;transform:translateY(1px)}.ps5 .ps{position:absolute;left:373px;top:345px;width:60px;height:60px;background-image:url(/ps5-controller-visualizer/Images/PS_Color.png);background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity .05s ease-out,transform .05s ease-out,filter .05s ease-out;z-index:3}.ps5 .ps.active{opacity:1;transform:translateY(1px);filter:none}