/* PORTRAIT */

@media screen and (orientation: portrait) {
  /* ------------------------------------------------------------------------- */

  aside,
  main {
    width: 100%;
    left: 0;
  }

  aside {
    clip-path: circle(0 at top right);
    transition: clip-path 0.6s ease-in-out;
  }

  aside.in {
    clip-path: circle(150vh at top right);
  }

  main {
    overflow-x: hidden;
    overflow-y: visible;
    transition: opacity 0.6s;
    transition-delay: 0.4s;
  }

  main.off {
    opacity: 0;
    transition-delay: 0s;
  }

  main::-webkit-scrollbar {
    width: 0;
    opacity: 0;
  }

  main > section {
    position: relative;
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }

  /* ------------------------------------------------------------------------- */

  aside nav:nth-of-type(1) li {
    font-size: var(--fontsize-b);
    text-align: center;
  }

  aside nav:nth-of-type(2) {
    --size: calc(var(--ratio) * 6);
  }

  /* ------------------------------------------------------------------------- */

  .toggleMenu {
    cursor: pointer;
    position: absolute;
    height: 5vh;
    width: 5vh;
    top: 2vh;
    right: 2vh; 
  }

   .toggleMenu path {
    stroke: var(--royalBlue); 
  }

  /* ------------------------------------------------------------------------- */

  .card > div {
    height: 10vw;
    width: 16vw;
  }

  /* ------------------------------------------------------------------------- */
}

/* LANDSCAPE */

@media screen and (orientation: landscape) {
  /* ------------------------------------------------------------------------- */

  aside {
    width: 25%;
  }

  /* ------------------------------------------------------------------------- */

  main {
    width: 75%;
    left: 25%;
  }

  main > section {
    position: absolute;
    width: 100%; 
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);

    opacity: 0;
    transition: opacity 0.8s;
  }

  main > section.out {
    opacity: 0;
  }

  main > section.in {
    opacity: 1;
  }

  main > section.off {
    display: none;
  }

  .title {
    transition: transform 0.8s ease-in-out, opacity 0.8s;
    opacity: 0;
    transform: translateX(45vw) rotateY(-120deg) scale(2);
  }

  .title.in {
    opacity: 1;
    transform: translateX(0) rotateY(0) scale(1);
  }

  .title.out {
    opacity: 0;
    transform: translateX(-30vw) rotateY(120deg) scale(0.25);
  }

  .content {
    opacity: 0;
    transform: translateY(5vh);
    transition: opacity 0.8s, transform 0.8s ease-in-out;
    transition-delay: 0s;
  }

  .content.in {
    opacity: 1;
    transform: translateY(0);
  }

  .content.in[data-delay="0"] {
    transition-delay: 0.1s;
  }
  .content.in[data-delay="1"] {
    transition-delay: 0.2s;
  }
  .content.in[data-delay="2"] {
    transition-delay: 0.3s;
  }
  .content.in[data-delay="3"] {
    transition-delay: 0.4s;
  }
  .content.in[data-delay="4"] {
    transition-delay: 0.5s;
  }
  .content.in[data-delay="5"] {
    transition-delay: 0.6s;
  }

  /* ------------------------------------------------------------------------- */

  aside nav:nth-of-type(1) li {
    font-size: var(--fontsize-l);
    --segment: 3vmin;
  }

  aside nav:nth-of-type(1) li:hover {
    --segment: 6vmin;
  }

  aside nav:nth-of-type(1) p {
    position: relative;
    padding-left: 8vmin;
  }

  aside nav:nth-of-type(1) p::before {
    position: absolute;
    content: "";
    width: var(--segment);
    top: calc(50% - 0.15vh);
    left: 0;
    border-top: 0.3vh solid var(--hue);
    transition: border-color 0.4s, width 0.4s ease-in-out;
  }

  aside nav:nth-of-type(2) {
    --size: calc(var(--ratio) * 3.2);
  }

  /* ------------------------------------------------------------------------- */

  .toggleMenu {
    display: none;
  }

  /* ------------------------------------------------------------------------- */

  .card > div {
    height: 10vh;
    width: 16vh;
  }

  /* ------------------------------------------------------------------------- */
}