.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.home-icon, .user-menu-container {
    flex: 0 0 auto;
}

.home-icon-image {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.avatar-display {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
}

.daily-logo-header {
    max-width: 50%;
}


@media (max-width: 768px) {
    .header-wrapper {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "home logo user";
        align-items: center;
        padding: 10px;
        gap: 10px;
    }

    .home-icon {
        grid-area: home;
        justify-self: start;
    }

    .user-menu-container {
        grid-area: user;
        justify-self: end;
    }

    .daily-logo-header {
        grid-area: logo;
        max-height: 80px;
        max-width: 70%;
        margin: 0 auto;
    }

    .home-icon-image,  .avatar-display {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .header-wrapper {
        padding: 5px;
    }

    .home-icon-image, .avatar-display {
        width: 32px;
        height: 32px;
    }

    .daily-logo-header {
        max-height: 70px;

    }

    .home-icon, .user-menu-container {
        flex: 0 0 auto;
    }


}

.login-icon-image {
    width: 36px;
    height: 36px;
    object-fit: cover;
}

@media (max-width: 1200px) {
    .login-icon-image {
        max-width: 80px;
    }
}

@media (max-width: 768px) {
    .login-icon-image {
        max-width: 40px;
    }
}


.box-hr {
    display: flex;
    width: 100%;
    height: 5px;
    margin: 0 0 30px 0;
}

.box-hr-sm {
    height: 5px;
    margin: 0;
    flex-grow: 1;
    transition: all .8s ease-in-out;
    cursor: pointer;
}

.box-hr-sm:hover {
       flex-grow: 12;
   }

.box-hr-middle-color {
    background-color: var(--primary-color);
}

.box-hr-side-color {
    background-color: var(--accent-color);
}

.hr-header {
    width: 100%;
    height: 4px;
    margin: 10px 0 20px 0;
    background-color: black
}