CSSが白くつぶれてしまう

ページトップボタンが作れません

色のついた半円の中に矢印があるようなボタンが作りたいです。真っ白になってしまうのはなぜでしょうか？ overflowが原因かと思って足してみましたが白いままです。デベロッパーにも何も出ていません。どうしたらいいでしょうか？　ご教授くださいませ。

該当の箇所

html
1<div id="main">
2   <section>内容</section>
3　 <!-- ボタン -->
4   <section id="pa_s">
5      <center><p class="pagetop"><a href="#all"></a></p></center>
6   </section>
7</div>

css
1#pa_s {
2    overflow: auto;
3    margin:0 auto 0 auto;
4    width:60px;
5    height:60px;
6    padding-top:13px;
7    color:#a89cc8;
8    background:#9bb2e1;
9    border:none;
10    border-radius:50%;
11    cursor:pointer;
12    position:relative;
13    z-index:-2;
14}
15.pagetop {
16    width: 90px;
17    height: 90px;
18    position: absolute;
19    margin-left: -45px;
20    padding: 0;
21    bottom: -12rem;
22    opacity: 0.6;
23    display: inline-block;
24}
25.pagetop a{
26    position: relative;
27    display: block;
28    width: 90px;
29    height: 90px;
30    text-decoration: none;
31    border-bottom: none;
32}
33.pagetop a::before{
34    font-family: 'Font Awesome 5 Free';
35    font-weight: 900;
36    content: '\f106';
37    font-size: 25px;
38    color: #85B2F5;
39    position: absolute;
40    width: 25px;
41    height: 25px;
42    top: -40px;
43    bottom: 0;
44    right: 0;
45    left: 0;
46    margin: auto;
47    text-align: center;
48}