Estou com duvida de como fazer uma Barra de Pesquisa com JS | JavaScript

[Duvida] Olá, estava tentando criar um input que faria uma busca na minha lista, mas estou com três dificuldades.

Não estou conseguido adicionar a função : toLowerCase(). Queria que independente se o usuário digitasse em letras maiúsculas ou minúsculas ele ainda assim encontraria o item que procura.
1. Quando o item é encontrado, o body deixa de ocupar 100% da página. Quando pesquiso o item, ele recebe o display: block e os outros o display: none, então a imagem de fundo diminui. Gostaria de saber como deixo o body fixo (sem se deforma) mesmo tendo um item sendo mostrado na lista.
2. Não estou conseguindo fazer com que itens que tenham os mesmos caracteres apareçam na lista. Quando digito um caractere (Exemplo: digitei o caractere: "A" ou "a" no input) queria que os todos os itens que possuem o caractere "A" ou "a" apareçam, mas não sei como fazer essa lógica.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/main.css">
    <title>Barra de Buscas</title>
</head>
<body>
    <h1 class="titulo">Qual jogo você procura?</h1>

    <input id="pesquisa" class="pesquisa" type="search">

    <ul id="lista" class="lista">
        <li id="lista__item" class="lista__item item__1" >Mega-Man</li>
        <li id="lista__item" class="lista__item item__2" >Mario Bros</li>
        <li id="lista__item" class="lista__item item__3" >Street Fighter</li>
        <li id="lista__item" class="lista__item item__4" >Mortal Kombat</li>
        <li id="lista__item" class="lista__item item__5" >Sonic</li>
        <li id="lista__item" class="lista__item item__6" >Zelda</li>
        <li id="lista__item" class="lista__item item__7" >Castlevania</li>
        <li id="lista__item" class="lista__item item__8" >Metroid</li>
        <li id="lista__item" class="lista__item item__9" >Hollow Knight</li>
        <li id="lista__item" class="lista__item item__10" >Dead Cells</li>
        <li id="lista__item" class="lista__item item__11">Blasphemous</li>
        <li id="lista__item" class="lista__item item__12" >Metal Gear</li>
        <li id="lista__item" class="lista__item item__13" >Space Invaders</li>
        <li id="lista__item" class="lista__item item__14" >Tetris</li>
        <li id="lista__item" class="lista__item item__15" >DOOM</li>
        <li id="lista__item" class="lista__item item__16" >Pac-Man</li>
        <li id="lista__item" class="lista__item item__17" >Angry Birds</li>
        <li id="lista__item" class="lista__item item__18" >Snake Nokia</li>
        <li id="lista__item" class="lista__item item__19" >Dino Google</li>
        <li id="lista__item" class="lista__item item__20" >Formula One</li>
    </ul>

    <script src="./JS/script.js"></script>

</body>
</html>

CSS

@import url('./reset.css');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body{
    background: url(../IMG/GIF.gif) center no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    font-family: 'Press Start 2P', cursive;
    color: #F25A70;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.titulo{
    margin: 10px 0 20px 0;
    font-size: 30px;
    text-shadow: 5px 5px #000000;
}


.pesquisa{
    background-color: transparent;
    width: 50%;
    height: 30px;
    margin-bottom: 10px;
    padding-left: 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: 20px;
    outline: none;
    color: #F25A70;
    border: #F25A70 4px solid;
    box-shadow: 5px 5px #000000;
    /* text-transform: capitalize; */
}

.lista__item{
    margin: 10px 0 10px 0;
    font-size: 20px;
    text-shadow: 5px 5px #000000;
}

.ativar{
    opacity: 1;
}

.desativado{
    opacity: 0;
}

Imagem ![É um GIF de uma Pixel Art]( Insira aqui a descrição dessa imagem para ajudar na acessibilidade ) JavaScrip

const barraDePesquisa = document.querySelector("#pesquisa")//<input/>
const lista = document.querySelector("#lista");//<ul></ul>
const itens = document.querySelectorAll("#lista__item");//<li><li/>

barraDePesquisa.addEventListener("input", ()=>{
    barraDePesquisa.toLowerCase()
    itens.forEach((item)=>{
         if(barraDePesquisa.value == item.textContent){
            item.style.display = "block"
         } else {
             item.style.display = "none"
        }

         if(barraDePesquisa.value == ""){
            item.style.display = "block"
         }
    })
})

Oi, Pedro, tudo bem?

Desculpe pela demora em te responder!

Para deixar o body fixo, você pode adicionar a propriedade position: fixed no seu CSS. Ficaria assim:

body{
    background: url(../IMG/GIF.gif) center no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    font-family: 'Press Start 2P', cursive;
    color: #F25A70;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
}

Já para adicionar a função toLowerCase() na sua barra de pesquisa, você precisa atribuir o valor digitado pelo usuário à variável barraDePesquisa e, em seguida, utilizar a função toLowerCase() nessa variável.

Por fim, para fazer com que itens que tenham os mesmos caracteres apareçam na lista, você pode utilizar a função includes() do JavaScript.

O código completo em JavaScript ficaria assim:

const barraDePesquisa = document.querySelector("#pesquisa")//<input/>
const lista = document.querySelector("#lista");//<ul></ul>
const itens = document.querySelectorAll("#lista__item");//<li><li/>

barraDePesquisa.addEventListener("input", ()=>{
    let valorDigitado = barraDePesquisa.value.toLowerCase();
    itens.forEach((item)=>{
         if(item.textContent.toLowerCase().includes(valorDigitado)){
            item.style.display = "block"
         } else {
             item.style.display = "none"
        }

         if(valorDigitado == ""){
            item.style.display = "block"
         }
    })
})

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!