html, body {margin: 0; height: 100%; overflow-x: hidden; overflow-y:auto;}


/* Webfont: Nohemi-ExtraLight */@font-face {
  font-family: 'NohemiExtLt';
  src: 
       url('src/fonts/Nohemi-Light.woff') format('woff'), /* Modern Browsers */
       url('src/fonts/Nohemi-Light.woff2') format('woff2'), /* Modern Browsers */
       url('src/fonts/Nohemi-Light.ttf') format('truetype'); /* Safari, Android, iOS */
           font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: Nohemi-Regular */@font-face {
  font-family: 'Nohemi';
  src: url('src/fonts/Nohemi-Medium.woff') format('woff'), /* Modern Browsers */
       url('src/fonts/Nohemi-Medium.woff2') format('woff2'), /* Modern Browsers */
       url('src/fonts/Nohemi-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
           font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: Nohemi-Bold */@font-face {
  font-family: 'NohemiBold';
  src: url('src/fonts/Nohemi-Bold.woff') format('woff'), /* Modern Browsers */
       url('src/fonts/Nohemi-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('src/fonts/Nohemi-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
           font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* Webfont: General Sans Bold */@font-face {
  font-family: 'GeneralBold';
  src: url('src/fonts/GeneralSans-Semibold.woff') format('woff'), /* Modern Browsers */
       url('src/fonts/GeneralSans-Semibold.woff2') format('woff2'), /* Modern Browsers */
       url('src/fonts/GeneralSans-Semibold.ttf') format('truetype'); /* Safari, Android, iOS */
           font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
/* Webfont: General Sans Light */@font-face {
  font-family: 'GeneralLight';
  src: url('src/fonts/GeneralSans-Light.woff') format('woff'), /* Modern Browsers */
       url('src/fonts/GeneralSans-Light.woff2') format('woff2'), /* Modern Browsers */
       url('src/fonts/GeneralSans-Light.ttf') format('truetype'); /* Safari, Android, iOS */
           font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

body {
  background-color: black;
  font-family: 'Inclusive Sans', sans-serif;
  font-family:'Nohemi';
  color: white;
}
  
h1 {
  color: white;
  text-align: center;
}

/* project menu */

#project-buttons{
  width: 500px;
  height: 350px;
  display: block;
  position: fixed;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
  text-align: center;
  align-items: center;
  
}
.project-button{
  height: 50px;
  width: auto;
  font-size: 50px;
  display: inline-block;
  font-family: "Nohemi";
}

#background{
  display: block;
  position: fixed;
  z-index: -20;
  height: 100%;
  width: 100%;
  background-image: url('src/BG\ Gradient.png');
  background-size: cover;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* Nav */

#benchanlogo{
  width: 150px;
  height: 80px;
  display: block;
  position: fixed;
  left:20px;
  top:20px;
  background-image: url('src/bchanlogo.svg');
  background-repeat: no-repeat;
  z-index: 50;
  
}



/* project wheel */

#project-wheel{
  width: 100%;
  height: 100%;
  
  display: block;
  position: fixed;
  z-index: -10;
}
.wheel-image{
  width: 200px;
  height:300px;
  display: block;
  position: absolute;
  background-size:cover;
  z-index: -5;
  top:0;
  border-radius: 5px;
  transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
  .wheel-image{
    width:100px;
    height:150px;
  }
}

/* setup project wheel images */

#wheel-image-A{
  background-image: url("src/projects/wheel\ thumbnails/Thumbnail - ADDITIONAL 1.gif");
}
#wheel-image-B{
  background-image: url("src/projects/wheel\ thumbnails/Thumbnail - OEF.gif");
}
#wheel-image-C{
  background-image: url("src/projects/wheel\ thumbnails/Thumbnail - DIAGEO.gif");
}
#wheel-image-D{
  background-image: url("src/projects/wheel\ thumbnails/Thumbnail - NANDOS.gif");
}
#wheel-image-E{
  background-image: url("src/projects/wheel\ thumbnails/Thumbnail - PERSONAL.gif");
}
#wheel-image-F{
  background-image: url("src/projects/wheel\ thumbnails/Thumbnail - ASTON.gif");
}
#wheel-image-G{
  background-image: url("src/projects/wheel\ thumbnails/Thumbnail - ADDITIONAL 2.gif");
}
#wheel-image-H{
  background-image: url("src/projects/wheel\ thumbnails/Thumbnail - ADDITIONAL 3.gif");
}

/* showreel */

#showreel-page{
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  background-color: black;
  left:100%;
  z-index: 0;
}
#showreel-page video{
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* about me */

#about-me-page{
  max-width: 400px;
  width: 80vw;
  height: 400px;
  display: block;
  position: fixed;
  left: 50%;
  top:50%;
  z-index: -20;
  opacity: 0;
  transform: translate(-50%, -50%);
}
#about-me-laptop{
  width: 100%;
  height:100%;
  background-image: url('src/about-me-laptop.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  position: fixed;
  transform: translate(-50%, 0%);
  left: 50%;
}
#about-me-text{
  display: block;
  position: absolute;
  width:100%;
  height:50%;
  top: 250px;
  text-align: center;
  font-family: 'GeneralLight';
  font-size: 25px;
  line-height: 28px;
  color: blue;
}

/* project-page */

#project-page{
  width:100%;
  min-height: 100%;
  height:auto;
  left:100%;
  display: block;
  position: absolute;
  background-color: black;
  z-index: -50;

}

.project-content{
  display: block;
  width:auto;
  max-height: 90vh;
  max-width:100%;
  left:0vw;
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 10px;
  margin: auto;
  pointer-events: none;

}
.project-info{
  width: 100%;
  height: auto;
  background-color: black;
  display: inline-block;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
  color: white;


}
.project-info b{
  font-size: 70px;
  font-family: 'GeneralBold';
  kerning: normal;
  letter-spacing: -2px;
  line-height: 65px;
  
}
.project-info p{
  font-size: 25px;
  line-height: 30px;
  font-family: 'GeneralLight';
  width: 100vw;
  max-width: 80vw;
  margin: auto;
}

/* credits */ 
#credits{
  width: 100%;
  height: auto;
  background-color: black;
  display: inline-block;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
  color: white;
  

}
#credits p{
  font-size: 16px;
  font-family: 'GeneralLight';
  width: 80vw;
  max-width: 100vh;
  margin: auto;
  line-height: 27px;
}
#credits b{
  opacity: 0.6;
}


/* properties */

.no-select {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* Old Edge */
} 

.no-pointer {
  pointer-events:none;
}