nav {
  /* sizing */
  width: 80%;
  height: 100vh;

  border-bottom: 4px solid var(--b);

  translate: -100vw 0;

  position: fixed;
  z-index: 99999;
  top: 0;

  /* color */
  background-color: rgb(228, 228, 228);
}

#nav {
  transition: transform 0.3s ease-in-out;
}

.mobileNavBtn {
  /* positioning */
  position: fixed;
  z-index: 9999999;
  right: 0;
  top: 0;

  /* sizing */
  min-width: 42px;
  min-height: 42px;
  margin-right: 10px;
  margin-top: 5px;

  /* color */
  background-color: var(--y);
  

  /* border */
  border: none;
  border-radius: 4px;
}

/* ? media queries to edit css responsiveness */

/* small mobile */
/* @media (min-width: 320px) {
 
} */

/* m mobile */
/* @media (min-width: 375px) {
 
} */

/* l mobile */
/* @media (min-width: 425px) {
 
} */

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

} */

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

} */

/* m */
@media (min-width: 768px) {
 nav {
  width: 100%;
  height: fit-content;

  translate: 0 0;
 }

 .mobileNavBtn {
  display: none;
 }
}

/* lg */
/* @media (min-width: 1024px) {
 
}
 */
/* xl */
/* @media (min-width: 1280px) {
 
} */

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

} */