/*light mode*/
:root {
  /* Hero (Title) */
  --hero-bg: #ff6195;
  --hero-text: #853aa5;
  --hero-accent: #ff4081;
  --bgicon-opacity: 1;
  --face-opacity: 1;

  --toggle-track: #ff4081;
  /* --toggle-track-active: #7700ab; */

  /* About Me */
  --about-bg: #f9f9f9;
  --about-text: #333333;
  --about-link: #0066cc;

  /* Portfolio */
  --portfolio-bg: #ff82b2;
  --portfolio-text: #2D2926;
  --portfolio-card-bg: #f9fafb;

  --portfolio-card-heading: #2D2926;
  --portfolio-card-text: #2D2926;

  --modal-bg: #f9fafb;
  --modal-text: #2D2926;
  --modal-button-bg: #ff00c3;
  --modal-button-text: #ffffff;

  --card-row-gap: 5rem;

  /* Blogs */
  --blogs-bg: #f9fafb;
  --blogs-text: #2D2926;
  --blogs-border: #dddddd;

  /* Contact */
  --contact-bg: #853aa5;
  --contact-text: #2D2926;
  --contact-highlight: #00aaff;
  
}

/*dark mode*/
.dark-mode {
  --hero-bg: #2D2926;
  --hero-text: #ff4081;
  --hero-accent: #ff79b0;
  --bgicon-opacity: 0.1;
  --face-opacity: 0.4;

  --toggle-track: #4a3da9;
  --toggle-track-active: #8a8a8a;

  --about-bg: #2D2926;
  --about-text: #f9fafb;
  --about-link: #3399ff;

  --portfolio-bg: #be6889;
  --portfolio-text: #dddddd;
  --portfolio-card-bg: #2D2926;

  --portfolio-card-heading: #dddddd;
  --portfolio-card-text: #bbbbbb;

  --modal-bg: #2D2926;
  --modal-text: #f9fafb;
  --modal-button-bg: #ff60da;
  --modal-button-text: #222222;

  --blogs-bg: #6c6159;
  --blogs-text: #f9fafb;
  --blogs-border: #333333;

  --contact-bg: #2D2926;
  --contact-text: #f9fafb;
  --contact-highlight: #66ccff;
}
.dark-mode img[src*="bgicon"],
.dark-mode #face {
  opacity: 0.7;       /* adjust to taste */
  transition: opacity 0.5s;
}
img[src*="bgicon"] {
  opacity: var(--bgicon-opacity);
  transition: opacity 0.5s;
}

#face {
  opacity: var(--face-opacity);
  transition: opacity 0.5s;
}

/* Hero (Title) */
.hero {
  background-color: var(--hero-bg);
  color: var(--hero-text);
}
.hero a { color: var(--hero-accent); }

/* About Me */
.about {
  background-color: var(--about-bg);
  color: var(--about-text);
}
.about a { color: var(--about-link); }

/* Portfolio */
.portfolio {
  background-color: var(--portfolio-bg);
  color: var(--portfolio-text);
}
.portfolio-card {
  background-color: var(--portfolio-card-bg);
}
.portfolio-list {
  gap: 1rem var(--card-row-gap);
}

/* Blogs */
.resume {
  background-color: var(--blogs-bg);
  color: var(--blogs-text);
  border-top: 1px solid var(--blogs-border);
}

/* Contact */
.contact {
  background-color: var(--contact-bg);
  color: var(--contact-text);
}
.contact-highlight {
  color: var(--contact-highlight);
}

/* Card text */
.card-content h3 {
  color: var(--portfolio-card-heading);
}
.card-content p {
  color: var(--portfolio-card-text);
}

/* Modal inner box */
.modal-content {
  background-color: var(--modal-bg);
  color: var(--modal-text);
}

/* Close button (inherits modal-text) */
.modal-close {
  color: var(--modal-text);
}

/* Modal action button */
.modal-button {
  background-color: var(--modal-button-bg);
  color: var(--modal-button-text);
}
.modal-button:hover {
  background-color: var(--accent);
  /* or darker variant */
}


