*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:#F5F5F7;

    color:#111;

    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

}



/* ---------- NAVIGATION ---------- */


nav{

    width:100%;

    height:44px;

    background:rgba(255,255,255,0.28);

    backdrop-filter:blur(30px) saturate(180%);

    -webkit-backdrop-filter:blur(30px) saturate(180%);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 20px;

    position:fixed;

    top:0;

    left:0;

    z-index:1000;

    border-bottom:1px solid rgba(255,255,255,0.25);

    box-shadow:0 1px 20px rgba(0,0,0,0.08);

    opacity:0;

    animation:fadeIn 0.8s ease forwards;

}



nav a{

    text-decoration:none;

    color:#111;

    font-size:15px;

    margin:0 18px;

    transition:opacity .2s ease;

    white-space:nowrap;

}



nav a:hover{

    opacity:.55;

}



/* ---------- FADE ANIMATION ---------- */


.fade-in{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity 1s ease,

        transform 1s ease;

}


.fade-in.visible{

    opacity:1;

    transform:translateY(0);

}



@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ---------- MOBILE ---------- */


@media(max-width:600px){


    nav{

        height:44px;

        justify-content:flex-start;

        padding:0 15px;

        overflow-x:auto;

        white-space:nowrap;

        -webkit-overflow-scrolling:touch;

    }


    nav a{

        font-size:13px;

        margin:0 12px;

    }


}