/* Importing fonts */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

/* Universal styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: var(--main-font);
  color: var(--color);
  outline: none;
  scroll-behavior: smooth;
  

}

/* Root Variables */
:root {
  --border-color: rgb(112, 112, 112);
  --main-color: rgb(30, 30, 30);
  --secondary-color: rgba(51, 51, 51, 0.6);
  --main-font: "bebas Neue";
  --color: rgba(184, 184, 184, 0.89);
  --after-width: 0%;
}
/* Progress Bar, width = calc(percentage - 22%) */
.bar65{
  --bar-width: 43%;
}
.bar70{
  --bar-width: 48%;
}
.bar75{
  --bar-width: 53%;
}
.bar80{
  --bar-width: 58%;
}


/* Pseudo-elements */
::after {
  width: var(--after-width);
}
button{
  appearance: none;
  background-color: white;
}
/* HTML & Body */
html {
  overflow-x: hidden;


}

body {
  background-color: var(--main-color);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-x: hidden;
  height: 100%;
}

/* Header Container */
.headerContainer {
  z-index: 1000;
  position: fixed;
  background-color: var(--secondary-color);
  backdrop-filter: blur(10px);
  top: 0;
  left: 0;
  width: 100%;
  
  padding: 1.5% 0 1.5% 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2.5vw;

}

/* Name Section in Header */
.nameTopLeft {
  position: relative;
  margin-left: 4%;
  border-bottom: 2px solid white;
  transition: all 0.5s;
  text-shadow: 2px 0px var(--secondary-color), -2px 0px var(--secondary-color), 1px 1px var(--secondary-color), -1px -1px var(--secondary-color),
    -1px 1px var(--secondary-color), 1px -1px var(--secondary-color);
}

.nameTopLeft:hover {
  border-color: var(--main-color);
  transform: scale(1.1);
  color: rgb(88, 87, 87);
  text-shadow: 2px 0px var(--secondary-color), -2px 0px var(--secondary-color), 1px 1px var(--secondary-color), -1px -1px var(--secondary-color),
    -1px 1px var(--secondary-color), 1px -1px var(--secondary-color);
}

.nameTopLeft:hover span {
  color: var(--color);
  text-shadow: 2px 0px var(--secondary-color), -2px 0px var(--secondary-color), 1px 1px var(--secondary-color), -1px -1px var(--secondary-color),
    -1px 1px var(--secondary-color), 1px -1px var(--secondary-color);
}

.nameTopLeft span {
  color: rgb(88, 87, 87);
  transition: all 0.5s;
}

/* Navigation Container */
.navContainer {
  position: fixed;
  display: flex;
  text-align: right;
  right: 0;
  top: 3.5vh;
  z-index: 2000;
  font-size: 2.5vw;
}
.navBtn{
  display:none;
}

/* Navigation Items */
.navItem {
  border-bottom: 2px solid white;
  margin-right: 4.5vw;
  transition: all 0.5s, border 1s;
}

.navItem:hover {
  transform: scale(1.2);
  color: rgb(88, 87, 87);
  text-shadow: 2px 0px var(--secondary-color), -2px 0px var(--secondary-color), 1px 1px var(--secondary-color), -1px -1px var(--secondary-color),
    -1px 1px var(--secondary-color), 1px -1px var(--secondary-color);
  border-color: var(--main-color);
}

/* Section Styling */
section {
  height: 100vh;
  min-width: 100vw;
}

/* Home Section */
#Home {
  position: relative;
  display: flex;
  align-items: center;
}

/* Home Image Styling */
#homeImg {
  position: relative;
  border-radius: 50%;
  z-index: 50;
  width: 25vw;
  height: 25vw;
  border: 2px solid;
  border-color: var(--secondary-color);
  transition: transform 1s, border-color 1s;
  left: 2vw;
}

#homeImg img {
  width: 100%;
  height: 100%;

  border-radius: 50%;
  object-fit: cover;
  
  position: relative;
  cursor: pointer;
  object-position: 0 20%;

}

#homeImg:hover {
  transform: scale(1.1);
  border-color: var(--color);
}

