.header{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-top: 2rem;
      padding-bottom: 2rem;
      position: relative;
      z-index:999;
}
.header__menu{
      display: none;
}
.header__bars{
      color:var(--clr-slate400);
      height: var(--size-2xl);
      width: var(--size-2xl);
      display: block;
}

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

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

/* me */
@media (min-width:768px) {
      .header__menu{
            display: flex;
            align-items: center;
            list-style: none;
            gap:2em;
      }
      .header__link{
            font-size: var(--size-xs);
            text-decoration: none;
            color:var(--clr-slate400);
            font-weight: 600;
            initial-letter: -0.5em;
            transition: color 0.3s;
      }
      .header__link:hover{
            color: var(--clr-rose);
      }
      .header__line{
            border: 1px solid var(--clr-slate400);
            padding-top: 1.5rem;
      }
      .header__sun{
            display: 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__link{
            font-size: var(--size-sm);
      }
      .header__sun{
            width: var(--size-xl);
            height: var(--size-xl);
      }
      .header__resume{
            font-size: var(--size-xs);
      }
}

/* xL */
@media (min-width:1280px) {}

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