:root {
  --nav-bg-color: rgb(64, 88, 92);
  --main-bg-color: rgb(50, 50, 50);
  --main-text-color: rgb(255, 255, 245);
  --accent-color: #face18;
  --true-blue: #006aff;
}

#objective {
  background-color: rgb(245, 245, 230);
  margin-top: 0;
  margin-bottom: 0;
  padding: 3%;
  text-align: right;
}

/* General */
html {
  box-sizing: border-box;
}

section{
  padding-top: 0;
  margin-top: 0;
}

/* Headers */
h1 {
  display: block;
  text-align: right;
  color: var(--main-text-color);
  font-weight: normal;
  text-transform: uppercase;
  font-weight: 200;
  /* border-bottom: var(--main-text-color) solid 2px; */
  letter-spacing: 3px;
  margin-top: 3;
}

h2 {
  display: block;
  color: rgb(50, 50, 50);
  font-weight: 525;
  text-transform: capitalize;
  padding-top: 50px;
}

h3 {
  display: block;
  color: rgb(75, 75, 75);
  font-weight: 418;
}

/* Paragraphs and lists */
p {
  display: block;
  text-indent: 0;
  margin: auto 3%;
  font-size: 0.9rem;
  font-weight: 300;
}

ul {
  text-indent: 0;
  margin: auto 3%;
  font-size: 0.86rem;
  font-weight: 300;
  list-style-type: square;
}

li{
  font-size: 0.86rem;
}
ol li {
  text-indent: 0;
  margin: auto 3%;
  font-size: 0.86rem;
  font-weight: 300;
}

b {
  font-weight: 552;
}

.bld-xtra {
  font-weight: 400;
}

.bdy {
  display: block;
  display: block;
  color: #010203;
  background-color: var(--main-text-color);
  font-family: "Momo Trust Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  margin: 0;
}

/* Header and footer body*/
footer {
  color: var(--accent-color);
  text-align: center;
  padding: 10px;
  background-color: var(--main-bg-color);
  font-family: "Courier New", Courier, monospace;
  margin-top: 10%;
}

header {
  /* display: flex;
  justify-content: right;
  align-items: center; */
  background-color: rgb(50, 50, 50);
}

.prof-pic {
  width: 118px;
  height: auto;
  max-width: 125px;
  border: 1px solid var(--accent-color);
  border-radius: 5px;
}

/* hyperlinks */
/* a {
  text-decoration: none;
  color: var(--true-blue);
} */

a {
  /* box-shadow: inset 0 0 0 0 #54b3d6; */
  color: var(--true-blue);
  background-color: ;
  text-decoration: none;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .5s ease-in-out, background-color .5s ease-in-out;
}
a:hover 
{
  background-color: var(--main-bg-color);
  text-decoration: double;
  /* box-shadow: inset 100px 0 0 0 #54b3d6; */
  color: var(--accent-color);
}


.addr {
  text-align: right;
  color: var(--main-text-color);
  padding: 5%;
  margin: 0;
}

/* Web Links */
.addr a {
  color: var(--main-text-color);
}

/* a:hover {
  color: #F44336;
  /* text color change */
  /* box-shadow: inset 100px 0 0 0 var(--link-color); */
  /* expands background */

  /* color: #F44336;  */
  /* background-color: var(--true-blue);
  color: var(--main-text-color);
  border-radius: 5px;
  padding: 0.5%;
  transition: background-color 0.92s ease-out;
  transform 0.92s ease-out; */
} */

.lrg {
  font-size: larger;
}

.box {
  display: block;
  padding-left: 5%;
  padding-right: 5%;
  background-color: var(--main-text-color);
  max-width: 800px;
  width: auto;
  margin: 0 auto;
}

.col {
  color: rgb(250, 235, 215);
}

.list-reset {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Navigation Items  */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  /* Increased from 45px */
  z-index: 1000;
  /* Ensure on top */
  display: flex;
  align-items: center;
  /* Vertically center */
  justify-content: flex-end;
  /* Align to right */
  background-color: var(--main-bg-color);
  /* Dark background */
  font-size: 90%;
}

.nav-list {
  padding: 0 20px;
  display: flex;
  margin-top: 0;
  padding-right: 2px;
  justify-content: right;
  font-size: 1rem;
  /* Increased from small */
  align-items: center;
  border-bottom: 2px solid var(--accent-color);
  /* Yellow accent line */
  height: 100%;
  /* Fill nav height */
  width: 100%;
  /* Fill width */
}

