@media screen and (max-width: 1500px) {
  html {
    font-size: 16px; } }

@media screen and (max-width: 1300px) {
  body {
    line-height: 1.4rem; }
  body[data-mode="project"] main #project .singleProject .about .left {
    width: calc(100vw / 5 * 3); }
    body[data-mode="project"] main #project .singleProject .about .left .details > * {
      width: calc(100vw / 5 * 2); } }

@media screen and (max-width: 1200px) {
  body main nav .categories {
    width: calc(100vw / 4); }
    body main nav .categories ul {
      width: 100%; }
      body main nav .categories ul li {
        display: block; }
  body main #projects #projectList {
    padding-left: calc(100vw / 4); }
  body[data-mode="projects"] main .preview {
    justify-content: center; }
    body[data-mode="projects"] main .preview .project figure {
      margin: 0 3rem 5.6rem 3rem; }
      body[data-mode="projects"] main .preview .project figure img {
        max-width: 80vw;
        max-height: 95vh; }
  body[data-mode="project"] main #project > div:not(:first-of-type) .about > header .titles h3 {
    display: none; }
  body[data-mode="project"] main #project .singleProject .about > header {
    width: calc(100% / 4);
    display: block; }
    body[data-mode="project"] main #project .singleProject .about > header > * {
      width: 100%; }
  body[data-mode="project"] main #project .singleProject .about .left {
    width: calc(100% / 4 * 3); }
    body[data-mode="project"] main #project .singleProject .about .left .timeframe * {
      width: calc(100vw / 4); }
    body[data-mode="project"] main #project .singleProject .about .left .timeframe,
    body[data-mode="project"] main #project .singleProject .about .left .text,
    body[data-mode="project"] main #project .singleProject .about .left .details,
    body[data-mode="project"] main #project .singleProject .about .left .credits {
      padding-left: 0;
      margin-left: 0; }
    body[data-mode="project"] main #project .singleProject .about .left .text {
      width: calc(100% / 8 * 7); } }

@media screen and (max-width: 850px) {
  body main nav .categories {
    width: 50vw; }
  body main #projects #projectList {
    width: 100vw;
    padding-left: 50vw; }
    body main #projects #projectList h2 {
      margin: 0;
      color: #000; }
    body main #projects #projectList > ul.one,
    body main #projects #projectList > ul.two {
      columns: 1;
      padding-left: unset; }
  body[data-mode="projects"] main .preview {
    justify-content: center; }
    body[data-mode="projects"] main .preview .project figure img {
      max-height: 90vw;
      max-width: 80vw; } }