/* Switch container */
.switch {
  position: relative;
  display: inline-block;
  width: 3.5rem;
  height: 1.8rem;
}

/* Hide native checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider track */
.slider {
  position: absolute;
  inset: 0;
  background-color: var(--toggle-track, #ddd);
  border-radius: 1rem;
  transition: background-color 0.3s ease;
}

/* Knob wrapper */
.knob {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.switch .slider .knob {
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch .slider .knob img {
  max-height: 100%;
  width: auto;
}

/* SVG inside knob */
.knob img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Checked state: track color */
.switch input:checked + .slider {
  background-color: var(--toggle-track-active, #666);
}

/* Checked state: slide knob */
.switch input:checked + .slider .knob {
  transform: translateX(1.7rem);
}




/* 1. Reset & Global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, 
body {
  margin: 0;             /* ensure no default margins */
  padding: 0;
  overflow-x: hidden;    /* disable sideways scroll */
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* 2. Navigation */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.navbar ul {
  display: flex;
  justify-content: center;
  list-style: none;

  
  /* position: absolute; */
  /* left: 30vw; */
}
.navbar li + li {
  margin-left: 2rem;
}
.navbar a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-family: "Audiowide", sans-serif;
  padding: 1rem;
  transition: color 0.3s;
}
.navbar a:hover {
  color: #ee2978;
}

.navbar ul li a[href="#contact"] {
  border: 3px solid #ee2978;   
  padding: 0.5rem 1rem 0.5rem 1rem;  
  border-radius: 15px;  
  /* position: absolute; */
  /* top: 25%;    */
  background-color: rgba(255, 255, 255, 0.7);  
  /* font-weight: bold;          */
  color: 333; 
}
.navbar ul li a[href="#contact"]:hover {
  background-color: rgb(45, 41, 38, 0.7);
  color: rgb(255, 255, 255, 0.7);
}


/* 3. Hero & Wave Animation */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #2D2926; */
}
#wave-title {
  font-size: 15rem;
  font-family: "Audiowide", sans-serif;
  /* color: #ee2978; */
  display: flex;
  position: relative;
  top: 0.9em;
  z-index: 11;
}
#wave-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: jump 4s ease-in-out infinite alternate;
}
/* delay each letter */
#wave-title span:nth-child(1)  { animation-delay: 0.1s; }
#wave-title span:nth-child(2)  { animation-delay: 0.2s; }
#wave-title span:nth-child(3)  { animation-delay: 0.3s; }
/* …continue per letter… */
#wave-title span:nth-child(9)  { animation-delay: 0.9s; }

@keyframes jump {
  0%   { opacity: 0; transform: translateY(1em); }
  50%  { opacity: 1; transform: translateY(-0.2em); }
  100% { opacity: 1; transform: translateY(0); }
}

#face {
    position: absolute;
    z-index: 50;
    width: 46em;
    height: auto;
    opacity: 1;
    z-index: 10;
    max-width: 100vw;
    overflow-x: hidden;
}
.portfolio_bg {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0.65;
  z-index: 1;

  max-width: 100vw;
  overflow-x: hidden;
}
.portfolio_black {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0.65;
  z-index: 1;
  transform: translate(-50%,-50%);
  left: 50%;

  max-width: 100vw;
  overflow-x: hidden;
}

