Como fazer com que a label não apareça na frente da minha janela | Front-end

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<body>
    <label class="abrirmodal" for="abrefecha">Meus Animes</label>
    <input type="checkbox" id="abrefecha" class="checkboxver">
    <div class="modal">
        <label class="fecharmodal" for="abrefecha">X</label>
        <div class="conteudo">
            <ul class="imagens">
                <li><img class="img" src="snk.jpg" width="185px" height="250px" title="Attack on Titan">
                    <p class="titulo">Attack on Titan (5,0⭐)</p>
                </li>
                <li><img class="img" src="mob.jpg" width="185px" height="250px" title="Mob Psycho 100">
                    <p class="titulo">Mob Psycho 100 (5,0⭐)</p>
                </li>
                <li><img class="img" src="kaguya.jpeg" width="185px" height="250px" title="Kaguya Sama Love is War">
                    <p class="titulo">Kaguya Sama (5,0⭐)</p>
                </li>
                <li><img class="img" src="spy.webp" width="185px" height="250px" title="SpyXFamily">
                    <p class="titulo">SpyXFamily (5,0⭐)</p>
                </li>
                <li><img class="img" src="tokyo.jpg" width="185px" height="250px" title="Tokyo Revengers">
                    <p class="titulo">Tokyo Revengers (5,0⭐)</p>
                </li>
                <li><img class="img" src="darling.webp" width="185px" height="250px" title="My Dress-Up Darling">
                    <p class="titulo">Dress-Up Darling (5,0⭐)</p>
                </li>
                <li><img class="img" src="opm.jpg" width="185px" height="250px" title="One Punch Man">
                    <p class="titulo">One Punch Man (5,0⭐)</p>
                </li>
            </ul>
        </div>
    </div>
    <label class="abrirmodal2" for="abrefecha2">Meus Filmes</label>
    <input type="checkbox" id="abrefecha2" class="checkboxver">
    <div class="modal">
        <label class="fecharmodal" for="abrefecha2">X</label>
        <div class="conteudo">
            <ul class="imagens">

                </li>
            </ul>
        </div>
    </div>
    <label class="abrirmodal3" for="abrefecha3">Meus Games</label>
    <input type="checkbox" id="abrefecha3" class="checkboxver">
    <div class="modal">
        <label class="fecharmodal" for="abrefecha3">X</label>
        <div class="conteudo">
            <ul class="imagens">
            </ul>
        </div>
    </div>
</body>
</html>

}
body {
    display: flex;
    background-image: url(bg.jpg);
    background-repeat:  no-repeat;
    background-size: auto;
}
.abrirmodal {
    position: absolute;
    left: 50px;
    top: 50px;
    font-family: Rock Salt;
    font-size: 50px;
    padding: 20px;
    color: rgb(255, 123, 0);
    border: 4px solid;
    border-radius: 20px;
    box-shadow: 2px 2px 8px black;
}
.abrirmodal2 {
    position: absolute;
    left: 50px;
    top: 200px;
    font-family: Rock Salt;
    font-size: 50px;
    padding: 20px;
    color: rgb(255, 123, 0);
    border: 4px solid;
    border-radius: 20px;
    box-shadow: 2px 2px 8px black;
}
.abrirmodal3 {
    position: absolute;
    left: 50px;
    top: 350px;
    font-family: Rock Salt;
    font-size: 50px;
    padding: 20px;
    color: rgb(255, 123, 0);
    border: 4px solid;
    border-radius: 20px;
    box-shadow: 2px 2px 8px black;
}
.abrirmodal:hover {
    transform: scale(1.2); 
    cursor: pointer;  
}
.abrirmodal2:hover {
    transform: scale(1.2); 
    cursor: pointer;  
}
.abrirmodal3:hover {
    transform: scale(1.2); 
    cursor: pointer;  
}
#abrefecha:checked + .modal {
    display: flex;
}
#abrefecha2:checked + .modal {
    display: flex;
}
#abrefecha3:checked + .modal {
    display: flex;
}
.modal {
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.5);
}
.checkboxver {
    display: none;
}
.modal .fecharmodal {
    position: absolute;
    top: 10px;
    right: 10px;
    color: rgb(255, 123, 0);
    font-family: Rock Salt;
    font-size: 20px;
}
.modal .fecharmodal:hover{
    cursor: pointer;
    color: red;
    font-family: Rock Salt;
    font-size: 20px;
    transform: scale(1.5);
}
.modal .conteudo {
    width: 90%;
    height: 80%;
    border: 5px solid rgb(255, 123, 0);
    border-radius: 10px;
    background: rgb(20, 21, 31);
    box-shadow: 5px 5px 15px black;
    overflow: auto;
}
.imagens li {
    display: inline-block;
}
.img {
    margin: 20px 20px 20px 20px;
}
.titulo {
    font-size: 20px;
    margin-left: 20px;
    color: white;
}

Olá, Ithalo, tudo bem?

Desculpa a demora em retornar.

Ao analisar o seu código, percebi que você está utilizando a tag "label" para criar botões que abrem modalidades com informações sobre animes, filmes e games. Entretanto, você gostaria de fazer com que a label não apareça na frente da sua janela.

Para solucionar essa questão, você pode utilizar a propriedade "display: none" no CSS para esconder as labels. Dessa forma, os botões ainda serão clicáveis, mas a label não aparecerá na frente da janela.

Para isso, você pode adicionar a seguinte propriedade no CSS das suas labels:

label {
   display: none;
}

Assim, a label não será mais exibida na frente da janela, mas ainda estará presente para permitir o clique no botão que abre a modalidade.

Além disso, é importante lembrar que é possível utilizar outras tags, como "button" ou "div", para criar botões com funções semelhantes. Vale a pena considerar essa possibilidade caso você deseje ter mais flexibilidade no design do seu botão.

Espero que essa resposta tenha te ajudado. Qualquer dúvida, estamos à disposição.

Um abraço e bons estudos.