/* Name Content in Home Section */
.nameContent {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-left: 15vw;
  padding: 5vw 15vw 5vw 13vw;
  width: 85%;
  height: 24vw;
  background-color: var(--secondary-color);
  font-size: 6vw;
  text-align: center;
  align-items: center;
  justify-content: center;
  text-shadow: 2px 0px var(--secondary-color), -2px 0px var(--secondary-color), 1px 1px var(--secondary-color), -1px -1px var(--secondary-color),
    -1px 1px var(--secondary-color), 1px -1px var(--secondary-color);
  z-index: 25;
  left: initial;
  right: initial;
}

/* Name Hover Animation */
#nameHover {
  transition: all 0.3s;
}

#nameHover:hover {
  font-size: 6.5vw;
  color: rgb(88, 87, 87);
}

.nameContent::after {
  content: "";
  position: absolute;
  height: 100%;
  border-top: 2px solid rgb(88, 87, 87);
  border-bottom: 2px solid rgb(88, 87, 87);
  inset: -2px;
  transition: all 2s;
}
#clickedText{
  direction: ltr;
  font-size: 2.5vw;
}

/* Skills Section */
#Skills {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;


}

/* Skills Container */
#skillsContainer {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-height: 76.5vh;
  font-size: 4vw;
  padding: 2% 0 2% 0;
  background-color: var(--secondary-color);

}

#skillsContainer div {
  position: relative;
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  width: 99%;
  gap: 2%;
}

/* Skill Progress Bars */
.skill {
  flex: 0 0 20%;
  text-align: right;
}

.progressBar {
  display: flex;
  background-color: var(--main-color);
  width:0;
  height: 7vh;
  border: 2px solid var(--border-color);
  font-size: 2vw;
  align-items: center;
  justify-content: center;
  transition: width 1s;
}

/* Section Title */
.sectionTitles {
  font-size: 3vw;
  position: relative;
  left: 1%;
}
/* section{
  min-height: ;
} */
/*Projects Section */
#Projects{
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-top: 6.5%;
}
#projectsContainer{
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-color);
  justify-content: space-around;
  align-items: center;
}
.projectContainer{
  width: 30%;
  height: 80%;
  background-color: var(--main-color);
  border-radius: 5px;
  box-shadow: 1px 2px 10px black;
  padding: 1%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: all 2s;
}
.projectInfoContainer > p{
  text-align: center; 
  font-size: 1.5vw; 
  text-decoration: underline;
}
.projectContainer a:hover{
  cursor: pointer;
  text-decoration: underline;
}
.projectImg{
  width: 100%;
  height: 50%;
  border-radius: 5px;
  box-shadow: 2px 1px 10px black;
  transition: transform .5s;
  cursor: pointer;
}
.projectImg img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.projectTitle{
  font-size: 2vw;
  text-align: center;
}

.projectImg:hover{
  transform: scale(1.02,1.02);
  border: 2px solid white;
}
.projectInfoContainer{
  width: 100%;
  height: 40%;
  background-color: var(--secondary-color) ;
  border-radius: 5px;
  margin-top: 3%;

}
.projectInfo{
  text-align: center;

}
.videoWindow{

  width: 100vw;
  height: 100vh;

  display:none;

  position: absolute;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.747);

}
.videoContent{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75%;
}
#videoPlayer{
  width: 100%;
  border-radius: 5px;
}

.closeBtn{
  position: absolute;
  right: 3vw;
  top: 3vh;
  scale: 5;
  cursor: pointer;
}
/* Contact Section */
#Contacts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
  padding-top: 2%;
}

#contactContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Form Section */
#Form {
  box-shadow: 2px 1px 10px black;
  background-color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  padding: 5%;
  align-items: center;
  border-radius: 20px;
  justify-content: center;
  gap: 20px;
  width: 50vw;
  height: 100%;
}

#Form input, textarea {
  border-radius: 5px;
  width: 100%;
  color: black;
  font-size: larger;
  padding-left: 0.5%;
}

#Form button {
  width: 30%;
  padding: 1%;
  border-radius: 5px;
  color: var(--main-color);
  transition: all 0.2s;
  cursor: pointer;
  font-size: 2em;
}

#Form button:hover {
  transform: scale(1.1, 1.1);
}

/* Hidden Class */
.hidden {
  display: none;
}
.projectContainer .showVideo{
  display: flex;
}
/* Logo Container */
#LogoContainer {
  justify-content: left;
  width: 50%;
  display: flex;
  align-items: center;
}