#bgicon1 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 17.5em;
  height: auto;
  top: 21.5%;
  left: 13.5%;
}
#bgicon2 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 7em;
  height: auto;
  top: 16.5%;
  left: 32%;
}
#bgicon3 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 9em;
  height: auto;
  top: 55.5%;
  left: 8.7%;
}
#bgicon4 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 3.3em;
  height: auto;
  top: 42.5%;
  left: 17%;
}
#bgicon5 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 2.2em;
  height: auto;
  top: 46%;
  left: 21%;
}
#bgicon6 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 12em;
  height: auto;
  top: 50.5%;
  left: 29.5%;
}
#bgicon7 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 4em;
  height: auto;
  top: 78%;
  left: 4.5%;
}
#bgicon8 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 13em;
  height: auto;
  top: 77%;
  left: 17%;
}
#bgicon9 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 3.4em;
  height: auto;
  top: 94.4%;
  left: 9%;
}
#bgicon10 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 1.5em;
  height: auto;
  top: 92%;
  left: 27%;
}
#bgicon11 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 2.7em;
  height: auto;
  top: 22%;
  left: 65%;
}
#bgicon12 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 16em;
  height: auto;
  top: 28%;
  left: 77.5%;
}
#bgicon13 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 3.5em;
  height: auto;
  top: 8%;
  left: 91.5%;
}
#bgicon14 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 2em;
  height: auto;
  top: 10.7%;
  left: 96.4%;
}
#bgicon15 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 4em;
  height: auto;
  top: 34.5%;
  left: 93%;
}
#bgicon16 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 5em;
  height: auto;
  top: 55%;
  left: 70%;
}
#bgicon17 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 20em;
  height: auto;
  top: 78.5%;
  left: 85%;
}
#bgicon18 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 3.3em;
  height: auto;
  top: 94%;
  left: 92%;
}
#bgicon19 {
  position: absolute;
  transform: translate(-50%,-50%);
  width: 6em;
  height: auto;
  top: 35%;
  left: 64%;
}
img[id^="bgicon"] {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: none; /* JS handles easing */
  pointer-events: none;
}


/* 4. Section Styles */
.section {
  padding: 5rem 2rem;
  min-height: 70vh;
}
.about    { font-family: "Ubuntu", sans-serif; font-weight: 400; font-style: normal;}
.portfolio{ font-family: "Ubuntu", sans-serif; font-weight: 400; font-style: normal; color: white;}
.resume   { font-family: "Ubuntu", sans-serif; font-weight: 400; font-style: normal;}
.contact  { font-family: "Ubuntu", sans-serif; font-weight: 400; font-style: normal; color: white;}
.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.5rem;
}
.section p {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.2rem;
  /* color: #555; */
}


.about {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* center items as a group */
  align-items: center;
  gap: 2rem;
  padding: 5rem 2rem;
}

/* Heading stays full-width & centered */
.about h2 {
  flex: 1 1 100%;
  text-align: center;
  margin-bottom: 2rem;
}

/* Text block */
.about .left {
  flex: 1 1 300px;      /* at least 300px, can grow */
  max-width: 700px;     /* never wider than 500px */
  text-align: left;
}

/* Portrait image */
.about #portrait {
  flex: 1 1 300px;      /* at least 300px, can grow */
  max-width: 30em;      /* same ~400px cap you had */
  width: 100%;
  height: auto;
  display: block;
  padding-right: 3em;
  padding-left: 3em;
}



@media (max-width: 800px) {
  .about {
    flex-direction: column;   /* force stacking */
    gap: 1.5rem;              /* reduce space */
  }

  .about .left,
  .about #portrait {
    flex: none;               /* disable flex sizing */
    width: 100%;              /* full width */
    max-width: none;          /* remove the 25em cap on the image */
  }

  :root {
    --card-row-gap: 1rem;
  }

}

@media (max-width: 1300px) {
  img[id*="bgicon"],
  img[src*="bgicon"] {
  display: none;}
}


#resume_button {
  width: 15em;
  height: auto;
  transition: transform 0.3s ease;
}
#resume_button:hover {
  transform: translateY(-10px);
}

#contact_font {
  font-family: "Ubuntu", sans-serif; font-weight: 400; font-style: normal;
  color: white;
}

/* 5. Responsive Adjustments */
@media (max-width: 1300px) {
  #wave-title { font-size: 4rem; }
  .navbar ul { flex-direction: column; }
  .navbar li + li { margin-left: 0; margin-top: 0rem; }
   #resume_button {
    display: block;       /* allows auto-margins */
    margin: 1em auto;    
  }
}

