@font-face {
  font-family: "interFaceTh";
  src: url(InterFace_Trial_Th.ttf) format("truetype");
}

@font-face {
  font-family: "interFaceRg";
  src: url(InterFace_Trial_Rg.ttf) format("truetype");
}

@font-face {
  font-family: "interFaceBd";
  src: url(InterFace_Trial_Bd.ttf) format("truetype");
}

.baskervville-regular {
  font-family: "Baskervville", serif;
  font-weight: 400;
  font-style: normal;
}

.baskervville-regular-italic {
  font-family: "Baskervville", serif;
  font-weight: 400;
  font-style: italic;
}

html{
  scroll-behavior: smooth;
}

/* Navbar container */
body {
  /* background-color: #fefefe; */
  background-color: #F5F3EF;
  margin: 0px;
}

.navbarCont{
  background-color:#F5F3EF;
  width: 100%;
  z-index: 1000;
  position: sticky;
  top: 0;
}

.navbar {
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 16.666667%;
  padding-right: 16.666667%;
  justify-content: space-between;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 1vw;
  text-align: left;
  padding: 0.875vw 1vw;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 1vw;
  border: none;
  outline: none;
  padding: 0.875vw 1vw;
  background-color: inherit;
  font-family: inherit;
  text-align: left;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn{
  background-color: #FCEFB4;
  border-radius: 1vw;
  transition: 0.3s ease; /* Smooth transition */
}

/* Dropdown content (hidden by default) */
/* .dropdown-content {
  display: none;
  position: absolute;
  min-width: 10vw;
  box-shadow: 0vw 0.5vw 1vw 0vw rgba(0, 0, 0, 0.2);
  z-index: 10;
  background-color: #D5E1E1;
  font-size: 1vw;
  border-radius: 1vw;
} */

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 10vw;
  box-shadow: 0vw 0.5vw 1vw 0vw rgba(0, 0, 0, 0.2);
  z-index: 10;
  background-color: #D5E1E1;
  border-radius: 1vw;
}


/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #FCEFB4;
  padding: 0.75vw 1vw;
  text-decoration: none;
  display: block;
  text-align: left;
  font-family: "interFaceRg";
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #FCEFB4;
  color: #172E3D;
  transition: 0.3s ease; /* Smooth transition */
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  transition: 0.3s ease; /* Smooth transition */
}

h1 {
  font-family: 'Baskervville';
  font-size: 3vw;
  font-weight: 400;
  color: #172E3D;
}

h2{
  font-family: 'Baskervville';
  font-size: 2.5vw;
  font-weight: 100;
}

h3 {
  font-family: 'Baskervville';
  font-size: 1.25vw;
  letter-spacing: 0.1vw;
  font-weight: 400;
  color: #172E3D;
}

h4 {
  font-family: "interFaceRg";
  font-size: 1.25vw;
  text-align: center;
  color: #172E3D;
}

h5 {
  font-family: 'interFaceBd';
  font-size: 1.25vw;
  letter-spacing: 0.1vw;
  font-weight: 400;
  text-transform: uppercase;
  color: #6B796A;
}

p {
  font-family: "interFaceTh";
  font-size: 1.25vw;
  letter-spacing: 0.05vw;
  color: #172E3D;
}

hr {
  background-color: #172E3D;
  height: 0.05vh;
}

.hamburger{
  display: none;
  width: 5vw;
}

.hamburger img{
  width: 100%;
}

#hamburgerMenu{
  background-color: #172E3D;
}

.showDropDown{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.showDropDown a{
  text-decoration: none;
}

#uxDropDown, #artDropDown, #uxShowDropDown, #artShowDropDown{
  width: 100vw;
  text-align: center;
  position: relative;

}

#uxShowDropDown a, #artShowDropDown a{
  text-align: center;
}

.showDropDownCont{
  display: none;
}






.landing {
  position: relative;
  text-align: center;
}

.backgroundImage img{
  width: 100%;
}

.aboutMeText-top {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}



.aboutMeMain, .freeTimeCont{
  color: white;
  padding-top: 1vh;
  padding-left: 16.666667%;
  padding-right: 16.666667%;
}

.intro, .freeTime{
  text-align: left;
}

.intro{
  padding-top: 8.5vw;
  display: flex;
  justify-content: space-between;
}

.introText{
  width: 50%;
}

.introImg img{
  width: 100%;
}


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

.likeToDesignLeftTop, .likeToDesignLeftBottom{
  display: flex;
  justify-content: space-between;
}

.likeToDesignLeftTop{
  margin-bottom: 2.5vh;
}

.likeToDesignLeft{
  width: 80%;
}

