Anchor tag with spans can not be clicked

I can not click on that anchor. I try a couple of possible solutions such as adding another anchor or div inside and outside that anchor, adding a z-index and position. edit: I've added the full code and I realize that z-index must solve the problem. However, I could not find where and how to use z-index.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100&display=swap');

* {
    scroll-behavior: smooth;
    text-decoration: none;
}

div, section {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Catamaran', sans-serif;
}

main {
    pointer-events: none;
    height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: -1;
}

.hi, .name {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 170px;
    color: #fff;
    height: fit-content;
    position: absolute;
}

.hi {
    top: 2%;
    left: 5%;
    text-shadow: 1px 1px 15px rgba(0,0,0,0.83);
}

.name {
    right: 7%;
    top: 18%;
}

.me {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 60px;
    color: #fff;
    height: fit-content;
    position: absolute;
    bottom: 2%;
    left: 5%;
    text-shadow: 1px px 15px rgba(0,0,0,0.83);
}

.background-text {
    width: fit-content;
    background: #12c2e9;
    background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.img-me {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.img-me img {
    height: 82vh;
}

.slide-down {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
}

.mouse-btn {
    margin: 10px auto;
    width: 40px;
    height: 80px;
    border: 3px solid rgba(122, 122, 124, 0.918);
    border-radius: 20px;
    display: flex;
  }
  
.mouse-scroll {
    width: 20px;
    height: 20px;
    background: linear-gradient(170deg, rgba(122, 122, 124, 0.918), rgb(123, 124, 124));
    border-radius: 50%;
    margin: auto;
    animation: scrolling13 1.5s linear infinite;
}
  
@keyframes scrolling13 {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    75% {
        opacity: 1;
        transform: translateY(18.5px);
    }

    80% {
        opacity: 0.5;
        transform: translateY(18.8px);
    }

    84% {
        opacity: 0.4;
        transform: translateY(19px);
    }

    88% {
        opacity: 0.3;
        transform: translateY(19.2px);
    }

    92% {
        opacity: 0.2;
        transform: translateY(19.4px);
    }

    95% {
        opacity: 0.1;
        transform: translateY(19.6px);
    }

    98% {
        opacity: 0;
        transform: translateY(19.8px);
    }
    
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

<main>
        <div class="hi">hi</div>
        <div class="name background-text">I am<br>Eren</div>
        <div class="me">A freelancer<br>developer<br>and a student</div>
        <div class="img-me"><img src="img/businessman-chatting-on-phone.png" alt="Young Man Chatting on Phone Illustration"></div>
        <a href="https://www.youtube.com/" class="slide-down">
            <span class="mouse-btn">
                <span class="mouse-scroll"></span>
            </span>
        </a>
</main>