@media screen and (max-width: 700px) {
  body {
    padding: 1rem;
    color: #000; }
    body .close {
      right: 1rem; }
    body main {
      background: yellow; }
      body main #about {
        display: none; }
        body main #about #rightTitles {
          padding: 0.5rem 1rem;
          text-align: left;
          left: 1.4rem; }
      body main nav .categories {
        display: none; }
      body main nav #menuButton {
        display: block;
        right: calc((100vw - 8rem) / 2);
        width: 8rem;
        text-align: center; }
      body main nav #menuButton::before {
        content: "Popy Matigot"; }
      body main #projects #projectList {
        z-index: -1;
        opacity: 0;
        padding-left: 1.4rem;
        height: 100vh;
        overflow: scroll;
        padding-top: 6.4rem;
        left: 0; }
        body main #projects #projectList ul.one,
        body main #projects #projectList ul.two {
          padding: 0; }
  body.upperMenu.loading main .preview {
    display: none; }
  body.upperMenu {
    overflow: hidden; }
    body.upperMenu main nav #menuButton {
      z-index: 9999999;
      top: 0.5rem;
      right: 0.9rem;
      height: 2rem;
      /* this can be anything */
      width: 2rem;
      /* ...but maintain 1:1 aspect ratio */
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: whitesmoke;
      padding: 0.25rem;
      border-radius: 2rem; }
    body.upperMenu main nav #menuButton::before,
    body.upperMenu main nav #menuButton::after {
      position: absolute;
      content: '';
      width: calc(100% - 0.5rem);
      margin-top: 0.6rem;
      height: 2px;
      /* cross thickness */
      background-color: black; }
    body.upperMenu main nav #menuButton::before {
      transform: rotate(45deg); }
    body.upperMenu main nav #menuButton::after {
      transform: rotate(-45deg); }
    body.upperMenu main nav #menuButton:hover {
      cursor: pointer; }
    body.upperMenu #about {
      display: block; }
      body.upperMenu #about #rightTitles {
        padding: 0;
        width: 100%; }
        body.upperMenu #about #rightTitles h1 {
          display: none; }
        body.upperMenu #about #rightTitles a,
        body.upperMenu #about #rightTitles h3 {
          color: #000; }
    body.upperMenu #projects #projectList {
      z-index: 99999;
      opacity: 1;
      min-height: 104vh; }
  body.about main nav #menuButton {
    display: none; }
  body.about main #about {
    display: block; }
    body.about main #about #rightTitles {
      background: whitesmoke;
      padding: 0 20% 0 0; }
      body.about main #about #rightTitles h3 {
        right: 2.25rem;
        top: 0.5rem; }
      body.about main #about #rightTitles h3:hover {
        color: #000; }
      body.about main #about #rightTitles h3:hover::before,
      body.about main #about #rightTitles h3:hover::after {
        background-color: #000; }
    body.about main #about #content {
      width: 100%;
      background: whitesmoke; }
      body.about main #about #content > div:not(.close) {
        width: 100%; }
      body.about main #about #content #credits {
        position: relative;
        text-align: right;
        width: 100%;
        margin-top: 1rem; }
        body.about main #about #content #credits img {
          width: 40%; }
  body[data-mode="projects"] main .preview {
    top: 0;
    padding: 1.5rem 1rem; }
    body[data-mode="projects"] main .preview .project.center figure {
      text-align: left;
      margin: 0 0 2rem 0; }
    body[data-mode="projects"] main .preview .project figure {
      margin: 0 0 2rem 0; }
      body[data-mode="projects"] main .preview .project figure img {
        max-width: 100%;
        max-height: unset; }
      body[data-mode="projects"] main .preview .project figure figcaption {
        display: block;
        color: #000;
        margin: 0.25rem 0 0 0; }
        body[data-mode="projects"] main .preview .project figure figcaption .title {
          margin: 0 1.4rem 0 0; }
        body[data-mode="projects"] main .preview .project figure figcaption .categories {
          color: grey; }
  body[data-mode="project"] {
    padding: 1.25rem 0 0 0; }
    body[data-mode="project"] .close {
      z-index: 9999;
      position: fixed; }
    body[data-mode="project"] main #projects #projectList h2 {
      color: #000; }
    body[data-mode="project"] main #projects #close {
      top: unset;
      bottom: 0.25rem;
      margin-top: 1rem; }
    body[data-mode="project"] main #project {
      padding-bottom: 2.8rem;
      background: whitesmoke; }
      body[data-mode="project"] main #project > div:not(:first-of-type) .about > header .titles h3 {
        display: block; }
      body[data-mode="project"] main #project .singleProject {
        padding-top: 0;
        padding-bottom: 2.8rem; }
        body[data-mode="project"] main #project .singleProject .about {
          display: block; }
          body[data-mode="project"] main #project .singleProject .about header {
            padding: 0 0 0 1rem;
            width: calc(100% / 3 * 2); }
            body[data-mode="project"] main #project .singleProject .about header .titles * {
              padding-right: 0; }
          body[data-mode="project"] main #project .singleProject .about .left {
            width: 100%;
            padding: 0 1rem;
            margin-bottom: 2.8rem; }
            body[data-mode="project"] main #project .singleProject .about .left .timeframe {
              width: 100%; }
              body[data-mode="project"] main #project .singleProject .about .left .timeframe .place {
                width: 100%; }
              body[data-mode="project"] main #project .singleProject .about .left .timeframe .date {
                width: 100%; }
            body[data-mode="project"] main #project .singleProject .about .left .details > * {
              width: 100%;
              padding: 0; }
            body[data-mode="project"] main #project .singleProject .about .left .text {
              width: 100%;
              padding: 0; }
              body[data-mode="project"] main #project .singleProject .about .left .text p:not(:first-of-type) {
                text-indent: 2.8rem; }
        body[data-mode="project"] main #project .singleProject .images {
          margin-top: 0; }
          body[data-mode="project"] main #project .singleProject .images img {
            max-width: calc(100% - 2rem);
            max-height: unset;
            margin-bottom: 1.4rem; } }