@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./assets/fonts/PP-Neue/PPNeueMontreal-Book.otf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./assets/fonts/PP-Neue/PPNeueMontreal-Bold.otf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./assets/fonts/PP-Neue/PPNeueMontreal-Italic.otf');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./assets/fonts/PP-Neue/PPNeueMontreal-Medium.otf');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./assets/fonts/PP-Neue/PPNeueMontreal-SemiBolditalic.otf');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('./assets/fonts/PP-Neue/PPNeueMontreal-Thin.otf');
  font-weight: 100;
  font-style: normal;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

  transition:  opacity 700ms, margin 700ms;
}

*::selection,
p::selection {
  background-color: #0000cd;
  color: white
}

body {
  max-width: 1920px;
  margin: 0 auto;
  font-family: Helvetica,Arial, sans-serif;
  background-color: #FBFBFB;
}

a {
  text-decoration: none;
  color: black
}

.container {
  display: flex;
  flex-direction: column;
}

/* navbar */
nav {
  display: flex;
  justify-content: space-between;

  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  padding-bottom: 1rem;
  border-bottom: 1px solid #E5E5E5;

  padding: 23px 32px;

  position: sticky;
  top: 0;
  background-color: #FBFBFB;
  z-index: 1;
}



.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;

  gap: .5px solid #E5E5E5;

  grid-template-areas: 
  'selfIntro darwin'
  'rhino accu'
  'vanguard other'
  ;

  
}

.projects > a {
  border-right: .5px solid #E5E5E5;
}

#selfIntro{
  grid-area: selfIntro;
  border-right: none;
}
#darwin {
  grid-area: darwin;
  border-left: .5px solid #E5E5E5;
}
#rhino {
  grid-area: rhino
}
#accuWeather {
  grid-area: accu;
}

#vanguard {
  grid-area: vanguard
}

#other {
  border-bottom: none;
}

.projects > div {
  border-bottom: .5px solid #E5E5E5;
}



.home__video {
  width: 100%;
  position: relative;

  /* height: 130%; */
}

.projects > :nth-child(odd) {
  border-right: .5px solid #E5E5E5;
}

.project {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  padding: 24px 32px;
}

.project__title {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-self: flex-start;

  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;

  opacity: 0;
}
.project__year {
  margin: 0 auto;
  align-self: flex-start;
  transform: translateX(-50%);

  font-style: normal;
  font-weight: 100;
  font-size: 16px;
  line-height: 24px;
}

.project__password {
  width: 147px;
  height: 38px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-style: normal;
  font-weight: 100;
  font-size: 14px;
  line-height: 22px;

  background-color: #000000;
  color: #FFFFFF;
  border-radius: 4px;

  opacity: 0;
  position: relative;
  top: 15px
}

.project:hover .project__title{
  opacity: 1;
}

.project:hover .project__password {
  transition: 700ms top;
  opacity: 1;
  top: 0;
}

.selfIntro{
  height: 696px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 24px 32px;
  border-bottom: 1px solid #E5E5E5;
}


.selfIntro__workExperience{
  width: 456px;
  height: 192px;

  display: flex;
  flex-direction: column;
  justify-content: 'space-between';

}

.selfIntro__workExperience  {

}

.selfIntro__contact {
  width: 456px;
}

.selfIntro__contact > hr {
  margin: 8px 0;
}

.email__container {
  display: flex;
  justify-content: space-between;
}

.email {
  cursor: grab;
}

.email--copy {
  display: none;
}

.isActive {
  display: block;
}

.selfIntro:hover,
.selfIntro:hover a {
  transition: 700ms;
  background-color: #000AFF;
  color: #FFFFFF;
}

.darwin {
  height: 750px;
  display: flex;

  border-bottom: #E5E5E5 1px solid;
}

.darwin > img {
  width: 407px;

  align-self: center;
  

}

.rhino {
  height: 750px;
  border-bottom: 1px solid #E5E5E5;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -55px;

}

.rhino > img {
  width: 511px;

}

.accuWeather {
  height: 779px;
  border-bottom: 1px solid #E5E5E5;

  display: flex;
  justify-content: flex-start;
  align-items: center;

  position: relative;
}

