/* Container for menu */
.menubar {
  position: relative;
  z-index: 100;
}

/* Hamburger button */
.hamburger-icon {
  font-size: 1.2rem;
  position: fixed;
  left: 3%;
  top: 1.5em;
  color: black;
  padding: 0.3em 0.5em;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s ease;
}

.hamburger-icon:hover {
  color: rgb(250, 202, 27);
  /* background-color: rgba(253, 225, 66, 0.85); */
}

.hamburger-icon.active {
  color: rgb(250, 202, 27);
  transform: rotate(90deg);
}



/* Dropdown menu */
#myLinks {
  display: none; /* hidden by default */
  position: fixed; /* dropdown sticks relative to viewport */
  top: 4em; 
  left: 3%;
  /* background-color: rgba(253, 225, 66, 0.85); */
  /* border-radius: 2px; */
  padding: 0em 0;
  flex-direction: column; /* stack links vertically */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

/* Each link in dropdown */
#myLinks a {
  display: block;      /* new line for each */
  padding: 0.5em 1em;  /* spacing inside the dropdown */
  color: black;
  background-color: rgba(255, 255, 255, 0.704);
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  /* text-decoration: none; */
  /* transition: background 0.3s ease; */
}

#myLinks a:hover {
  background-color: rgba(250, 202, 27, 0.504);
  border-radius: 3px;
}

body{
    background-color: #FDF5EC ;
    /* background-color: #f3f2f2 ; */
}

.container{
    width: 50%;
    margin: 2rem auto;
    /* border-left: #000000 1px solid;
    border-right:#000000 1px solid; */
}

.bio-section {
    width: 60%;
    margin: auto auto;
    /* gap: 2rem */
}

.title-name{
    font-family: Verdana, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    width: 100%;
    /* color: #24583C; */
}

#highlight{
    /* background:
    url('image/texture-effect/test.png'); */
    background: linear-gradient(180deg, transparent 60%, rgb(253, 225, 66) 50%); 
    -webkit-box-decoration-break: clone; box-decoration-break: clone; 
    background-size: 100% 90%; 
    /* padding: 0.2em 0.1em;  */
    display: inline;
}

.self-intro-container{
    width: 100%;
    margin-top: 1rem;
}

.self-intro-container p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* margin: 0.7rem 0; */
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5rem;
}

.bio-work-experience {
    font-weight: 800;
} 

a {
    color: #000000;
    text-decoration: none;
    /* background: linear-gradient(to bottom, #fff19e 0, #fff19e 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: .29167rem .29167rem;
    transition: background-size .3s ease-in-out; */
}

.hover:hover{
    /* background-color: rgba(255, 195, 48, 0.2); */
    background-color: #fff19e;
    background-size: 0.4rem 100%;
    /* color: #ffc300; */
}


.contact-icon-container {
    width: 100%;
    padding: 0 0;
}

.contact-icon-container i {
    font-size: 1.3em;
    margin-right: 0.1em;
}

/* .bio-right-nav {
    width: 25%;
    margin-top: 8%;
}

.bio-right-nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 0.7rem;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    gap: 1rem;
} */

.main-nav-container {
    width: 60%;
    margin: 3rem auto 1.2rem auto;
    display: flex;
    justify-content:space-around;
    align-items: center;
    /* position: sticky; */
}

@media (max-width: 952px) {
  .main-nav-container {
    flex-direction: column; /* stack links vertically */
    width: 90%; /* make it a bit wider on small screens */
    gap: 0.5rem;  /* add spacing between links */
  }
}

/* Tablet adjustments (iPad 16 reference, around 768px) */
@media (max-width: 768px) {
  .container {
    width: 80%;
    margin: 1rem auto;
  }

  .bio-section {
    width: 80%;
  }

  .title-name {
    font-size: 1.8rem;
  }

  .self-intro-container p {
    font-size: 0.85rem;
    line-height: 1.4rem;
  }

  .main-nav-container {
    width: 80%;
    margin: 2rem auto 1rem auto;
  }

  footer {
    font-size: 0.8rem;
    margin: 1.5rem auto 2rem auto;
  }
}

/* Mobile adjustments (iPhone 17 reference, around 480px) */
@media (max-width: 480px) {
  .container {
    width: 90%;
    margin: 1rem auto;
  }

  .bio-section {
    width: 90%;
  }

  .title-name {
    font-size: 1.5rem;
  }

  .self-intro-container p {
    font-size: 0.8rem;
    line-height: 1.3rem;
  }

  .main-nav-container {
    width: 90%;
    margin: 1.5rem auto 1rem auto;
  }

  .contact-icon-container i {
    font-size: 1.2em;
  }

  footer {
    font-size: 0.75rem;
    margin: 1rem auto 1.5rem auto;
  }
}


.main-nav-container a{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 100;
    /* background: linear-gradient(to bottom, #fff19e 0, #fff19e 100%); */
    /* -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-size: 100% 80%;
    padding: 0.15em 0.1em; */
    /* background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: .29167rem .29167rem;
    transition: background-size .2s ease-in-out; */
    color: #959595;
}

.main-nav-container a:hover{
    color: #000000;
    font-weight: 400;
    /* background-size: 0.4rem 100%; */
    /* background: rgba(252, 192, 41, 0.28);
    padding: 0.15rem 0.15rem;  */
}

.main-nav-container a.active {
    color: #000000;
    font-weight: 400;
    /* background-size: 0.4rem 100%; */
    /* background: rgba(252, 192, 41, 0.28);
    padding: 0.15rem 0.2rem;  */
}

footer {
    width: 100%;
    margin: 2rem auto 3rem auto;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    /* background: linear-gradient(to right, #004aae 45%, #7aceff 55%); */
    background: linear-gradient(to left, #fc9313 40%, #fbd83d 60%);
    /* background-size: 100% 50%; */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* #description-for-page {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    text-align: center;
    margin: 1rem auto 1.2rem auto;
    color: #000000;
    width: 65%;
} */