/*=============== VARIABLES CSS ===============*/
:root {
    /*========== Colors ==========*/
    --white-color: hsl(0, 0%, 100%);
    --text-color: hsl(225, 8%, 65%);
    /* ========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}



/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/*html {
    scroll-behavior: smooth;
}*/

.ul-nav-mobile {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-evenly; /* Gleichmäßiger Abstand zwischen Elementen */
    align-items: center; /* Zentrierung vertikal */
}

.a-nav-mobile {
    text-decoration: none;
}


/*=============== NAVBAR ===============*/
.nav-mobile {
    position: fixed;
    bottom: 3rem;
    left: 0;
    right: 0;
    background-color: hsl(225, 12%, 12%); /* TODO: Default Dark Color */
    width: 88%;
    margin-inline: auto;
    box-shadow: 0 2px 16px hsla(228, 95%, 4%, .1);
    padding: 0.8rem 3rem;
    border-radius: 3rem;
    z-index: var(--z-fixed);
}

.nav__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__link {
    color: var(--text-color);
    font-size: 1.5rem;
    transition: color 0.4s;
    display: flex; /* Aktiviert Flexbox */
    flex-direction: column; /* Anordnung der Kinder-Elemente vertikal */
    align-items: center; /* Zentriert Icon und Text horizontal */
    justify-content: center; /* Zentriert Inhalte vertikal (falls nötig) */
    gap: 0.1rem; /* Abstand zwischen Icon und Text */
}

.nav__link__text {
    font-size: 0.6rem; /* Optional: kleinere Schriftgröße für den Text */
    font-weight: 200; /* Optional: Fettgedruckt für bessere Lesbarkeit */
}

.nav__link:hover {
    color: var(--white-color);
}


/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 450px) {
    .nav-mobile {
        width: 350px;
    }
}