.navbar a.active {
  color: #ee2978;
  border-bottom: 2px solid #ee2978;
  font-family: "Audiowide", sans-serif;
}

.navbar {
  position: fixed;           /* stick it to the viewport */
  top: 0;
  left: 0;
  width: 100%;               /* span full width */
  display: flex;
  justify-content: center;   /* center the <ul> horizontally */
  align-items: center;
  height: 4rem;              /* match your design */
  padding: 0 2rem;           /* left/right gutter */
  /* background: var(--nav-bg);  */
  z-index: 1000;             /* float above other content */
}

.nav-brand {
  position: absolute;        /* remove from flow, but relative to .navbar */
  left: 0rem;                /* gutter from the left edge */
  font-family: 'Audiowide', sans-serif;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--nav-text, #333);

  max-width: 100vw;
  overflow-x: hidden;
}


/* Centered list of links */
/* .nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  display: flex;
  align-items: center;
} */


/* Only on mobile (< md), override Bootstrap’s default collapse behavior */
@media (max-width: 767.98px) {
  .navbar .navbar-collapse {
    position: absolute;
    top: 100%;               /* directly beneath the fixed navbar */
    left: 0;
    margin-top: 2em;
    width: 100%;
    background-color: rgb(255, 255, 255, 0.7); 
    z-index: 999;               /* sit above page content */
  
    max-width: 100vw;
    overflow-x: hidden;
  }

  .navbar ul li a[href="#contact"] {
    border: 3px solid #ee2978;
    background-color: none;
    padding: 0rem 1rem 0rem 1rem;
  }

  .navbar a.active {
    color: #ee2978;
    border-bottom: none;
    font-family: "Audiowide", sans-serif;
  }

  .left {
    font-size: 0.85rem !important;
  }

  /* Ensure the container is a positioning context */
  .navbar .container-fluid {
    position: relative;
  }

  .modal-content {
    font-size: 0.85rem;           /* Smaller text */
    padding: 3rem 1rem 0rem 1rem !important;
  }

  .modal-content h2 {
    font-size: 1rem;
  }

  .modal-content img,
  .modal-content video {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
  }

  #modal-title {
    font-size: 1.7rem !important;
  }

  .media_explanation {
    font-size: 0.8rem !important;
  }

  .modal-desc {
    font-size: 0.85rem;
  }

  .bullet_points {
    font-size: 0.85rem !important;
    display: list-item;
    list-style-type: disc;
    text-align: left;
    margin-left: 1.5em;
  }

  .skills {
    display: inline; 
    border: 2px solid #853aa5 !important; 
    padding: 0.5rem 1em 0.5em 1em;
    border-radius: 70px;
  }

  .tools {
    display: inline; 
    border: none !important; 
    padding: 0.5rem 1em 0.5em 1em;
    background-color: rgb(133, 58, 165, 0) !important;
  }

}


/* Position context is still .container-fluid (relative) */
.navbar-toggler, 
.switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;  /* above the collapse panel */

  max-width: 100vw;
  overflow-x: hidden;
}

/* Fine-tune horizontal offsets */
.navbar-toggler {
  right: 5rem;      /* space to make room for the switch */
  color: #ff4081;
}

.switch {
  right: 0.1rem;      /* align exactly where your switch sits */
}



.portfolio-samples {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
  row-gap: 5rem;
}


.portfolio-card {
  display: flex;
  flex-direction: row;
  align-items: center;  
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.portfolio-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* 1) Left side: fixed or proportional image box */
.portfolio-card img {
  flex: 0 0 40%;           /* image takes up 40% of card width */
  width: 20em;
  height: 15em;
  object-fit: cover;
}

/* 2) Right side: card content fills remaining space */
.card-content {
  flex: 1;                 /* fill available space */
  padding: 1rem;
}

.card-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.card-content p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
}


@media (max-width: 1000px) {
  .portfolio-samples {
    grid-template-columns: 1fr;
  }

  .portfolio-card {
    flex-direction: column;
  }

  .portfolio-card img {
    flex: 0 0 auto;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;  /* optional separator */
  }

  .card-content {
    padding: 1rem 0;
  }
}

