[Sugestão] Super estilizando o CSS 1/2 | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Criei um portfólio e testei diversas cores e cheguei neste resultado, segue os códigos HTML e CSS:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <header>
        <nav>
            <button id="btnHabilidades">Habilidades</button>
            <button id="btnProjetos">Projetos</button>
            <button id="btnSobre">Sobre mim</button>
        </nav>

        <!-- Área para exibir o conteúdo dinâmico -->
        <div id="conteudoDinamico"></div>
    </header>

    <main>
        <h1>Eleve seu negócio digital a outro nível com um <span>Front-end</span> de qualidade!</h1>
        <p>Olá! Sou Paulo Camargo, estudante de programação e futuro Dev front-end, <strong>estou estudando Javascript, HTML e CSS na Alura</strong>. Portanto, posso ajudar a alavancar o seu negócio. Vamos conversar?</p>
        <a href="https://instagram.com/paulocamargo.psic">Instagram</a>
        <a href="https://github.com/machado10666">Github</a>
    </main>
    
    <img src="paulonet.jpg" alt="Foto Paulo futuro Desenvolvedor" class="profile-image">

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

    <!-- Rodapé com o endereço de e-mail -->
    <footer>
        <p>Entre em contato comigo por e-mail: <a href="mailto:fernandesmetal721@hotmail.com">fernandesmetal721@hotmail.com</a></p>
    </footer>
</body>
</html>

body {
    background-color: #000000;
    color: #F6F6F6;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

strong {
    color: #22D4FD;
}

h1 {
    font-weight: bold;
    font-size: 2.5em;
    margin-bottom: 20px;
}

span {
    color: #22D4FD;
    border: 1px solid #22D4FD;
    padding: 10px;
    border-radius: 5px;
}

a {
    color: #22D4FD;
    text-decoration: none;
    margin-right: 15px;
}

a:hover {
    text-decoration: underline;
}

.profile-image {
    width: 250px; /* Ajuste o tamanho da imagem conforme necessário */
    height: auto;
    border-radius: 50%; /* Para deixar a imagem redonda */
    border: 3px solid #22D4FD; /* Borda ao redor da imagem */
    box-shadow: 0 0 20px rgba(34, 212, 253, 0.5); /* Sombra ao redor da imagem */
    margin-top: 20px;
    display: block; /* Para centralizar a imagem */
    margin-left: auto;
    margin-right: auto;
}

/* Estilo para os botões */
header nav {
    text-align: center;
    margin-bottom: 20px;
}

header nav button {
    background-color: #22D4FD;
    color: #000000;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

header nav button:hover {
    background-color: #1ea8c7;
}

/* Estilo para a área de conteúdo dinâmico */
#conteudoDinamico {
    background-color: #111;
    padding: 20px;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
}

#conteudoDinamico ul {
    list-style: none;
    padding: 0;
}

#conteudoDinamico ul li {
    margin: 10px 0;
}

#conteudoDinamico a {
    color: #22D4FD;
    text-decoration: none;
}

#conteudoDinamico a:hover {
    text-decoration: underline;
}

/* Estilo para o rodapé */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #111;
    color: #F6F6F6;
    border-top: 1px solid #22D4FD;
}

footer a {
    color: #22D4FD;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.texto-grande {
    font-size: 1.2em;
    line-height: 2.1;
}