*{
    scroll-behavior: smooth;
    padding:0;
    margin: 0;
    text-decoration: none;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}




body{
  width: 100vw;
  height: 650vh; 
  margin: 0;
  background: none;
  scroll-behavior: smooth;
  
  background: url("img/torretta.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#myVideo{
  position: fixed;
  object-fit: cover;
  display: none;
}

/*VARIABLES*/
:root{
  /*HAMBURGER MENU VARIABLES*/
  --lines-gap:0.7vh;
  --lines-height: 0.1vh;
  --lines-width: 6vw;
  --hamburger-height: calc(3 * var(--lines-height) + 2 * var(--lines-gap));
  --diagonal-height: calc(var(--hamburger-height) * 1.4142);
  
  /*FONTS*/
  --font1: 'Afacad', sans-serif;
  --font2: 'Montserrat', sans-serif;
  --font3: 'fontHeader';
  --font4: 'Cabin', sans-serif;
}

/*CUSTOM FONTS*/
@font-face {
  font-family: 'fontHeader';
  src: url("fonts/fontHeader.ttf");
  
}

/*UTILITY CLASSES*/
.font1{font-family: 'Afacad', sans-serif;}
.font2{font-family: 'Montserrat', sans-serif;}
.font3{font-family: 'fontHeader';}
.font4{font-family: 'Cabin', sans-serif;}
.uppercase{text-transform: uppercase;}
.capitalize{text-transform: capitalize;}
.bold{font-weight: bold;}
.red{color:red;}
.white{color:white;} 
.black{color:rgb(178, 13, 48);} 
.darkRed{color:#D30A14;}
.grey{color:grey;}
.title{font-weight: bold; text-transform: uppercase; color: white; font-size: 7vw;}
.subTitle{color:red; font-size: 6vw; font-weight: bold;}
.anchor{position: absolute;}
.noBold{font-weight: 500;}
.parallax{
  height: 25vh;
  width: 100%;
  background-attachment: fixed;
  background-position: 40%;
  background-repeat: no-repeat;
  background-size: cover;}
.material-symbols-outlined{
  color: white;
  font-size: 2vw !important;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 1,
  'opsz' 30}

#ButtonStyle{ 
  overflow: hidden;
  border: 1px solid gray;
  color: white;
  background: none;
  border-radius: 15px;
  padding: 4%;
  width: fit-content;
  height: 4vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;}


.disableTextSelection{
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/*NAVIGATION MENU*/
nav{
  z-index: 9;
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 100%;
  height: fit-content;
  align-items: center;
}


#menuBar{
  width: 95vw;
  height: 10vh;
  transition: 600ms;
  background: none;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-radius: 100px;
}

#menu{
  opacity: 0;
  width: 100vw;
  flex-direction: row;
  gap: 2vw;
  justify-content: flex-end;
  align-items: center;
  font-size: 2vw;
  right: 5vw;
  margin-left: -10%;
  cursor: pointer;
}

#menu>p:hover{
  font-weight: bold;
}

/*
#menuLogo{
  /*Blurred Background
  background: rgba(255, 128, 128, 0.5);
  border-radius: 100%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

} 
*/

#menuHamburger{
  width: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--lines-gap);
}

.line{
  width: var(--lines-width);
  height: var(--lines-height);
  background-color: white;
  transition: transform 400ms ease-in-out;
  transform-origin: center left;
}

.checkBox{
  z-index: 1;
  width: var(--lines-width);
  height: calc(3*var(--lines-height) + 2*var(--lines-gap));
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  position: absolute;
  opacity: 0;
}

.checkBox:checked ~  #line1{
  width: var(--diagonal-height);
  transform: rotate(45deg);
  translate: 0 calc(var(--lines-height) / -2);
}   

.checkBox:checked ~  #line2{transform: scaleY(0);}

.checkBox:checked ~  #line3{
  width: var(--diagonal-height);
  transform: rotate(-45deg);
  translate: 0 calc(var(--lines-height) / 2);
}

#slideMenu{
  z-index: 1;
  position: fixed;
  color: white;
  text-align: center;
  transition: color 400ms ease-in-out;
  width: 50%;
  height: 100%;
  padding-top: 50%;
  transform: translateX(-101%);
  transition: transform 0.4s ease-in-out;
  cursor: pointer;
  overflow: hidden;

  /* BLURRED BACKGROUND */
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(5px);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

