[Bug] Meu footer está aparecendo colado nos botões... | HTML e CSS: cabeçalho, footer e variáveis CSS

Aqui está o código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portifolio</title>
</head>
<body>
    <header></header>

    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="destaque">com um Front-end de qualidade!</strong></h1>
            <p class="conteudo__texto">Olá! Sou Otávio Pinheiro, desenvolvedor Full-stack com especialidade em NodeJs, HTML e CSS. Ajudo pequenos negócios e devs a colocarem em prática boas ideias. Vamos conversar?</p>

            <div class="conteudo__links">
                <h2 class="links__subtitulo">Acesse minhas redes:</h2>
                <a target="_blank" class="links__link" href="https://github.com/"><img src="assets/github.png" alt="Github Logo"> Github</a>
                <a target="_blank" class="links__link" href="https://github.com/"><img src="assets/linkedin.png" alt="Github Logo"> Linkedin</a>
                <a target="_blank" class="links__link" href="https://github.com/"><img src="assets/twitch.png" alt="Github Logo"> Twitch</a>
            </div>
        </section>

        <img src="assets/Imagem.png" alt="">
    </main>
    <footer class="rodape">Desenvolvido por Joana Santos</footer>

</body>


</html>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@600&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
    margin: 10% 12%;    
    background-color: #000000;
    color: #F6F6F6;
}

.destaque {
    color: #00FFFF;
}

.apresentacao {
    display: flex;
    align-items: center;
}

.apresentacao__conteudo {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.conteudo__titulo {
    font-family: 'Krona One', sans-serif;
    font-size: 36px;
}

.conteudo__texto {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
}

.conteudo__links {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 32px;
}

.links__subtitulo {
    font-family: 'Krona One', sans-serif;
    font-size: 24px;
    font-weight: 400;
}

.links__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    padding: 18px 0;
    text-align: center;
    text-decoration: none;
    color: #F6F6F6;
    width: 378px;
    height: 40px;
    border: 2px solid #00FFFF;
    border-radius: 8px;
    
}

.links__link:hover {
    transform: scale(1.05);
    background-color: #272727;
}

.rodape{
    padding: 24px;
    color: #000000;
    background-color: #00FFFF;
}

Está assim:

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

Zoom do navegador em 100%, normal.