.container {
  max-width: var(--width-medium);
  margin: 0 auto;
  padding: 1rem;
}

h1::selection,
h2::selection {
  color: var(--solo-black);
  background: var(--primary-color);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.3rem 2.5rem;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: 0.3s;
}

.btn-primary {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  &:hover {
    background-color: var(--secondary-color);
    color: var(--solo-white);
  }
}

.btn-secondary {
  margin: 5px 0;
  background-color: var(--bg-secondary);
  color: var(--solo-white);
}

/* Dark mode toggle */
#switch {
  display: none;
}

.toggle-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.toggle-icons>img {
  transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  width: 30px;
}

.moon {
  transform: rotate(10deg);
}

#switch:checked+.toggle-icons .moon {
  transform: rotate(250deg);
}

#switch:checked+.toggle-icons .sun {
  transform: rotate(100deg);
}

/* Header Container */
.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .container {
    padding: 1rem;
  }


  .content-text {
    text-align: left;
    width: calc(100%* .97 - 2.5rem);
    min-width: 0;
    margin: 0 1.25rem;

    h2 {
      font-size: 5.5vw;
      line-height: 7vw;
      transition: 0.2s ease-in-out;
      font-family: "Raleway", sans-serif;
    }

    p {
      padding: 0.5rem;
      margin: 0 auto;
      max-width: 43.75rem;
    }
  }
}