#slideMenu > p{margin-top: 5%;}
#slideMenu > p:hover{font-weight: bold;}

#title{
  color: white;
  font-size: 4vw; 
  align-self: center;
  text-align: right;
  width: 80%;
}


/**HEADER*/
header{ 
  position: fixed;
  width: 100%;
  height: 100vh;
}
#slogan{
  font-family: 'fontHeader';
  font-weight: bold;
  width: 100%;
  font-size: 19vw;
  text-align: center;
  color: white;
  position: relative;
  top: 75%;
}

/**SECTION*/
section{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 100vh;
  width: 100%;
  background-color: black;
  height: 550vh;
  gap: 20vh;
}

.childSection{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vh;
  width: 80%;
}

/**ABOUT*/
.childAbout{
  width: 100%;
  overflow: hidden; 
}

#aboutTitle{
  transform: translateX(-50%);
  transition: transform 500ms ease-in-out;

}

#about{
  margin-top: 5%;
}
#aboutBio{
  color: white;
  transform: translateX(50%);
  transition: transform 800ms ease-in-out;
  font-size: 5vw;
}

#aboutButton{
  display: none;
  margin-top: -2vh;
  align-self: flex-start
}

#aboutPhoto{
  background-image: url("img/me.jpg");
}

/**SHOWCASE*/
#showCase{
  width: 100%;
  height: fit-content;
  padding-bottom: 15vh;
  background-color: #1A1A1A;
  gap: 10vh;
}

#showCaseTitle{
  text-align: center;
  width: 80%;
  margin-top: 5vh;
  align-self: center;
  background: linear-gradient(to right, #4d4d4d 0, white 10%, #4d4d4d 20%);
  background-position: 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
}

@keyframes shine{

  20%, 100% {
    backface-visibility: 0;
    background-position: 70vw
  }
  0% {
    backface-visibility: 0;
  }
  10% {
    backface-visibility: 1;
  }
}


#projectsGallery{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: fit-content;
  gap: 3vh;
}

.subProject{
  border-radius: 15px;
  width: 95%;
  height:35vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.projectDimmer{
  opacity: 0;
  background-color: rgb(0, 0, 0, 0.8);
  color: white;
  width: 100%;
  height:40vh;
  transition: opacity 300ms ease-in-out;
}

.projectDescription{
  font-family: var(--font2);
  font-size: 1vw;
  color: white;
  position: relative;
  top: 10%;
  left: 10%;
  width: 70%;
}

#project1{background-image: url("img/myWorks/1.jpg");}
#project2{background-image: url("img/myWorks/2.jpg"); background-position: top;  }
#project3{background-image: url("img/myWorks/3.png");}
#project4{background-image: url("img/myWorks/work-in-progress.jpg.jpg");}
#project5{background-image: url("img/myWorks/work-in-progress.jpg.jpg");}
#project6{background-image: url("img/myWorks/work-in-progress.jpg.jpg");}


/**REVIEWS*/
.review{
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  width: 100%;
  padding: 3%;

  gap: 5%;
  background: white;

}

.reviewUser{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 5%;
  font-weight: 600;
  font-size: 4vw;
}

.reviewUser img{
  border-radius: 100%;
  width: 15%;
}


.starRating i{
  font-size: 6vw !important;
  color: #FEB522;
  font-variation-settings:
  'FILL' 100,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  margin-top: 5%;
}

.reviewDescription{
    overflow: hidden;
}

.reviewReference{
  font-size: 3vw;
}


/*CONTACTS*/
.childContacts{
  width: 100%;
  overflow: hidden; 
}

.contact i{
  font-size: 5vw !important;
}

#contactsPhoneNumber{
  display: flex;
  flex-direction: row;
  align-items: center;
}
#contactsEmail{
  display: flex;
  flex-direction: row;
  align-items: center;
}



/*!MEDIA QUERY TABLET 450PX*/
@media handheld and (min-width: 450px),
   screen and (min-device-width: 450px),
   screen and (min-width: 450px){

    body{height: 800vh;}
    section{height: 700vh;}
    
    .title{font-size: 5vw;}
    .parallax{height: 40vh;}
    :root{
      --lines-height: 0.2vh;
      --lines-width: 3.5vw;
    }

    #title{font-size: 3vw;  }
    #aboutTitle{font-size: 5vw;}
    #aboutBio{font-size: 3vw;}

    .subProject{
      width: 80%;
      min-height:50vh;
    }

    .reviewUser{font-size: 3.5vw;}
    .reviewUser img{width: 13%;}
    .starRating i{font-size: 4vw !important;}
    .reviewDescription{font-size: 3vw;}
    .reviewReference{font-size: 2vw;}
    

    .contact{font-size: 2.5vw;}

  }

