/*-------------------- 1280px -------------------- */
@media (min-width: 1280px) {
  body {
    /* background-color: #9CBDFF; */
  }
  .menu {
    font-size: 1.1vw;
  }
  .leftColumn {
    font-size: 1.1vw;
  }
  .pagination a {
    font-size: 1.1vw;
  }
  .pageInfo {
    font-size: 1.1vw;
  }
}

/*-------------------- 900px -------------------- */
@media (max-width: 900px) {
  .menu {
    position: fixed;
    width: 100vw;
    height: 3vw;
    margin-left: 8vw;
    font-size: 2vw;
  }
  .siteLi {
    height: 3vw;
  }
  .main {
    margin-top: 3vw;
  }
  .leftColumn {
    font-size: 2vw;
  }
  .pagination a {
    font-size: 2vw;
  }
  .pageInfo {
    font-size: 2vw;
  }
  .projects {
    padding-top: 0vw;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0.5vw;
    grid-row-gap: 0.5vw;
  }
}

/*-------------------- Mobile -------------------- */
/*-------------------- Mobile -------------------- */
/*-------------------- 600px -------------------- */
/*-------------------- 600px -------------------- */
/* @media (max-width: 640px) */

@media (max-width: 600px) and (orientation: portrait) {
  /* body {
            background-color: rgb(62, 255, 146);
          } */
  .proj_mainContainer {
    overflow-y: scroll;
  }
  .menu {
    height: 7vw;
    margin-top: 11vw;
    margin-left: 0vw;
    font-size: 3.5vw;
  }
  .siteUl {
    grid-auto-columns: 1fr;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 0fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas: "allprojects graphic web branding editorial oops blank";
  }
  .siteLi {
    height: 7vw;
  }
  .pagination a {
    font-size: 3.5vw;
  }
  .pageInfo {
    font-size: 3.5vw;
  }
  .main {
    margin-top: 18vw;
    margin-left: 0vw;
    margin-right: 0vw;
  }
  .mainContainer {
    width: 100vw;
    padding-bottom: 40vw;
  }

  /* -------- nagizin about contact --------  */
  .leftColumn {
    font-size: 3.5vw;
    width: 100vw;
  }
  .header {
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1.5fr 1.5fr 1fr;
    grid-template-rows: 1fr;
    height: 11vw;
    grid-template-areas: "logo about contact footerBlank";
  }
  .logo:hover {
    transform: rotate(-7deg);
  }
  .about,
  .contact,
  .footerBlank {
    border-top: 0vh solid #bebebe;
    border-bottom: 0vh solid #bebebe;
    border-left: 3vh solid #bebebe;
  }
  .projects {
    margin: 0;
    padding-top: 0vw;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1vw;
    grid-row-gap: 1vw;
  }
  .footerBlank {
    background-color: #571010;
  }
  .about_mainContainer {
    padding: 1vw 4vw 5vw 4vw;
    position: fixed;
    width: 100vw;
    height: 100vh;
    padding-bottom: 5vh;
    background-color: #dfdbcc;
    display: block;
    overflow-y: scroll;
    padding-bottom: 60vw;
  }
}