@font-face {
  font-family: 'RobotoThin';
  src: url('fonts/Roboto-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'RobotoMedium';
  src: url('fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'RobotoRegular';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'SpaceMonoRegular';
  src: url('fonts/SpaceMono-Regular.ttf') format('truetype');
}


html {
  scroll-behavior: smooth;
  overflow-x: hidden;


}

body {
  margin: 0%;
  padding: 0%;
  height: 100%;
  scroll-behavior: smooth;
  background-color: rgba(0, 0, 0, 1);
  font-family: RobotoRegular;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: grey;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: red;
}

header {
  width: 100%;
  height: 90px;

  font-family: RobotoRegular;
  font-size: 18px;
  color: white;
  z-index: 2;
  position: fixed;
  float: left;
  left: 0%;
  top: 0%;
  display: flex;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgb(0, 0, 0, .1));

}

header a {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  display: block;
  color: white;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

header a:hover {

  color: red;
  transition: .3s;

}

#introText {
  z-index: 1;
  position: absolute;
  float: left;
  left: 20%;
  bottom: 25%;
  width: 50%;
  text-align: left;
  font-size: 50px;
  font-family: RobotoThin;

}

.sectionContainer {
  text-align: center;
  font-family: RobotoThin;
  color: white;
  font-size: 25px;
  width: 100%;
  border: none;
  float: left;
  left: 0%;
  top: 0%;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

}

.sectionContainer a {

  border: none;
  color: white;
  cursor: pointer;
  position: relative;
  font-family: RobotoRegular;
  font-size: 25px;
  padding: 1%;
  text-decoration: none;
}

.sectionContainer a:hover {

  color: red;
  transition: .3s;

}

.projectContainer {
  width: 100%;

  position: relative;
  display: flex;

  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  text-align: center;
  align-items: center;

}

.projectBlock {
  float: left;
  position: relative;
  width: 40%;
  aspect-ratio: 1.6;

  background-size: cover;
  /* to cover the entire div */
  background-position: center;

  cursor: pointer;
  overflow: hidden;
  color: white;
  box-shadow: rgb(7, 0, 0) 0px 5px 15px;
  border-radius: 15px;

  scale: .9;
  transition: .3s;
}

.projectBlock:hover {
  transition: .3s;
  transform: scale(1.1);
  box-shadow: rgba(248, 4, 45, 0.35) 0px 0px 200px 2px;
}

.thumbnailClass {
  position: relative;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
  text-align: right;
  transition: .3s;
  transform: scale(1.0);
  background-color: black;
  opacity: .8;
}

.thumbnailClass:hover {
  opacity: 1;
  transition: .3s;
  transform: scale(1);
  text-align: center;
}

.sketchThumbnail {
  position: relative;
  object-fit: cover;
  width: 30%;
  height: 100%;
  border: none;
  overflow: hidden;
  text-align: right;
  transition: .3s;

}

.sketchThumbnail.show {
  width: 50%;
}

.sketchThumbnail:hover {

  opacity: 1;
  transition: .2s;
  outline: 10px solid red;

  text-align: center;
}

.exploreProjects {
  width: 90%;
  float: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5%;

}


.thumbnailTextClass {
  z-index: 1;
  width: 95%;

  position: absolute;
  float: right;
  right: 0%;
  bottom: 0%;
  padding: 2.5%;


  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));

  font-family: RobotoRegular;
  font-size: 20px;
  border-right: solid 5px red;
  box-shadow: rgba(0, 0, 0, 0.75) 0px 25px 20px -20px;
  display: flex;
  flex-direction: column;


  text-align: right;

  transition: .3s;
}

.thumbnailTextClass p {


  font-size: 14px;
  font-family: RobotoThin;
}

.thumbnailTextClass h2 {
  font-size: 30px;
  margin-bottom: -5px;
  /* adjust the value to your preference */
}

.thumbnailTextClass:hover {

  opacity: 1;
  transition: .3s;
}

#fadingEffect {
  width: 100%;
  height: 20%;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
  position: absolute;
  display: flex;
  float: left;
  left: 0%;
  bottom: 0%;
}

.bcImageClass {
  position: relative;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;

  justify-content: center;
  text-align: center;
  align-items: center;
  transition: 3s;
  animation: fadeInIm 3s;
}

.bcImageClass.show {
  overflow: hidden;
  animation: fadeInIm1 3s;
  justify-content: center;
  text-align: center;
  align-items: center;
  transition: 3s;
}

#tagBlock {
  width: 100%;
  display: flex;
 
  justify-content: center;
  display: flex;
  align-items: center;
  gap:10px;
}

.sortButton {
  height: 50px;
 
  border-radius: 10px;
color:white;
  background-color: rgba(51, 7, 1, 0.568);
  border: solid 1px rgba(128, 128, 128, 0.336);
  padding: 10px;
  font-size: 15px;
  transition: .3s;
  cursor: pointer;
}

.sortButton:hover {
 
color:white;
  background-color: rgb(202, 3, 3);
 
  border: solid 1px rgba(255, 0, 0, 0.336);
  transition: .3s;
}

