* { margin: 0; padding: 0; box-sizing: border-box; }

 img {
 max-width: 60%;
 }


/* Home Page */
    body {
      height: 100vh;
      background: #f5f0e8;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    p {
      font-family: "Roboto Slab", serif;
    }

    canvas {
      position: fixed;
      top: 0;
      left: 0;
      display: block;
    }

    /* Foreground content sits above the canvas */
    .content {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      gap: 0.6rem;
    }

    .content__label {
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: #999;
    }

    .content__name {
      font-size: clamp(3rem, 9vw, 8rem);
      font-weight: 400;
      color: #1a1a1a;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .content__role {
      font-size: clamp(0.85rem, 1.5vw, 1.1rem);
      color: #666;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* Nav Bar */
nav {
  background-color: #1a1a1a;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  position: relative;
  z-index: 10;
}

.nav__brand {
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__links {
  display: flex;
  gap: 1.5rem;
}

nav a {
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
}

/* ABOUT PAGE */

h1 {
  margin-top: 20px;
  padding: 10px;
  font-weight: bold;
  font-size: 40px;
}

.headline {
  text-align: center;

}

#linkedin {
width: 150px;
height: auto;
padding: 10px;
}

#insta {
  width: 150px;
  height: auto;
  padding: 10px;
}

#reel {
  margin: auto;
}

.socialmedias {
  text-align: center;
}

#horizcandidbox {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#candidhoriz {
  border: solid 3px #1a1a1a;
  width: 100%;
}

#vertcandidbox {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#vertcandid {
  border: solid 3px #1a1a1a;
}

#bio {
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 25px;
padding: 20px;
}

#email {
  margin-bottom: 20px;
  font-size: 20px;
}


/* AI SKILLS */

#aiskillsintro {
  margin-left: 30px;
  margin-right: 30px;
}

.button {
  width: 350px;
  height: 125px;
  background-color: #1a1a1a;
  margin: auto;
 display: flex;
justify-content: space-evenly;
align-items: center;
color: #fff;
font-size: 25px;
}

#buttons {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  margin-top: 70px;
}

.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px;
}


#aiskillsintro {
 margin-top: 20px;
 margin-left: 30px;
 margin-right: 30px;
 font-size: 25px;

}


.columnone, .columntwo {
  background-color: #1a1a1a;
  width: 450px;
  height: 200px;
  font-size: 20px;
  font-family: "Roboto Slab", serif;
  color: #f5f0e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}



#aicolumnone,
#aicolumntwo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  margin-bottom: 100px;

}

#aicolumnone.open,
#aicolumntwo.open {
  max-height: 700px;
  opacity: 1;
}

.button i {
  transition: transform 0.3s ease;
}

.button.open i {
  transform: rotate(180deg);
}

.columnimgs {
  max-width: 150px;
  max-height: 150px;
  padding: 10px;
}

#grammarly {
  margin-top: 30px;
}

/* Human Skills */

.humanskills {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 15px;
  margin-bottom: 15px;
}

h2 {
  text-align: center;
  padding: 10px;
}

.humansentences {
  font-size: 20px;
  margin-left: 15px;

}

#humansentencestwo {
  font-size: 20px;
margin-right: 5px;
}

#empathy {
  height: 315px;
  width: 560px;
 
}

#teamwork {
  height: 315px;
  width: 560px;
  
}


@media (max-width: 600px) {
  .nav__burger { display: flex; }

  .nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: #111;
    z-index: 9;
  }

  .nav__links.open { display: flex; }

  .nav__links a {
    padding: 1rem 1.25rem;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
    font-size: 1rem;
  }

  /* --- existing nav rules stay here --- */
  .nav__burger { display: flex; }

  .nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: #111;
    z-index: 9;
  }

  .nav__links.open { display: flex; }

  .nav__links a {
    padding: 1rem 1.25rem;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
    font-size: 1rem;
  }

  /* --- new mobile fixes below --- */

  #buttons {
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    gap: 24px;
  }

  .button-group {
    width: 90%;
  }

  .button {
    width: 100%;
    font-size: 18px;
    height: auto;
    padding: 20px;
  }

  .columnone,
  .columntwo {
    width: 100%;
  }

  #aiskillsintro {
    font-size: 18px;
    margin-left: 16px;
    margin-right: 16px;
  }

  h1 {
    font-size: 28px;
  }

  #bio {
    margin-left: 16px;
    margin-right: 16px;
    font-size: 18px;
  }
}