Exercício da aula 4 - Estilizando o projeto com CSS | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Gostaria de mostrar como ficou meu projeto até o momento. Adicionei mais elementos no CSS, como exercício.

HTML:

<body>
    <header>
        <nav>
            <span class="link-container">
                <strong><a href="index.html">Página principal</a> <!--NOTA 1: Seção ainda não feita-->
                <a href="#projects">Projetos</a> <!--NOTA 2: Seção ainda não feita-->
                <a href="#contact">Contato</a></strong>
            </span>
        </nav>
    </header>
    <main>
        <h1 class="titulo1-nome">
            VITOR BERGHAUSER
        </h1>
        <p class="titulo1-nome">
            Desenvolvedor front-end e tradutor inglês-português
        </p>
        <h2 class="titulo2-promova">
            <strong>Promova seu negócio digital com um projeto front-end de qualidade</strong>
        </h2>
        <p class="texto-corrido">
            Como vai? O meu nome é Vitor, sou tradutor e desenvolvedor front-end com especialidade em React, HTML, CSS e JavaScript. Estou aqui para ajudar pequenos negócios e designers a criar uma presença online. Se você está procurando um projeto front-end de qualidade, está no lugar certo!
        </p>
        <img src="/images/web-developer-vitor.jpg" width="150" height="200" alt="Retrato de Vitor, com camisa clara e fundo branco.">
    </main>
    <footer id="contact">
        <p>
            Contatos:
            <span class="link-container">
                <strong>
                    <a href="mailto:berghauservitor@gmail.com">E-mail</a>
                    <a href="https://www.linkedin.com/in/berghauservitor230496320/">LinkedIn</a>
                    <a href="https://github.com/Capelanich">GitHub</a>
                    <a href="https://www.proz.com/profile/4033577">ProZ</a>
                    <a href="#">Sovereinia</a>
                </strong>
            </span>
        </p>
    </footer>
</body>
</html>

CSS:

html {
    background-color: rgb(255, 255, 255);
}
body a:link,
body a:visited,
body a:active {
    color: rgb(255, 255, 249);
    text-decoration: none;
}
body {
    box-sizing: border-box;
    width: 100vw;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
    padding-left: 20px;
    padding-right: 20px;
}
body a:hover {
    color: black;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}
.link-container {
    display: inline-block;
    border: 2px solid dimgrey;
    padding: 10px;
    background-color: dimgrey;
}
header {
    font-family: 'DejaVu Sans Mono', monospace;
    color: rgb(255, 255, 249);
    padding: 10px;
    text-align: right;
}
main {
    font-family: 'Lucida Console', monospace;
    color: black;
    padding: 0px;
}
main h1.titulo1-nome {
    font-size: 2em;
    font-weight: bold;
    background: linear-gradient(to right,rgb(199, 97, 3),rgb(191, 27, 197),black);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 0px;
}
main h2.titulo2-promova {
    font-size: 1.3em;
    margin-top: 50px;
}
main p.texto-corrido {
    text-indent: 2em;
}
p.titulo1-nome {
    font-size: 1em;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
}
footer {
    margin-top: 100px;
    font-family: 'Lucida Console', monospace;
    color: black;
    padding: 10px;
    text-align: left;
}