* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  flex-wrap: wrap;
}
.navigation{
  background-color: #A288A6;
  display: flex;
  align-items: center;
  padding: 30px;
  gap: 100px;
  justify-content: space-between;
}
.navigationlink{
  list-style: none;
  display: flex;
  font-size: 28px;
}
.navigationlink li{
  display: inline;
  margin-right: 50px;
}
.navigationlink a{
  text-decoration: none;
  color: #FFFFFF;
}
.hamburger {
  display: none;
  font-size: 30px;
  cursor: pointer;
  color: #FFFFFF;
}
.close-btn {
  display: none;
  color: #ffffff !important;  
  font-weight: bold;
  background: transparent;
  border: none;
  cursor: pointer;
}

a{
  text-decoration: none;
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .navigationlink {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 20px;
    background-color: #A288A6;
    padding: 10px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.35);
    border-radius: 10px;
    z-index: 10;
  }
  .navigationlink.show {
    display: flex; 
  }
  .navigationlink .close-btn {
    display: block;                
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 0;
    color: #ffffff !important;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 8px;                   
  }
  .navigationlink.show { 
    padding-top: 44px; 
  }
  .hamburger {
    display: block;
  }
}
html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}
p{
  padding-top: 20px;
  font-size: 20px;
  line-height: 2;
}
.intro{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px;
  padding: 165px 70px;
  max-width: 100%;
  overflow: hidden;
}
.introdescription{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 64px;
  color: #5E3B63;
  font-weight: bold;
  flex: 1 1 480px;
  font-size:clamp(32px, 10vw, 65px);
}
.profile-pic {
  width: clamp(300px, 10vw, 300px);
  height: 300px;
  max-width: 100%;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border-color: #A288A6;
  border-width: 10px;
  border-style: solid;
}
.loading-bar {
  width: clamp(300px, 100vw, 500px);
  height: auto;
  max-width: 100%;
  align-self: flex-end;
}
.projectimg{
  width: clamp(550px, 100vw, 700px);
  height: auto;
  max-width: 100%;
  flex: 0 0 auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
@media (max-width: 768px) 
{
  .intro {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .introdescription {
    align-items: center;
    text-align: center;
  }
  .loading-bar {
    width: 100%;
    max-width: 400px;
    transform: scale(1.3);
    height: auto;
    padding-top: 20px;
  }
  .profile-pic{
    width: 100%;
    height: 100%;
  }
  .projectimg{
    width: 100%;
  }
  p{
    font-size: 18px;
    max-width: 300px;
  }
}
.project1, .project2, .project3 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 100px;
  text-align: center;
}
@media (max-width: 768px) {
  .project1, .project2, .project3 {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 90px;
  }
  .projectdesc {
    max-width: 80%;
    font-size: 18px;
    line-height: 2;
    text-align: center;
  }
  .projectimg {
    width: 100%;
    height: auto;
  }
  .buttons {
    gap: 24px;
    flex-wrap: wrap;
  }
}
.divider{
  color: #A288A6;
  height: 25px;
  background-color: #A288A6;
  border: none;
}
.underline{
  height: 3px;
  background-color: #FFFFFF;
  border: none;
}
h1{
  padding-bottom: 10px;
  padding-top: 40px;
}
.mainbody{
  display: flex;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-content: center;
}
.about{
  background-color: #7B5D87;
  padding: 70px;
  color: #FFFFFF;
  flex: 1 1 50%;
}
.skills{
  background-color: #5E3B63;
  padding: 50px;
  color: #FFFFFF;
  flex: 1 1 50%;
}
.skillsbody{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  padding: 50px;
}
.skill-card { 
  perspective: 1000px; 
  width: 250px; 
  height: 250px;
  border-radius: 50px; 
  cursor: pointer; 
  }
.card-inner { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  transition: transform 0.6s; 
  transform-style: preserve-3d; 
  border-radius: 50px; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
}
.skill-card:hover .card-inner { 
  transform: rotateY(180deg); 
} 
.card-face { 
  position: absolute; 
  inset: 0; 
  padding: 10px 28px;
  border-radius: 50px; 
  backface-visibility: hidden; 
  display: grid; 
  place-content: center; 
  text-align: center; 
}
.frontend{ 
  background:#A288A6; 
  color:#fff; 
}
.design{ 
  background:#AE899F; 
  color:#fff; 
}
.backend{ 
  background:#7B5D87; 
  color:#fff; 
}
.framework{
  color: #fff;
  background: #946c84;
}
.frontend-back{ 
  background:#8E7597; 
  color:#fff; 
  transform: rotateY(180deg); 
}
.framework-back{
  background:#815671;
  color:#fff;
  transform: rotateY(180deg);
}
.design-back{ 
  background:#997487; 
  color:#fff; 
  transform: rotateY(180deg); 
}
.skillstitle{
  font-size: 28px;
}
.backend-back{ 
  background:#6B4E76; 
  color:#fff; 
  transform: rotateY(180deg); 
}
.smalltext{
  padding-top: 30px;
  font-size: 12px;
}
.projects{
  color: #5E3B63;
  text-align: center;
}
.projectdiv{
  height: 3px;
  background-color: #5E3B63;
  border: none;
  width: 500px;
  margin: 5px auto;
}
h2{
  padding-top: 30px;
  padding-bottom: 20px;
}
.projectdesc{
  padding-bottom: 30px;
  max-width: 950px;
  margin: 5px auto;
}
.projectdiv2{
  height: 1px;
  background-color: #5E3B63;
  border: none;
  width: 1200px;
  margin: 5px auto;
}
.buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  padding-bottom: 30px;
}
button{
  color: #ffffff;
}
.left{
  border-radius: 50px;
  color: #FFFFFF;
  background-color: #7B5D87;
  border: none;
  padding: 20px 80px;
  margin: 10px;
  font-size: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.right{
  border-radius: 50px;
  color: #FFFFFF;
  background-color: #AE899F;
  border: none;
  padding: 20px 80px;
  font-size: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.contact{
  background-color: #AE899F;
  padding: 30px 75px;
  text-align: center;
  color: #FFFFFF;
  line-height: 2;
}
.photos{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 20px;
}
#contactheader{
  font-size: 24px;
  padding: 0;
  font-weight: normal;
}
h5{
  font-weight:normal;
}
@media (max-width: 768px) {
  .about,
  .skills {
    flex: 1 1 100%; 
  }
}
.navigationlink .close-btn {
  color: #fff !important;
  -webkit-text-fill-color: #ffffff;  
  text-shadow: 0 0 0 #ffffff;        
  font-weight: 700;
  font-size: 24px;
  line-height: 1;

  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.contactdesc{
  font-size: 18px;
  margin: 0;
  padding: 0;
}