/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:min(var(--container-width),92%);

    margin-inline:auto;
}

/* ==========================================================
   CHAPTER
========================================================== */

.chapter{

    min-height:200vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:var(--space-8) 0;
}

/* ==========================================================
   HERO
========================================================== */

.hero{

    text-align:center;
}

.hero-content {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:var(--space-5);

    min-height:200vh;

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:var(--navbar-height);

    backdrop-filter:blur(18px);

    background:rgba(250,247,243,.75);

    border-bottom:1px solid rgba(0,0,0,.05);

    z-index:1000;
}

.navbar .container{

    height:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:700;

    font-size:1.2rem;
}