<nav class="container-fluid border-bottom border-2 border-light w-75 pb-4">
    <div class="row border-bottom border-2 border-light pb-4">
        <div class="offset-3 col-6">
            <div class="profile-picture">
                <img src="{{ site.default_url }}assets/img/profile.jpg" class="mx-auto d-block mt-5 rounded-circle" alt="profile picture">
            </div>
        </div>
    </div>
    <div class="nav-container-up row mt-3">
        <nav class="offset-3 col-6">
            <ul class="list-group list-group-horizontal justify-content-center ms-0 ps-0">
                <li class="list-group-item border-0">
                    <a href="{{ site.default_url }}"><i class="fas fa-home text-black-50"></i></a>
                </li>
                <li class="list-group-item border-0">
                    <a href="{{ site.default_url }}/aboutme"><i class="fas fa-address-card text-black-50"></i></a>
                </li>
                <li class="list-group-item border-0">
                    <a href="{{ site.blog }}"><i class="fas fa-comment-alt text-black-50"></i></a>
                </li>
                <li class="list-group-item border-0">
                    <a href="{{ site.default_url }}/contact"><i class="fas fa-envelope-open text-black-50"></i></a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="nav-container-down row mt-2">
        <nav class="offset-3 col-6">
            <ul class="list-group list-group-horizontal justify-content-center">
                <li class="list-group-item border-0">
                    <a href="https://github.com/{{ site.github_username }}"><i class="fab fa-github text-black-50"></i></a>
                </li>
                <li class="list-group-item border-0">
                    <a href="https://www.linkedin.com/in/{{ site.linkedin_username }}"><i class="fab fa-linkedin-in text-black-50"></i></a>
                </li>
                <li class="list-group-item border-0">
                    <a href="https://twitter.com/{{ site.twitter_username }}"><i class="fab fa-twitter text-black-50"></i></a>
                </li>
                <li class="list-group-item border-0 d-none"> 
                    <a rel="me" href="https://mastodon.social/@{{ site.mastodon_username }}"><i class="fab fa-mastodon text-black-50"></i></a>
                </li>
            </ul>
        </nav>
    </div>
</nav>