html{
  box-sizing: border-box;
}

html, body {
  overscroll-behavior-x: none;
  overflow-x: hidden;
  /* max-width: 100vw; */
}

/* html, body {
  overflow-x: hidden;
} */

*,
*::after,
*::before{
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body{
  height: 100vh;
  width:100vw;
  font-family: 'Outfit', 'Montserrat' ,Verdana, Geneva, Tahoma, sans-serif;
  overflow-x: hidden;
}

.main-page{
  position: relative;
  width:100vw;
  height:100vh;
  display: grid;
  place-content: center;
}

.centered{
  display:grid;
  place-content: center;
  z-index: 2;
}

.centered-text{
  text-align: center;
  line-height: 100%;
  font-size: max(6vw, 3rem);
  z-index: 2;
}

.text-1{
  font-weight: 300;
}

.text-2{
  font-weight: 900;
}

.darkShape{
  position: absolute;
  left:0;
  width: max(30vw, 20rem);
  top:20%;
  translate:-20% 0;
}

.lightShape{
  position: absolute;
  right:0;
  width: max(30vw, 20rem);
  top:50%;
  translate:20% 0;
  z-index: 0;
}

/* ------ */

.second-page{
  margin-top: 5vh;
  width:100%;
  position: relative;
}

.portfolio-text{
  position: relative;
  white-space: nowrap;
  display: inline;
  font-weight: 500;
  font-size: 7vw;
  font-style: italic;
  font-family: 'Montserrat' ,Verdana, Geneva, Tahoma, sans-serif;
}

.text-skew{
  translate: -20% 0;
  rotate:-2deg;
  transform: skew(-5deg, 0deg) translateX(120%);
}

.text-skew-2{
  translate: -20% 10%;
  rotate:-1deg;
  transform: skew(-2deg, 0deg) translateX(-120%);
}

.projects{
  margin: 5vh 0;
  translate: -0.7% 0;
  width:100%;
  display: flex;
  justify-content: center;
  gap: max(calc(15vw - 9rem), 1.2rem);
}

.project{
  position: relative;
  height:calc(20vw + 4rem);
  max-height: 30rem;
  aspect-ratio: 1/ 1.4;
  width: auto;
  border: calc(0.3rem + 0.3vw) solid #1b1b1b;
  transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
}

.project-border{
  position: absolute;
  box-sizing: content-box;
  top: 0;
  left: 0;
  translate: calc(-0.3rem - 0.3vw) calc(-0.3rem - 0.3vw);
  width:100%;
  height:100%;
  border: calc(0.3rem + 0.3vw) solid #1b1b1b;
  pointer-events: none;
}

.project-sub{
  position: absolute;
  font-size: calc(1rem + 0.5vw);
  bottom: 0;
  left: 0;
  translate: calc(-0.3rem - 0.3vw) 130%;
  font-weight: 800;
}

.project:hover{
  rotate:0deg !important;
  translate: 0 -10%;
  scale:1.1;
}



/* ------- */

.third-page,
.about-page{
  height:50vh;
  display: grid;
  place-content: center;
  font-family: 'Montserrat' ,Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 700;
  font-size: max(4vw, 3rem);
  font-style: italic;
  width:100%;
  text-align: center;
}

.about-page{
  height: 40vh;
  padding-bottom: 100vh;
}

/* ------- */



@media (width < 600px){
  .project-sub{
    font-size: min(calc(3.75vw), 1.25rem);
    white-space: nowrap;
  }
}


@media (width < 800px){
  .page-project{
    width:35vw;
    max-width: 35vw;  
  }
}