@import url('https://fonts.googleapis.com/css?family=Heebo');
@import url('https://fonts.googleapis.com/css?family=Manuale&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT&display=swap');
@import url('https://fonts.googleapis.com/css?family=Spectral:200,400&display=swap');

/* http://lunchtype.com */
@font-face {
  font-family: 'LunchType-Regular';
  src: url('lunchtype24-regular-webfont.woff2') format('woff2'),
    url('lunchtype24-regular-webfont.woff') format('woff'),
    url('lunchtype24-regular-webfont.ttf') format('truetype');
}

@font-face {
  font-family: 'LunchType-Medium';
  src: url('lunchtype24-medium-expanded-webfont.woff2') format('woff2'),
    url('lunchtype24-medium-expanded-webfont.woff') format('woff'),
    url('lunchtype24-medium-expanded-webfont.ttf') format('truetype');
}

@font-face {
  font-family: Syne Regular;
  src: url(syne-regular.woff2), url(syne-regular.woff);
}

@font-face {
  font-family: Lack Regular;
  src: url(lack-regular.woff), url(lack-regular.woff2), url(lack-regular.eot);
}

body {
  font-family: 'Heebo', sans-serif, Helvetica Neue;
  /*   font-family: Helvetica Neue; */
  font-size: 24px;
  line-height: 1.5;
  background-color: #000000;
  color: #f2f2f2;
  /* add empty space at the top for the header to sit in */
  padding-top: 110px;
}

::selection {
  color: #f2f2f2;
  background-color: #ff00fb;
}

a {
  color: #f2f2f2;
  text-decoration: none;
}

header {
  /* take all the space available when fixing position */
  width: 100%;
  /* stays always at the top left corner */
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 20px 40px 20px 40px;
  /* keep header on top of everything */
  z-index: 99;
  /* FIX THIS ? */
  /* mix-blend-mode: difference; */
}

header nav a {
  font-size: 18px;
  font-family: 'LunchType-Medium';
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-left: 10px;
  /* completely transparent underline border to start with */
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  padding-bottom: 3px;
  transition: border 0.3s ease-in;
}

header nav a:hover {
  /* grey underline on hovered nav */
  border-color: #999999;
}

header nav .selected {
  /* red underline on selected nav */
  border-color: #ff0000;
}

.hovered-text {
  text-decoration: none;
  font-family: 'LunchType-Medium';
  border-bottom: 2px solid #f2f2f2;
  /* transition for hovered <a> */
  transition: color 0.3s ease-in, border 0.3s ease-in;
}

.hovered-text:hover {
  /* red text on hover */
  /* color: #999999; */
  border-color: #ff0000;
}

.main-page {
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.about-description {
  padding-bottom: 40px;
}

.about-page {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 80px;

  font-size: 24px;
  line-height: 1.3;
}

/* project container shared between all projects */
.container {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}

.project {
  position: relative;
  /* hide overlay overflow */
  overflow: hidden;
}

/* FIX IMAGE CROPPING TO BE THE SAME FOR EACH PROJECT */
.project-img {
  width: 800px;
  height: 450px;
  object-fit: cover;
  object-position: bottom;
  /* zoom in transition    */
  transition: transform 0.4s ease-in-out;
}

.project:hover .project-img {
  transform: scale(1.025);
  transition: transform 0.3s ease-in-out;
}

.project-title {
  margin-top: 10px;
  margin-bottom: 5px;
  text-transform: uppercase;
  display: flex;
  justify-content: flex-end;
}

.project-tags {
  /*   text-transform: lowercase; */
  /*   font-family: 'Manuale', serif; */
/*   font-family: 'Inconsolata', monospace; */
  font-family: Calendas Plus;
/*   font-style: italic; */
  font-size: 18px;
  color: #707070;
  display: flex;
  justify-content: flex-end;
}

/* https://stackoverflow.com/questions/35504081/display-div-overlay-on-hover-with-css3-ease-in-transitions */
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  /* use rgba values for more control over style */
  background-color: rgba(80, 80, 80, 0);

  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;

  transform: translateX(100%);
  transition: transform 0.5s ease-in-out, background-color 5s ease-in-out;
}

.project:hover .overlay {
  background-color: rgba(80, 80, 80, 0.9);
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
  
}

.project-description {
  font-family: Oswald;
  max-width: 400px;
  font-size: 32px;
  color: #f2f2f2;
  text-align: center;
}

.email {
  font-family: 'LunchType-Medium';
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #f2f2f2;
  padding-bottom: 5px;
  border-bottom: 2px solid #f2f2f2;
  transition: all 0.5s ease;
}

footer {
  text-align: center;
	color: #333333;
  
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

footer p {
  font-size: 12px;
  letter-spacing: 3px;
}

@media (max-width: 800px) {
  
  body {
    font-size: 21px;
  }
  
  header {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .main-page {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .about-page {
    font-size: 21px;
  }
  
  .project-img {
    width: 600px;
    height: 350px;
  }
   
  .project-description {
    max-width: 400px;
  	font-size: 28px;
  }
}

@media (max-width: 620px) {
  
  body {
    font-size: 12px;
  }
  
  header {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  header nav a {
    font-size: 15px;
  }
  
  .main-page {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .about-page {
    font-size: 18px;
  }
  
  .project-img {
    width: 400px;
    height: 225px;
  }
   
  .project-description {
    max-width: 250px;
  	font-size: 18px;
  }
}

@media (max-width: 370px) {
  
  body {
    font-size: 10px;
  }
  
  header {
    padding-bottom: 5px;
  }
  
  .container {
    margin-bottom: 60px;
  }
  
  footer {
    padding-top: 0px;
  }
  
}

/* TO DO */

/* 2. tv static/noise filter add onto overlay */
/* 3. change background/background color */
/* 4. add some nice details */
/* 5. slide into section */
/* 6. open video/content as lightbox? */

/* check
https://codepen.io/alvarotrigo/pen/VdpzRN/ */

/* check
https://editor.superhi.com/projects/32260/view
for color matching sections */

/* check
https://www.superhi.com/video/simple-page-transitions-with-jquery-and-javascript
for smooth page transitions */

/* 6. check
 https://www.ableton.com/en/live/learn-live/ */