/* Project cards */
.card {
  padding: 1rem;
  background: var(--card-background); 
  color: var(--solo-white); 
  transition: 0.4s ease-in-out;
  cursor: pointer;
  margin: 1.3rem;

  &:hover {
    box-shadow: inset 0 -50px 1000px 80px rgba(0, 0, 0, 0.8);
  }

  &:hover .project-info {
    opacity: 1 !important;
  }

  a {
    color: var(--text-color-two);
    transition: 0.25s ease-in-out;
    font-size: 1.1rem;
    margin-right: 0.3rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}



/* Project Images */

/* project 1 */
.card {
  &:nth-child(4) {
    background: url(../assets/project/home-project-pininfarina.jpg) center center/cover;
    padding-top: 59.314%
  }

  &:nth-child(2) {
    background: url(../assets/project/home-project-onadasail.jpg) center center/cover;
    padding-top: 37.964%;
  }

  &:nth-child(3) {
    background: url(../assets/project/home-project-psicoline.png) center center/cover;
    padding-top: 37.964%;
  }

  &:nth-child(1) {
    background: url(../assets/project/home-project-nok.jpg) center center/cover;
    padding-top: 59.314%
  }
}


/* Project Pages general */

#proj-page {
  padding-top: 0;
  margin-top: -3rem;
  .proj-content {
    .heroimage {
      position: relative;
        margin-bottom: 5.5rem;
        width: 100%;
    
      .ph-image {
        position: relative;
        width: 100%;
        padding-top: 52.825%; /* = 770h/1480w*/
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    
    .descript {
      display: flex;
      justify-content: center;
      margin-bottom: 5.5rem;
      .text {
        flex: 1 1 55%;
        padding: 3%;
        ul {
          list-style: inside disc;
          li {
            margin: 0 20px;
            padding-left: 1rem;
            text-indent: -1.4rem;
          }
          ::marker {
            color: var(--primary-color);
          }
        }
      }
      .title {
        flex: 1 1 40%;
        padding: 0 3% 6% 3%;
        h2 {
          font-size: 3.5rem;
        }
        .subtitle {
          font-size: 1.4rem;
          font-weight: 300;
        }
      }
    }

    .bold {
      font-weight: 600;
     }

    .pimage-desc.text {
      ul {
        list-style: inside disc;
        li {
          margin: 10px 20px;
          padding-left: 1rem;
          text-indent: -1.5rem;
        }
        ::marker {
          color: var(--primary-color);
        }
      }
    }

    
    .pimage {
      background: var(--bg-secondary);
      padding: 4%;
      margin-bottom: 3.5rem;

      .pimage-box {
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        max-width: 80rem;
      }
      .video {
        max-width: 100%;
        margin: 0 auto;
        border-radius: 40px;
      }
    }
    .pimage-desc {
      margin-bottom: 3.5rem;
      padding: 0 4%;
    }
  }
  /* Pininfarina Content */
  .proj-content.pininfarina {
    .ph-image { 
      background-image: url(../assets/project/pininfarina/project-pininfarina0.jpg);
    }     
 
    .pimage-box.one { 
        background-image: url(../assets/project/pininfarina/project-pininfarina1.png);
        padding-top: 60.718%;
    }
    .pimage-box.two { 
      background-image: url(../assets/project/pininfarina/project-pininfarina2.jpg);
      padding-top: 60.718%;
    }
    .pimage-box.tre { 
      background-image: url(../assets/project/pininfarina/project-pininfarina3.jpg);
      padding-top: 87.508%;
    }
    .pimage-box.for { 
      background-image: url(../assets/project/pininfarina/project-pininfarina4.jpg);
      padding-top: 60.718%;
    }
  }

  /* Psicoline Content */
  .proj-content.psicoline {
    .ph-image { 
      background-image: url(../assets/project/psicoline/project02-psicoline0.jpg);
    }     
 
    .pimage-box.one { 
        background-image: url(../assets/project/psicoline/project02-psicoline1.png);
        padding-top: 56.804%;
    }
    .pimage-box.two { 
      background-image: url(../assets/project/psicoline/project02-psicoline2.png);
      padding-top: 52.198%;
    }
    p.desc-link {
      margin: 1rem 2.2rem;
    }
    .isDisabled {
      color: currentColor;
      cursor: not-allowed;
      text-decoration: none;
    }
  }



  /* Onadasail Content */
  .proj-content.onadasail {
    .ph-image { 
      background-image: url(../assets/project/onadasail/project03-onadasail0.jpg);
    }     
  }

    /* NokNok Content */
    .proj-content.nok {
      .ph-image { 
        background-image: url(../assets/project/noknok/project04-noknok0.jpg);
      }     
    }


    /* CSS Content video */
    .pvideo-box.mobile {
      display: flex;
      justify-content: space-between;
      align-content: flex-start;
      align-items: flex-start;
      .box-left {
        display: flex;
        flex: 1 1 100%;
      }
      .box-right {
        margin-top: 30%;
        display: flex;
        justify-content: flex-end;
        flex: 1 1 100%;
      }
      & > div {
        padding:1.5%;
        background: #010101;
        border: 1px solid #1b1721;
        border-radius: 58px;
        box-shadow: inset 0 0 4px 2px #c0b7cd, inset 0 0 0 2px #342c3f;
        margin: 8%;
      }
    }
    .pvideo-box.desktop {
      background: #0d0d0d;
      border-radius: 20px;
      box-shadow: inset 0 0 0 2px #c8cacb;
      margin: 0 auto;
      padding: 9px 9px 3px;
      position: relative;
        .video {
          border-radius: 15px;
        }
    }
  }


  #proj-info {
    h3 {
      font-size: 2.3rem;
    }
    .container {
      display:flex;
      justify-content: space-between;
      align-items: flex-start;

        .info-col {
          p {
            line-height: 1.4rem !important;
            font-size: 0.815rem;
          }
          h4 {
            font-size: 1.4rem;
            font-weight: 600;
          }
        }
        .info-col.left {
          max-width: 40%;
        }
    }
  }



  #proj-pagination {
    padding-bottom:0;
    .project-link {
      display: flex;
      justify-content: space-between;
      .container-btn {
        width: 100%;
        height: 8vh;

        a {
          margin: 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 2%;
          color: var(--solo-white);
          font-size: 1.2rem;
          height: 8vh;
          width: 100%;
          &:hover {
            cursor: pointer;
            box-shadow: inset 0 -15px 30px 10px rgba(0, 0, 0, 0.35);
          }
          &:before {
            line-height: 1rem;
            z-index: 999;
            width: 50%;
          }
        }

        .link {
          .link-text {
            z-index: 999;
            width: 50%;
          }
        }
        .prev.link {
          flex-flow: row-reverse;
          .link-text {
            text-align: left;
            margin: 0 10px;
            }
          &:before {
            text-align: right;
            }
        }
        .next.link {
          .link-text {
            text-align: right;
            margin: 0 10px;
            }
        }

        
      /*      pagination buttons     */
        .button01 {
          background: url(../assets/project/pagination-btn1.jpg) center center/cover;
          &:before {
            content: url(../assets/project/pagination-btn1-logo.png);
          }
        }
        .button02 {
          background: url(../assets/project/pagination-btn2.jpg) center center/cover;
          &:before {
            content: url(../assets/project/pagination-btn2-logo.png);
            mix-blend-mode: plus-lighter;
          }
        }
        .button03 {
          background: url(../assets/project/pagination-btn3.jpg) center center/cover;
          &:before {
            content: url(../assets/project/pagination-btn3-logo.png);
          }
        }
        .button04 {
          background: url(../assets/project/pagination-btn4.jpg) center center/cover;
          &:before {
            content: url(../assets/project/pagination-btn4-logo.png);
          }
        }

        &:after {
          content: '';
          background: var(--solo-black);
          display: block;
          width:100%;
          height:8vh;
          position: relative;
          top: -8vh;
          z-index: 10;
          filter: opacity(0);
          transition: all 0.2s ease-in;
        }
        &:hover:after {
          filter: opacity(0.5);
          transition: all 0.4s ease-out;
        }
        &:first-child {
          margin-right: 2%;
        }
      }
    }
  }








/* Media Queries */

/*************      huge desktop       ****************/
@media screen and (width <= 1680px){
  #projects {
    .project {
      max-height: 100rem;
      }
  }
}

