<nav class="navbar navbar-dark navbar-custom fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">
            <img src="/static/sbb.png" alt="SBB" width="30px">
            <span class="font-monospace fw-bold">Click & 
                <span class="ml4">
                <span class="letters letters-1">Hike</span>
                <span class="letters letters-2">Bike</span>
                <span class="letters letters-3">Culture</span>
                <span class="letters letters-4">Jodel</span>
                </span>
            </span>
              
              <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
              <script>
                var ml4 = {};
                ml4.opacityIn = [0,1];
                ml4.scaleIn = [0.2, 1];
                ml4.scaleOut = 2.5;
                ml4.durationIn = 900;
                ml4.durationOut = 800;
                ml4.delay = 600;
                
                anime.timeline({loop: true})
                    .add({
                    targets: '.ml4 .letters-1',
                    opacity: ml4.opacityIn,
                    scale: ml4.scaleIn,
                    duration: ml4.durationIn
                    }).add({
                    targets: '.ml4 .letters-1',
                    opacity: 0,
                    scale: ml4.scaleOut,
                    duration: ml4.durationOut,
                    easing: "easeInExpo",
                    delay: ml4.delay
                    }).add({
                    targets: '.ml4 .letters-2',
                    opacity: ml4.opacityIn,
                    scale: ml4.scaleIn,
                    duration: ml4.durationIn
                    }).add({
                    targets: '.ml4 .letters-2',
                    opacity: 0,
                    scale: ml4.scaleOut,
                    duration: ml4.durationOut,
                    easing: "easeInExpo",
                    delay: ml4.delay
                    }).add({
                    targets: '.ml4 .letters-3',
                    opacity: ml4.opacityIn,
                    scale: ml4.scaleIn,
                    duration: ml4.durationIn
                    }).add({
                    targets: '.ml4 .letters-3',
                    opacity: 0,
                    scale: ml4.scaleOut,
                    duration: ml4.durationOut,
                    easing: "easeInExpo",
                    delay: ml4.delay
                    }).add({
                    targets: '.ml4 .letters-4',
                    opacity: ml4.opacityIn,
                    scale: ml4.scaleIn,
                    duration: ml4.durationIn
                    }).add({
                    targets: '.ml4 .letters-4',
                    opacity: 0,
                    scale: ml4.scaleOut,
                    duration: ml4.durationOut,
                    easing: "easeInExpo",
                    delay: ml4.delay
                    }).add({
                    targets: '.ml4',
                    opacity: 0,
                    duration: 0,
                    delay: 0
                    });
            </script>
        </a>
        

        <form class="d-flex">
            <a href="/profile" style="color: inherit; text-decoration: none;">
                <i class="fas fa-user"></i>
            </a>
        </form>
        
    </div>
</nav>