.accuWeather > img {
  width: 315px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.accuWeather > video, .vanguard > video  {
  margin-top: 100px;
}

.vanguard {
  height: 552px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: relative;
  margin-top: -85px;

}



.vanguard > img {
  width: 540px;

  
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.otherProjects {
  height: 656px;
  padding: 24px 32px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.otherProjects--title {
  font-size: 16px;
  font-weight:  400;
  line-height: 24px;
}

.otherProjects--wrapper {
  width: 100%;
  height: 458px;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  margin-bottom: 40px;
}

.otherProjects--project {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid #000000
}


.otherProjects--project > p:nth-child(2) {

  margin-top: 8px;
}







@media screen and (max-width: 840px) {
  nav {
    position: sticky;
    top: 0;
    background-color: #FBFBFB;
    width: 100%;
    z-index: 1;
  }
  .projects {
    width: 100%;
    /* overflow-x: hidden; */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    /* flex-direction: column-reverse; */
    grid-template-areas: 
    'selfIntro'
    'darwin'
    'rhino'
    'accu'
    'vanguard'
    'other';
  }
  #selfIntro{
    grid-area: selfIntro;
    height: 700px;
    padding: 24px 32px;

    overflow: hidden;

  
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
  }

  .selfIntro__workExperience {
    width: 100%;
  }

.selfIntro__contact {
  width: 100%;
}

  #darwin{
    grid-area:  darwin;
    width: 100%;
    overflow: hidden;
  }

  .darwin{
    width: 100%;
    height: 70vh;
  }

  .darwin > img {
    width: 100%;
    height: auto;
  }

  #rhino{
    grid-area: rhino;
    width: 100%;
    overflow: hidden;
  }

  .rhino {
    width: 100%;
    height: 70vh;
    margin-top: 0;
  }

  .rhino > img {
    width: 100%;
    height: auto;
  }

  #accuWeather {
    grid-area: accu;
    width: 100%;
    overflow: hidden;
  }

  .accuWeather {
    width: 100%;
    height: 70vh;
  }

  .accuWeather > img {
    width: 100%;
    height: auto;

    position: unset;
  top: 5=unset;
  transform: translateY(0);
  }

  #vanguard {
    grid-area: vanguard;
    width: 100%;
    overflow: hidden;
  }

  .vanguard {
    width: 100%;
    height: 70vh;
    margin-top: 0;
  }

  .vanguard > img {
    width: 100%;
    height: auto;
  }

  #other {
    overflow: hidden;

  }

  .otherProjects {
    width: 100%;
    height: 65vh;

  border-top: #E5E5E5 1px solid;
  }
  .otherProjects--title {
    font-size: 14px;
  
    font-weight:  600;
    line-height: 24px;
  }

  .otherProjects--wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    margin-top: -100px;
  }



  .project__title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* align-self: flex-start; */
  
  
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
  
    opacity: 1;
  }
  .project__year {
    margin: 0;
    transform: translateX(0);
  
  
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
  }


.project__password {
    transition: 700ms top;
    opacity: 1;
    top: 0;
  }

}

/* utilities */
.btn {
  width: fit-content;
  height: 38px;

  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  padding: 8px 16px;

  display: flex;
  justify-content: center;
  align-items: center;
  
  text-align: center;

  color: #FFFFFF;

  background: #000000;
  border-radius: 4px;
}

/* fix style */
.pp__text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 100;
}

.pp__text__italize {
  font-style: italic;
}

.pp__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.pp__mb {
  margin-bottom: 24px;
}

.pp__mb_s{
  margin-bottom: 8px;
}

.pp__mt {
  margin-top: 24px;
}

.pp__mt_s{
  margin-top: 8px;
}

.pp__bb {
  padding-bottom: 8px;
  border-bottom: 0.5px solid #000000;
}

.pp__bt {
  padding-top: 8px;
  border-top: 0.5px solid #000000;
}

.pp__ml_l {
  margin-left: 32px;
}

.pp__ml_m {
  margin-left: 16px;
}