.nav-list a {
  display: inline-block;
  text-decoration: none;
  font-weight: normal;
  /* text-transform: lowercase; */
  margin-right: 25px;
  /* Increased spacing */
  color: var(--main-text-color);
  /* Light text */
  transition: color 0.3s ease;
}

.nav-list a:hover {
  color: var(--true-blue);
  /* Yellow hover */
  background-color: transparent;
  /* Remove block background */
  transform: translateY(-2px);
  /* Slight lift */
}

/* Responsive Navbar */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--main-text-color);
  font-size: 1.5rem;
  cursor: pointer;
  position: absolute;
  top: 50%;
  /* Center vertically */
  transform: translateY(-50%);
  right: 20px;
  z-index: 1003;
  /* Higher than everything */
  transition: color 0.3s ease;
  /* Smooth color transition */
}

/* Scrolled State - visible on light backgrounds */
header.scrolled .hamburger {
  color: var(--true-blue);
  /* Dark color when scrolled */
}

/* Menu Open State - visible on dark menu background */
header.menu-open .hamburger {
  color: var(--main-text-color) !important;
  /* Force white/light when menu is open */
}

.icon {
  display: inline-block;
  /* Change to inline-block for text-align to work on parent, or keep block with margins. Let's try inline-block for better control with text-align center on parent */
  height: 54px;
  /* Reduced to 40px */
  width: auto;
  vertical-align: middle;
}

.cent {
  text-align: center;
  margin: 20px 0;
  /* Add vertical spacing */
}

/* Remove hover effect for the PDF icon link */
.cent a:hover {
  background-color: transparent;
  padding: 0;
  transform: none;
  box-shadow: none;
}

/* Stop animation on hover */
.cent a:hover .icon {
  animation: none;
}

/* Accessible Hiding */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* added line */
  border: 0;
}

/* Technical Proficiency Grid (replacing tables) */
.tech-list {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 10px 15px;
  margin: auto 6%;
}

.tech-list dt {
  background-color: var(--highlight-color,
      rgb(245, 245, 230));
  /* matching .td-dark */
  white-space: nowrap;
  border-right: 2px solid rgba(51, 51, 51, 0.45);
  padding: 2px 5px;
  font-weight: bold;
  display: flex;
  align-items: center;
  /* Vertical center alignment */
}

.tech-list dd {
  margin: 0;
  padding: 2px 5px;
  display: flex;
  align-items: center;
  /* Vertical center alignment */
}

/* Ensure consistent font sizes in description lists */
.tech-list dt,
.tech-list dd {
  font-size: 0.86rem;
  font-weight: 300;
}

/* normal fonts */
.normal{
  font-size: 0.90rem;
}

/* Scroll bar animation */

.progress {
  background: var(--accent-color);
  height: 8px;
  position: relative;
}

.progress:before {
  content: '';
  position: absolute;
  background: #55ad9b;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  height: 8px;
  animation: grow linear forwards;
  animation-timeline: scroll();
}

@keyframes grow {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion) {
  .progress::before {
    animation: none;
  }
}

@media (max-width: 768px) {

  /* Headers */
  h1 {
    display: block;
    text-align: right;
    color: var(--main-text-color);
    font-weight: normal;
    text-transform: uppercase;
    font-weight: 200;
    /* border-bottom: var(--main-text-color) solid 2px; */
    letter-spacing: 3px;
    margin-top: 10%;
    padding-top: 20px;
  }

  .hamburger {
    display: block;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 60px;
    /* increased to match nav */
    background-color: var(--main-bg-color);
    /* Dark background */
    border-bottom: 2px solid var(--accent-color);
    position: fixed;
    /* Changed to fixed to stay on screen */
    top: 0;
    left: 0;
    z-index: 1000;
    height: auto;
    padding-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  }

  .nav-list.show {
    display: flex;
  }

  .nav-list li {
    text-align: left;
    /* Changed from center to left */
    padding: 15px 20px;
    /* Added left/right padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
  }

  .nav-list li:last-child {
    border-bottom: none;
  }

  .nav-list a {
    display: block;
    width: 100%;
    font-size: 0.9rem;
    /* Slightly smaller font */
    color: var(--main-text-color);
    font-weight: 300;
    /* Lighter weight */
  }

  .nav-list a:hover {
    color: var(--accent-color);
  }
}