#LogoContainer i {
  text-align: left;
  font-size: 4vw;
  transition: all .5s;
}

#LogoContainer i:hover {
  transform: scale(1.1, 1.1);
}

/* Animations */
#Home .animatedDiv {
  transition: all 1s;
  transform: translateX(100vw);
  align-items: center;
}

#Contacts .animatedDiv {
  transition: all 1s;
  transform: translateX(-100vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  justify-content: center;
  align-items: center;
}

#Home .sectionAnimation, #Contacts .sectionAnimation{
  transform: translateX(0);
}
.sectionAnimation{
  opacity: 1;
}

.progressBarAnimation{
  width: var(--bar-width);
}
/*Media Queries*/

@media only screen and (max-width: 600px) {
.headerContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%;
    z-index: 1000;
    background-color: var(--secondary-color);
    backdrop-filter: blur(10px); /* Optional */
    font-size: 6vw;
    padding: 4% 2% 4% 2%;
    overflow: visible;
}

.navContainer{
  margin: 0;
  text-align: center;
  justify-content: flex-end;
  width: 40%;
  max-height: 0;
  flex-direction: column;
  background-color: var(--secondary-color);
  right:0;
  top: 9.89%;
  border-radius: 0 0 0 10px;
  padding: 2% 0 0 0;
  backdrop-filter: blur(10px);
  font-size: 7vw;
  z-index: 99;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  transition: max-height 0.5s ease, opacity 0.5s ease, border-color 0.2s ease, visibility 0.5s ease;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
.navBtn{
  display: block;
  position: absolute;
  right: 10.5%;
  font-size: 15vw;

}
.navContainer.expand{
  visibility: visible;
  opacity: 1;
  max-height: 250px;
  border-color: var(--secondary-color);

}
.navItem{
  margin: 0;
  border-bottom-left-radius: 5px;
  border-color: var(--secondary-color);
  opacity: 0;
  transition: opacity .4s;
}
.navContainer.expand .navItem{
  opacity: 1;
}

.navItem:hover{
  transform: none;
  border-color: white;
}
  #homeImg {
  width: 28vw;
  height: 40vw;
  left: 2vw;
}

/* Name Content in Home Section */
.nameContent {
  padding:2% 0 2% 17%;
  width: 85%;
  height: 40vw;
  font-size: 7vw;
  text-align: unset;

}


#clicked{
  width: 108%;
  height: 100%;
  margin-left: -48%;
  padding: 2% 2% 2% 5%;
  border-radius: 5px;

}
#clickedText{
  font-size: 3.75vw;
  height: 100%;
}
.sectionTitles{
  font-size: 15vw;
}
#skillsContainer{
  gap: 20px;
  justify-content: space-around;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  font-size: 8vw;
  padding: 0 5% 0 5%;
}
#Projects{
  min-height: 1126px;
  justify-content: flex-end;
}
.progressBar{
  font-size: 7vw;
}

.projectContainer{
  width: 70%;

}
#projectsContainer{
  flex-direction: column;
  height: 82%;
  gap: 5%;
  padding: 5% 0 5% 0;
}
.projectTitle{
  font-size: 5vw;
}
.projectInfoContainer > p{
  text-align: center; 
  font-size: 3vw; 
  text-decoration: underline;
}
#Form button{
  width: 50%;
}
#Contacts{
  gap: 5%;
}
#Contacts h1{
  font-size: 10vw !important;
}
#Form{
  width: 70vw;
}
#Form textarea{
height: 11vh;

}
#LogoContainer{
  flex-direction: column;

  justify-content: center;
  align-items: center;
  width: 100%;

}
#LogoContainer i{
  font-size: 10vw;
}
#LogoContainer p{
  width: 50%;
  justify-content: space-around;
  font-size: 7vw !important;
  text-align: center;
}

.projectContainer{
  height: fit-content;
}
.projectsContainer{
  height: fit-content;
}
.videoWindow{
  height: 120vh;
}
.videoContent{

  width: 90%;
}
#videoPlayer{
  width: 100%;

}

.closeBtn{

  right:4vw;
  
}
.projectInfoContainer{
  padding: 2% 0 2% 0;
  height: fit-content;
}
}