.sortButtonToggle {
  height: 50px;
 
  border-radius: 10px;
color:white;
  background-color: rgb(250, 13, 5);
  border: none;
  padding: 10px;
  font-size: 15px;
  transition: .3s;
}



@keyframes fadeIn {
  0% {
    opacity: 0;

    transform: scale(.2);
  }

  100% {
    opacity: 1;

    transform: scale(.6);
  }
}

@keyframes fadeInIm {
  0% {
    opacity: 0;
    filter: blur(25px);
    transform: scale(1.00);
  }

  10% {
    filter: blur(0px);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: .5;
    transform: scale(1.05);
  }
}

@keyframes fadeInIm1 {
  0% {
    opacity: 0;
    filter: blur(25px);
    transform: scale(1.05);
  }

  10% {
    filter: blur(0px);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: .5;
    transform: scale(1.00);
  }
}

.button {
  font-size: 25px;
  font-family: robotoRegular;
  background-color: rgba(255, 255, 255, 0);
  overflow: hidden;
  text-decoration: none;
  border: none;
  color: white;
  padding: .9%;
  position: relative;
  cursor: pointer;
  margin-left: 15px;
}

.button:hover {
  color: red;
  -webkit-transition-duration: .6s;
  background-color: rgba(255, 255, 255, 1);
}

.button:focus {
  background-color: red;
}

.contentContainer {
  z-index: 1;
  position: relative;
  float: left;
  left: 0%;
  top: 90%;
  width: 70%;
  background-color: white;
  color: black;
  text-align: center;
  font-size: 25px;
  font-family: RobotoRegular;
  padding-left: 15%;
  padding-right: 15%;

  padding-bottom: 4%;

}

.overviewBlock {
  width: 100%;
  background-color: rgb(240, 240, 240);
  color: rgb(0, 0, 0);
  position: relative;
  top: 0%;
  display: flex;
  font-size: 16px;
  border-bottom: solid 3px red;


}

.overviewBlock a {
  text-decoration: none;
  color: red;
  font-weight: bold;

}

.contentBlock {
  text-align: left;
  width: 100%;
  height: 25%;
  background-color: white;
  position: relative;
  top: 0%;
  display: block;
  font-size: 20px;
  line-height: 1.75;

}

#logo {
  width: 100%;

}

#burgerMenu {
  width: 60px;
  height: 60px;

  display: none;
}

.navigation {
  width: 100%;


  display: flex;
  flex-direction: row;
  float: left;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.videoContainer {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 1100px) {

  header {
    top: 0%;
    left: 0%;
    font-size: 30px;

    float: left;
    display: block;
    align-items: center;
    justify-content: center;
  }

  #logo {

    float: left;
    width: 100%;
    background-color: black;

    text-align: left;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

  }

  #burgerMenu {
    width: 60px;
    height: 60px;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;


    transition: .3s;
    cursor: pointer;
    transform: scale(1.0);

  }

  #burgerMenu:hover {
    width: 60px;
    height: 60px;
    background-color: red;
    transition: .3s;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    transform: scale(1.1);
  }

  .bar {
    position: relative;
    display: block;
    width: 60px;
    height: 8px;
    background-color: white;

    -webkit-transition-duration: .2s;

  }

  .bar:hover {
    background-color: red;
    -webkit-transition-duration: .2s;
    cursor: pointer;
    width: 80px;
    height: 10px;
  }

  .navigation {
    padding: 10%;
    width: 0%;
    background-color: black;
    font-size: 55px;
    opacity: 0;
    display: flex;
    flex-direction: column;
    float: right;
    gap: 40px;
    visibility: hidden;
    transition: .3s;

  }

  .navigation.show {
    float: left;
    width: 80%;
    opacity: 1;
    visibility: visible;
    transition: .3s;

  }

  .sectionContainer {

    font-size: 45px;


  }

  .projectContainer {
    order: 0%;
    flex-direction: column;
    left: 0%;
    width: 100%;
  }

  .projectBlock {
    float: left;
    position: relative;
    width: 100%;
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(250, 223, 183, 0.181));
    transition: .3s;
    transform: scale(.9);
    cursor: pointer;
    overflow: hidden;
    color: white;
    box-shadow: rgb(7, 0, 0) 0px 5px 15px;

  }

  #introText {

    font-size: 80px;
    font-family: RobotoThin;
  }

  .contentContainer {
    left: 0%;

    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;


  }

  .contentBlock {
    font-size: 30px;
  }

  .overviewBlock {


    color: rgb(0, 0, 0);
    position: relative;
    top: 0%;
    display: flex;
    flex-direction: column;
    font-size: 24px;
    padding-bottom: 5%;
  }

  .exploreProjects {
    width: 80%;
    padding: 10%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }

  .thumbnailTextClass p {
    font-size: 30px;
  }

  .thumbnailTextClass h2 {
    font-size: 60px;
  }

  .sortButton{
    height: 80px;
    font-size: 25px;
  }
  
  .sortButtonToggle{
    height: 80px;
    font-size: 25px;
  }
  
  
}