/* #resumeLink {
    position: absolute;
    text-align: center;
} */

.category {
  grid-column: 1 / -1;     /* Span from first to last column */
  text-align: left;      /* Center the text */
  margin: 5rem 0 0rem;  
  font-size: 1.5rem;
}

.category p {
  font-size: 1.1rem;
  /* color: #333; */
}

/* Modal backdrop */
.modal {
  display: none;                /* hidden by default */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  justify-content: center;      /* center horizontally */
  align-items: center;          /* center vertically */
  z-index: 2000;
  
}

/* Modal inner box */
.modal-content {
  /* background: #fff; */
  border-radius: 8px;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.15rem;
  max-width: none;
  width: 90%;
  max-height: none;
  height: 90%;
  overflow-y: auto;
  padding: 7rem;
  position: relative;
  text-align: left; 
}

/* Close button */
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;

  max-width: 100vw;
  overflow-x: hidden;
}

/* Modal image */
#modal-image {
  width: 50%;
  max-width: 50%;
  display: block;
  box-sizing: border-box;
  margin: 1rem auto;      /* center it if you want */
}

#modal-media video {
  width: 40em;
  height: auto;
  padding-top: 5em;
  padding-bottom: 5em;
}

#modal-title {
  font-size: 3rem;
}

.media_explanation {
  font-size: 1.1rem;
}

.bottom_text {
  padding-bottom: 10em;
}

.main_img {
  width: 40em;
  height: auto;
  margin-top: 5em;
  margin-bottom: 5em;
}

.site_main {
  width: 30em;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 2em;
  /* padding: 5em 0em 5em 0em; */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
.site_ss {
  width: auto;
  height: 10em;
  margin-right: 2em;
  margin-top: 2em;
  margin-bottom: 2em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}
.title {
  font-size: 1.5rem;
  color: #ff4081;
  font-weight: bold;
}
.bullet_points {
  font-size: 1.1rem;
  display: list-item;
  list-style-type: disc;
  text-align: left;
  margin-left: 1.5em;
}
.solutions{
  font-size: 1.1rem;
  color: #853aa5;
  text-align: left;
  margin-left: 5em;
}
.solutions::before {
  content: "➜ ";        /* Unicode arrow */
  color: #853aa5;         /* arrow color */
  font-size: 1em;       /* arrow size */
  margin-right: 0.3em;  /* space after arrow */
}
.disclaimer {
  font-size: 0.8rem;
  color: rgb(125, 125, 125);
}

.logo_drafts {
  width: 17em;
  height: auto;
  padding: 5em 1em 5em 0em;
}

.skills {
  display: inline; 
  border-style: solid; 
  border-color: #853aa5;
  border-width: 5px;
  padding: 0.5rem 1em 0.5em 1em;
  border-radius: 70px;
}

.tools {
  display: inline; 
  border-bottom: 5px solid #853aa5;
  padding: 0.5rem 1em 0.5em 1em;
  background-color: rgb(133, 58, 165, 0.3);
}

.same_height {
  width: auto;
  height: 30em;
  padding: 5em 1em 5em;
}

#media-pose-sheet {
  width: 35em;
  height: auto;
  padding-bottom: 5em;

}

.modal-button {
  display: inline-block;
  margin-top: 5em;
  margin-bottom: 7em;
  padding: 0.5rem 1rem;
  background: #ff6195;
  color: #fff;
  font-family: "Ubuntu", sans-serif;
  text-decoration: none;
  border-radius: 4px;
}
.modal-button:hover {
  background: #ef417b;
}

#linkedin {
  /* position: absolute; */
  font-size: 1.5rem;
  font-family: "Ubuntu", sans-serif; font-weight: 400; font-style: normal;
  color: #ff6195;
  height: auto;
  transition: transform 0.3s ease;
  text-decoration-line: none;
}
#linkedin:hover {
  transform: scale(1.2);
  color: #ff95b8;
}