.likeToDesign{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.likeToDesignImg{
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 55vh;
  margin-bottom: 2vh;
  width: 25vw;
}

.likeToDesignImg img{
  height: 100%;
}


.likeToDesignText {
  padding: 0 1vw;
  border-radius: 2vw;
  background: #FCEFB4;
  width: 100%;
}

.likeToDesignText a{
  text-decoration: none;
  text-align: center;
}

.likeToDesignText:hover{
  background-color: #D5E1E1;
  transition: 0.3s ease; /* Smooth transition */
}

.likeToDesignRight{
  display: flex;
}

.likeToDesignRightText h1, .likeToDesignRightText h3{
  writing-mode: vertical-lr;
  margin: 0;
  padding: 0;
}


.likeToDesignMain, .freeTimeCont{
  padding-bottom: 8.5vh;
  padding-top: 8.5vh;
}

.freeTimeText h1{
  margin: 0px;
}


.freeTime{
  height: 15vh;
}


.freeTimeText{
  width: 50%;
}

.freeTimeImgCont{
  display: flex;
  align-items: center;
  height: 50vh;
  overflow: hidden;
  justify-content: space-between;
}

.freeTimeImg{
  width: 66%;
}


.whatIDo{
  text-align: center;
}

* {
  box-sizing: border-box
}

/* Slideshow container */
.slideshow-container {
  /* max-width: 1000px; */
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides,
.mySlides3 {
  display: none;
}

/* Next & previous buttons */
.prev,
.next,
.prev3,
.next3 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #172E3D;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: #FCEFB4;
}

/* Position the "next button" to the right */
.next,
.next3 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover,
.prev3:hover,
.next3:hover {
  background-color: rgba(213, 225, 225, 0.8);
}



.active{
  background-color: #D5E1E1;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

.mySlides img{
  width: 100%;
  overflow: hidden;
}


@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}




.footerInfo{
  display: flex;
  height: 25vh;
  align-items: center;
  padding-left: 16.666667%;
  padding-right: 16.666667%;
}

.footerLeft{
  width: 90%;
}

.footerLeft h1{
  margin: 0px;
}

.footerRight h4{
  text-align: right;
}

.linkedIn a, .email a{
  text-decoration: none;
}


#fade-in-on-scroll {
  opacity: 0;
  transition: opacity 1s ease-in-out; /* Adjust the duration and easing as needed */
}

#fade-in-on-scroll.visible {
  opacity: 1;
}

.email:hover h4,
.linkedIn:hover h4 {
    text-decoration: underline;
    transition: 0.3s ease; /* Smooth transition */
}

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

  h1 {
    font-size: 8vw;
  }
  
  h2{
    font-size: 7vw;
  }
  
  h3 {
    font-size: 3.5vw;
  }
  
  h4 {
    font-size: 3.5vw;
  }
  
  h5 {
    font-size: 3.5vw;
  }
  
  p {
    font-size: 3.5vw;
  }

  .navbar{
    padding-left: 5%;
    padding-right: 5%;
  }

  .hamburger{
    display: block;
  }

  .dropdown, .resume, .aboutMe, .contact{
    display: none;
  }

  .showDropDownCont{
    display: block;
    background-color:#F5F3EF;
    width: 100%;
    z-index: 999;
    position: sticky;
    top: 8%;
  }

  .landing{
    height: auto;
  }

  .aboutMeMain{
    padding: 5%;
  }

  .aboutMeText-top{
    width: 80%;
  }

  .intro{
    flex-direction: column;
    padding: 0px;
    text-align: center;
  }

  .introText{
    width: 100%;
  }

  .likeToDesignMain{
    flex-direction: column-reverse;
    padding-top: 10%;
    padding-bottom: 10%;
  }

  .likeToDesignLeft{
    width: 100%;
  }

  .likeToDesignLeftTop, .likeToDesignLeftBottom{
    flex-direction: column;
    margin-bottom: 0px;
  }

  .likeToDesign{
    margin-bottom: 5%;
  }

  .likeToDesignImg{
    width: 100%;
    margin-bottom: 0px;
    /* height: 50%; */
  }

  .likeToDesignRightText h1, .likeToDesignRightText h3{
    writing-mode: horizontal-tb;
  }

  .likeToDesignRight {
    display: flex;
    flex-direction: column-reverse;
  }

  .freeTimeCont{
    padding: 5%;
  }

  .freeTimeText{
    width: 100%;
  }

  .freeTime{
    height: auto;
  }

  .freeTimeImgCont{
    flex-direction: column;
    height: auto;
  }

  .freeTimeImg{
    width: 100%;
  }
  .footerInfo{
    padding-left: 5%;
    padding-right: 5%;
  }
  
}