/*************      large desktop       ****************/


@media (width <= 1200px) {
  #projects {
    .project {
      max-height: 82rem;
      }
  }
}

/*************      desktop       ****************/
@media (width <= 1024px) {

  /*    home header text   */
  .header-container {
    text-align: center;
    .container {
      padding: 0 1rem;
      .content-text {
        margin: 0;
        width: 100%;
      }
    }
  }

/*    home projects masonry   */
  #projects {
    .project {
      max-height: 70rem;
      }
  }

  #proj-page {
    .pvideo-box {
      & > div {
        border-radius: 30px !important;
        video {
          border-radius: 20px !important;
        }
      }
    }
    .pvideo-box.desktop {
      border-radius: 15px !important;
        .video {
          border-radius: 10px !important;
        }
    }
  }
}


/*************      tablet       ****************/
@media (width <= 768px) {
  /*    header    */
 .navbar {
   .container {
     padding: 2rem 1rem;
     .btn {
       margin: 0;
       margin-top: 1rem;
     }
     .nav-menu {
       position: fixed;
       right: -100vw;
       top: 4.5rem;
       flex-direction: row;
       width: calc(70% - 10px);
       transition: 0.3s;
       box-shadow: var(--shadow);
       padding: 4rem 3rem;
       border-radius: 5px;
       align-items: center;
       justify-content: space-around;
       .nav-link {
         font-size: 0.9rem;
         margin: 0 0.2rem;
       }
       li {
         margin-bottom: 0.5rem;
         width: 55%;
       }
       li.theme-switch {
         width: 25%;
       }
       .btn {
         width: 100%;
         text-align: center;
         margin-top: 0.5rem;
       }
     }
     
     .nav-menu.active {
       width: 95%;
       right: 0;
       z-index: 999;
      }
    
      .hamburger {
        display: block;
        cursor: pointer;
        padding: 0.2rem 0.4rem;
        z-index: 999;
      }
    
      .hamburger.active {
        border: 1px dotted gray;
        .bar:nth-child(2) {
          opacity: 0;
        }
        .bar:nth-child(1) {
          transform: translateY(6px) rotate(45deg);
        }
        .bar:nth-child(3) {
          transform: translateY(-8px) rotate(-45deg);
        }
      }
   }
   
 }

 /*    home header text   */
 .header-container {
   .content-text {
     h2 {
       font-size: 9vw !important;
       line-height: 10.4vw !important;
     }
   }
   .btn {
     border-radius: 5px;
     width: 80%;
   }
 }

  /*    home project + cards   */
 #projects {
  .project {
    overflow-x: scroll;
    max-height: 50rem;
    .card {
      margin: 0 1.3rem 0 0;
      width: 90%;
        &:nth-child(n) {
          padding-top: 125%;
        }
        &:nth-child(2) {
          order: 3;
      }
      }
  }
}
#projects.container {
  padding: 2rem 0;
}


 /*    project page    */
 #proj-page {
    .descript {
    flex-flow: column;
    
    .text {
      flex: 1 1 55%;
      line-height: 1.7rem;
    }
  }
   .pvideo-box {
     & > div {
       border-radius: 15px !important;
       video {
         border-radius: 10px !important;
       }
     }
   }
   .pvideo-box.desktop {
     border-radius: 10px !important;
       .video {
         border-radius: 5px !important;
       }
   }
   .project-link {
    flex-flow: column-reverse;
   }

   #proj-info {
    .container {
        display:block;
        .info-col.left {
          max-width: 100%;
          padding-top:0;
      }
      .info-col {
        padding: 3% 0;
    }
    }
  }
}


/***********     FOOTER       ************/
  #footer {
    .container {
      min-height: auto;
      padding-top: 0;
      a {
        font-size: 1.1rem;
      }

      p {
        font-size: 0.8rem;
      }
    }
  }
  
}

  /*************      mobile       ****************/
  @media (width <= 600px) {
     /*    header    */
      #logo {
        font-size: 1.1rem !important;
        line-height: 1.5em !important;
      }


 /*    home porject area    */
    #projects {
      margin:2% auto;
      .project {
        max-height: 35rem !important;
      }
    }


 /*    project page    */
    #proj-page {
        .heroimage {
          margin-bottom: 3rem !important;
        }
        .descript {
          margin-bottom: 3rem;
          h2 {
            font-size: 2.8rem !important;
          }
        }
    }
    #proj-pagination {
      nav.pagination.container {
        padding:0;
        .project-link {
          flex-flow: row !important;
          .container-btn {
            max-width: 45%;
            a {
              font-size: 1rem !important;
              padding: 0 10px !important;
            }
          }
        }
      }
    }


    /*      pagination buttons     */
    .button01,
    .button02,
    .button03,
    .button04 {
      &:before {
        content: "" !important;
      }
    }
}