如何将文本限制为html/css-重叠图像中的各节和文本下方

Question

我正在尝试通过30DEG使用转换：旋转。

但是它与上面的视频重叠。

我如何仅限于文本以保持在框（红色框）下方。

。

感谢您的任何帮助。

#type-graphy{
    display: flex;
    white-space: nowrap;
    font-size: 100px;
    text-shadow: 0 0 120px #0f0;
    text-align: center;    
    transform: rotate(30deg);
}

span{
    position: relative;
    z-index: 2;
    font-size: 80px;
    color: black;
    padding: 0 2px;
    user-select: none;
    cursor: default;
    transition: 1s;
    white-space: nowrap;
   -webkit-text-stroke: 1px #0f0; 
    opacity: 20%;
}

    <section class="alpha-mate">
        <div class="banner" >
            <img class="mask" src="mask.png" alt="mask">
            <video class="vid1"  src="vid2.mp4" type="mp4" muted autoplay loop> </video>
            <!-- <img class="img2"  src="img3.jpg" alt=""> -->

           <p class="main-text">Happy birthday</p>
        </div>
    </section>
    <section class="type-graphy" id="type-graphy" >     
        <div class="name">
            <span>C</span>
            <span>a</span>
            <span>m</span>
            <span>r</span>
            <span>e</span>
            <span>n</span>
            <span> </span>
            <span>B</span>
            <span>i</span>
            <span>c</span>
            <span>o</span>
            <span>n</span>
            <span>d</span>
            <span>o</span>
            <span>a</span>
    </div>

Answer 1

    <section class="alpha-mate">
        <div class="banner" >
            <img class="mask" src="mask.png" alt="mask">
            <video class="vid1"  src="vid2.mp4" type="mp4" muted autoplay loop> </video>
            <!-- <img class="img2"  src="img3.jpg" alt=""> -->

           <p class="main-text">Happy birthday</p>
        </div>
    </section>
    <section class="type-graphy" id="type-graphy" >     
        <div class="name">
          <span>Camren Bicondova</span>
    </div>

#type-graphy{
    font-size: 100px;
    text-shadow: 0 0 120px #0f0;
    border:1px solid black;  
    overflow:hidden; // Use this feature to hide text when rotated
}

.name
{
  transform: rotate(30deg);
}

span{
    position: relative;
    z-index: 2;
    font-size: 80px;
    color: black;
    padding: 0 2px;
    user-select: none;
    cursor: default;
    transition: 1s;
    white-space: nowrap;
   -webkit-text-stroke: 1px #0f0; 
    opacity: 20%;
    letter-spacing:20px; // You don't need to put every letter in an element, it is enough to add this feature
}