/* everything outside of media queries is for screens smaller than 475px */
.header {
    display: flex;
    /* Now header is the flex container and 'nav' is the flex item as a whole */
    /* remember flex properties : align(cross axis Y) and justify(main axis X) */
    justify-content: flex-end;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    /* container class alredy has left and right padding */
    position: relative;
    z-index: 999;
}

.header__menu {
    display: none;
}

.header__bars {
    color: var(--clr-light);
    width: var(--size-base);
    height: var(--size-base);
    display: block;
}

/* Now we see that header should be put inside a menu(drop down list) for devices with less than 768px width  */

/*  xs  */
/* @media (min-width : 475px) {} */

/*  sm  */
/* @media (min-width : 640px) {} */

/*  md  */
@media (min-width : 768px) {
    .header__menu {
        display: flex;
        align-items: center;
        list-style: none;
        /* border: 1px solid yellow; */
        /* by using border here , we cann see it has some default left padding (unordered list has) , therefor remove it */
        padding: 0;
        gap: 2em;
        transition: color 3s;
    }

    .header__links {
        font-size: var(--size-xs);
        text-decoration: none;
        font-weight: 600;
        color: var(--clr-slate600);
        letter-spacing: -0.05em;
    }

    .header__links:hover {
        color: var(--clr-rose);
    }

    .header__line {
        border: 1px solid var(--clr-slate800);
        padding-top: 1.5em;
    }

    .header__sun {
        display: block;
        /* we set default display of buttons to be inline block */
        color: var(--clr-slate400);
        width: var(--size-base);
        height: var(--size-base);
    }

    .header__resume {
        font-size: var(--size-xs);
    }

    .header__bars {
        display: none;
    }
}

/*  lg  */
@media (min-width : 1024px) {
    .header__links {
        font-size: var(--size-sm);
    }

    .header__line {
        border: 1px solid var(--clr-slate800);
        padding-top: 2em;
    }

    .header__sun {
        width: var(--size-xl);
        height: var(--size-xl);
    }

    .header__resume {
        font-size: var(--size-sm);
    }
}

/*  xl  */
@media (min-width : 1280px) {
    .header__links {
        font-size: var(--size-base);
    }

    .header__line {
        border: 1px solid var(--clr-slate800);
        padding-top: 2.5em;
    }

    .header__sun {
        width: var(--size-2xl);
        height: var(--size-2xl);
    }

    .header__resume {
        font-size: var(--size-base);
    }
}

/*  2xl  */
/* @media (min-width : 1536px) {} */