.navbar .nav-link {
  color: #ffef86 !important;
  transition: all 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #3d3b3c !important;
  background-color: #ffef86;
  border-radius: 8px;
}

body.home {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
    url("../img/background2.png");
  background-size: cover;      /* fills entire screen */
  background-position: center; /* keeps it centered */
  background-repeat: no-repeat;
  background-attachment: fixed; /* subtle parallax effect */
}

.btn-music {
  background: none;
  border: none;
  color: #ffef86;      /* default yellow */
  font-size: 2.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.btn-music:hover,
.btn-music.active {
  transform: scale(1.1); /* subtle zoom on hover/active */
  color: #ffef86;        /* stays yellow */
}

.btn-music i {
  pointer-events: none; /* click goes to button */
}


main {
  padding-top: 120px; /* adjust this to match your navbar height */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffef86' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

nav,
footer {
    font-family: "Parkinsans", sans-serif;
    background-color: #3d3b3c;
    color: #ffef86;
}



a.logo-text:hover,
.text:hover {
  text-decoration: none; 
  color: #ffef86;
}

/* body {
    background-color: #ffef86 !important;
}

main {
    background-color: #ffef86;
    
} */

main h1 {
    font-family: "Ribeye", serif;
    color:#3d3b3c;
}

main h2,
main h3,
main h3 {
    color:#3d3b3c;
    font-family: "DM Serif Text", serif;
}

p {
    font-family: "Parkinsans", sans-serif;
}

a.nav-link {
    color: #ffef86;
}

ul.navbar-nav:hover  {
  background-color: none;
}

a.nav-link:hover {
  background-color: #676365;
  color: #ffef86;
}

p.card-text{
    color: #ffef86;
}
.btn {
    background-color: #3d3b3c;
    color: #ffef86;
    text-decoration: none !important;
}

div.card.card-body a {
  text-align: center;
}

.btn:hover {
  background-color: #ffef86;
  color:  #3d3b3c;
  text-decoration: none;
  border: 2px solid #3d3b3c;
} 

a,
.btn a {
  text-decoration: none;  
  color: inherit; 
}
.text-link {
    color: inherit;
  }

.logo-text {
    display: flex;
    align-items: center;
    text-decoration: none;  
    color: inherit;
  }
  
  
  .logo {
    width: auto;  
    height: 90px;
    margin: 24px;  
  }
  

  .text {
    display: flex;
    flex-direction: column;
  }

  .name {
    font-size: 24px;
    font-weight: 700;
    font-family: "Parkinsans";
    text-transform: uppercase;

  }
  
  .tagline {
    font-size: 14px;
    font-style: italic;
  }

  .jumbotron,
  .contact {
    /* background-color: #ffef86; */
    display: flex;
    align-items: center; 
    height: 100vh;
  }

  #typing-text {
    font-size: 36px;
    color: #333;
    display: inline-block;
    border-right: 2px solid #333; 
    padding-right: 5px;
    white-space: nowrap;
    overflow: hidden;
  }

  ul.nav {
    font-size: 2rem;
  }
  .card-img-top {
    height: 100px;          
    object-fit:contain;      
    width: 100%;           
  }

  .card-img-project {
    height: 200px;          
    object-fit:contain;      
    width: auto;       
  }
  .card-skills {
    background-color: #ffef86;
    border-radius: 10px;
    /* border: #3d3b3c 0.15rem solid; */
  }

  h3.card-title {
    text-align: center;
    font-family: "Parkinsans", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.5rem 0;
  }

.carousel-control-prev-icon,
.carousel-control-next-icon {
  color: #ffef86;
  background-color:  #3d3b3c;
  border-radius: 50%;  
  width: 50px;  
  height: 50px; 
  transform: scale(1.5); 
}


.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  transform: scale(1.6); 
  background-color:#3d3b3c; 
  color: #ffef86;
}

span {
  font-weight: 700px;
}

ul.dropdown-menu {
  background-color: #3d3b3c;
  color:#ffef86;
 
}

a.dropdown-item:hover {
  background-color: #676365;
  color:#ffef86

}
a.dropdown-item {
  color:#ffef86;
}

.myskills,
.myroles {
  font-style: italic;
  font-weight: 700;
}

.project-card {
  background-color: #3d3b3c;
  color: #ffef86;
}

.li {
  font-family: "Parkinsans";
}

.project-description {
  text-align: center;
}

hr {
  background-color: #3d3b3c;
}

.typing-text::after {
  content: "|";
  animation: blink 0.7s infinite;
  margin-left: 5px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.tech-badge {
  background-color: #f0f0f0; /* white */
  color: #3d3b3c;            /* dark grey font */
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* subtle depth */
}

.tech-badge:hover {
  background-color: #ffffff; /* light grey on hover */
  cursor: default;            /* non-clickable */
}

.card-projects {
  display: flex;
  flex-direction: column;
  height: 100%; /* makes card take full available height */
  background-color: #ffef86;
  border-radius: 10px;
}

/* Active/open accordion header */
.accordion-button:not(.collapsed) {
  background-color: #ffef86; /* your color here */
  color: #3d3b3c;            /* text color */
}

/* Optional: remove default blue focus box */
.accordion-button:not(.collapsed),
.accordion-button:not(.collapsed):focus {
  box-shadow: none;
}

/* Closed state */
.accordion-button.collapsed {
  background-color: #f8f8f8;
  color: #333333;
}

.badges {
  background-color: #ffef86; /* white */
  color: #3d3b3c;            /* dark grey font */
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* subtle depth */
}

.badges:hover {
  background-color: #f0f0f0; /* light grey on hover */
  cursor: default;            /* non-clickable */
}