How I moved an arrow

After I finished transferring this website on the new theme version as simply updating it wasn't possible, I asked my friends to take a look and point out everything what's wrong with it. One of the issues I couldn't fix right away was a scroll-to-top arrow position behind the chat-with-us button. In my theme there's no settings related to this element position, only on/off options. 

 I tried to find this element in my theme code to no vail so I asked my brother, java developer with more than 10 years experience,  where should it be. He redirected me to ASSETS, there I located default.css.liquid. There, I couldn't locate that arrow, so I went for another advice. Turns out you can ask your browser to point out "things" to you. Right click - inspect = it shows you the code of the element.

Here it is:

#site-scroll { color:#fff; line-height:33px; cursor: pointer; font-size: 20px; height: 35px; right:20px; position:fixed ; border-radius:50%; text-align: center; transition: all 0.3s ease 0s; width: 35px;
bottom:40px; z-index:444; display:none; background:{{ settings.scroll_icon_colors}}; }

Then, all I had to do is to change 20px to 50% and my arrow went to the middle of the page. I also was advised to add transform: translateX(50%);  so the positioning of the arrow would be cantered to it's canter, not right side.

I can proudly say I'm a very bad developer now :)

P.S. A also got to know that:

• transition: all 0.3s ease 0s; is the time it should take for the arrow to disappear 
• z-index:444; means the position of the element in the stack of other things, like layers in photoshop or parts in CAD.