/*!MEDIA QUERY LAPTOP S 950PX*/
@media handheld and (min-width: 950px),
   screen and (min-device-width: 950px),
   screen and (min-width: 950px){

    #myVideo{display: none;}

    #slogan{
      overflow: hidden;
      top: 70%;
    }
    
    body{height: 800vh;}
    section{height: 700vh;}
    
    .title{font-size: 4vw;}
    .parallax{height: 45vh;}
    :root{
      --lines-width: 3vw;
    }
    #title{font-size: 3vw;  }

        
    #aboutTitle{font-size: 5vw;}
    #aboutBio{font-size: 3vw;}

    .subProject{
      width: 80%;
      min-height:50vh;
    }

    .reviewUser{font-size: 2.5vw;}
    .reviewUser img{width: 10%;}
    .starRating i{font-size: 3.5vw !important;}
    .reviewDescription{font-size: 2.5vw;}
    .reviewReference{font-size: 1.5vw;}
    
    .contact{font-size: 2.5vw;}

  }


/*!MEDIA QUERY LAPTOP L 1200PX*/
@media handheld and (min-width: 1200px),
   screen and (min-device-width: 1200px),
   screen and (min-width: 1200px){

    #slideMenu{
      z-index:  3;
      font-size: 1vw;
      width: 20%;
      padding-top: 20%;      
    }

    #myVideo{
      display: block;
    }
    #slogan{
      display: none;
      font-size: 19vw;
      top: 60%;
    }
    
    body{
      height: 600vh;
    }
    section{
      height: 500vh;
    }

    .checkBox{
      left: 8%;
    }
    
    .title{font-size: 3vw;}
    .parallax{height: 80vh;
    width: 90%;}

    #ButtonStyle{padding: 2%;}
    :root{
      --lines-height: 0.1vh;
      --lines-width: 2vw;

    }
      
    #title{font-size: 1.5vw;  }

    #about{
      display: grid; 
      grid-auto-columns: 50% 50%; 
      grid-template-columns: 50% 50%; 
      grid-template-rows: 10% 90%; 
      gap: 0px 0px; 
      grid-template-areas: 
        "title ."
        "desc img"; 
      justify-content: center; 
      align-content: center; 
      justify-items: center; 
      align-items: center; 
      height: fit-content;
    }
    #aboutTitle{font-size:3vw; grid-area:title;}
    #aboutBio{
      font-size: 2vw;
      z-index: 2;
      align-self: flex-start;
      width: 100%;
      grid-area: desc;}
    #aboutPhoto{
      z-index: 9;
      width: 100%;
      height: 50vh;
      grid-area:img;
      align-self: start;
    }

    #showCase{
      height: 135vh;
    }
    #projectsGallery{display: grid; 
      grid-auto-columns: 1fr 1fr; 
      grid-template-columns: 1fr 1fr 1fr; 
      grid-template-rows: auto auto; 
      grid-template-areas: 
        "a b c" 
        "d e f"; 
      justify-content: center; 
      align-content: center; 
      justify-items: center; 
      align-items: center; 
      width: 100%; 
      height: 100%; 
    }

    #project1{grid-area: a;}
    #project2{grid-area: b;}
    #project3{grid-area: c;}
    #project4{grid-area: d;}
    #project5{grid-area: e;}
    #project6{grid-area: f;}

    .subProject{
      width: 95%;
      min-height: 40vh;
    }

    #reviews{}
    .review{width: 45%;}
    .reviewUser{font-size: 1.5vw;}
    .reviewUser img{width: 10%;}
    .starRating i{margin-top: 2%; font-size: 2vw !important;}
    .reviewDescription{font-size: 1.2vw;}
    .reviewReference{font-size: 1vw;}

    .contact{
      font-size: 1.5vw;
    }
    #contacts{
      align-items: flex-start;
    }
    
    .contact i{
      font-size: 2.5vw !important;
    }
    

  }