header{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
    color: light-dark(var(--light-main), var(--dark-text));
    border-bottom: 1px solid light-dark(var(--light-main), var(--dark-main));
    display: flex;
    justify-content: space-between;
    align-items: center;

    z-index: 1000;
    position: sticky;
    top: 0;

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

    a {
        color: light-dark(var(--light-text), var(--dark-text));
        text-decoration: none;
    }

    img {
        max-height: 10dvh;
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 40%;
        padding: 0 2rem;
        font-size: 1.2rem;

        :hover {
            cursor: pointer;
            color: light-dark(var(--light-secondary), var(--dark-secondary));
        }

        img {
            max-height: 5vh;
        }

        .coloredicon, .grayicon{
            border: 1px solid light-dark(var(--light-text), var(--dark-text));
            padding: 2px;
            aspect-ratio: 1/1;
        }

        .coloredicon{
            background-color : blue;
        }

    }
}