:root {
  --winxp-blue: #0054E3;
  --winxp-light-blue: #4A90E2;
  --winxp-green: #73D216;
  --winxp-orange: #F57C00;
  --winxp-red: #CC0000;
  --winxp-gray: #ECE9D8;
  --winxp-dark-gray: #D4D0C8;
  --winxp-border: #0054E3;
  --winxp-window-bg: #ECE9D8;
  --winxp-button-bg: linear-gradient(to bottom, #FFFFFF 0%, #ECE9D8 100%);
  --winxp-taskbar: linear-gradient(to bottom, #245EDC 0%, #1941A5 100%);
}

body {
  font-family: 'Tahoma', sans-serif;
  background-color: #008081 !important;

  /*
  background-image:
    radial-gradient(circle at 25% 25%, #4A90E2 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, #73D216 0%, transparent 50%),

    linear-gradient(rgba(250,250,250,1) 2px, transparent 1px),
    linear-gradient(90deg, rgba(250,250,250,1) 2px, transparent 1px);

  background-size: 400px 400px, 400px 400px, 25px 25px, 25px 25px;
  background-repeat: repeat;*/

  margin: 0;
  padding: 0;
  min-height: 100vh;

  padding-top: 50px;
}

/* About */
.about-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  text-align: left;
}

.about-me-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border: 2px inset var(--winxp-dark-gray);
  object-position: 80% center;
  /* crop to the right */
}

.about-text {
  flex: 1;
  max-width: 500px;
}

.about-text h2 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.6;
}

#about h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
}

#about p {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* Windows look */
.window {
  margin: 0 auto;
}

.title-bar-text {
  font-size: 1rem;
}

/* Projects */
#projects h3 {
  font-size: 1.8rem;
  margin-bottom: 30px;
}

#projects img {
  border: 2px inset var(--winxp-dark-gray);
}

#projects p {
  font-size: 1rem;
  margin-bottom: 8px;
}

.button {
  font-size: 1rem;
  padding: 6px 18px;
}

/* Awards */
.project-awards {
  margin: 7px auto;
  max-width: 85%;
  text-align: left;
}

.project-awards b {
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
}

.project-awards .award-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.project-awards img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.project-awards span {
  font-size: 1rem;
  line-height: 1.4;
}

/* Carousel */
.project-carousel img {
  max-height: 500px;
  object-fit: contain;
  border: 2px inset var(--winxp-dark-gray);
}

/* Links */
/* Project links styling */
.project-links a {
  display: inline-block;
  /* makes padding clickable */
  font-size: 1rem;
  /* bigger text */
  color: var(--winxp-blue);
  /* Windows XP blue */
  font-weight: 500;
  text-decoration: none;
  padding: 2px 2px;
  /* add clickable space */
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

.links-title {
  font-size: 1rem;
  margin-bottom: 6px;
  display: inline-block;
}

.project-links ul {
  padding-left: 20px;
  margin-bottom: 0;
}

/* Modal fix (remove white border) */
.modal-content {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Carousel Controls */
.project-carousel .carousel-control-prev,
.project-carousel .carousel-control-next {
  width: 50px;
  background: rgba(0, 0, 0, 0.15);
  border: 2px outset var(--winxp-dark-gray);
  transition: background 0.2s, border 0.2s;
  z-index: 5;
  /* make sure arrows are on top */
  pointer-events: auto;
  /* ensure they're clickable */
}

.project-carousel .carousel-control-prev:hover,
.project-carousel .carousel-control-next:hover {
  background: linear-gradient(to bottom, #FFE66D 0%, #FFD23F 50%, #FFCC02 100%);
  border: 2px inset #FFCC02;
}

.project-carousel .carousel-control-prev-icon,
.project-carousel .carousel-control-next-icon {
  filter: invert(1);
  width: 24px;
  height: 24px;
}

/* Awards Section */
#awards h3 {
  font-size: 1.8rem;
  margin-bottom: 30px;
}

#awards img {
  border: 2px inset var(--winxp-dark-gray);
  /* max-height: 200px; */
  object-fit: contain;
}

#awards h5 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

#awards p {
  font-size: 1rem;
  margin-bottom: 6px;
}

/* Year styling – match projects */
#awards p b {
  font-size: 1.1rem;
  font-weight: bold;
  /* color: var(--winxp-blue); */
}

/* Place styling – same font weight as projects */
#awards .award-place {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}

.certificate-full {
  max-width: 95%;
  /* use almost full width */
  max-height: 85vh;
  /* still fit inside viewport */
  border: 2px inset var(--winxp-dark-gray);
}

.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.6) !important;
  /* dark dim */
  opacity: 1 !important;
  /* full strength */
}


.modal-dialog {
  max-width: 90%;
  /* expand width */
}


/* Awards layout improvements */
/* Awards & Qualifications – match Projects */
#awards h3,
#qualifications h3 {
  font-size: 1.8rem;
  margin-bottom: 30px;
}

#awards img,
#qualifications img {
  border: 2px inset var(--winxp-dark-gray);
  object-fit: contain;
}

#awards p,
#qualifications p {
  font-size: 1rem;
  margin-bottom: 8px;
}

#awards .award-place,
#qualifications .award-place {
  font-size: 1rem;
  font-weight: 500;
  color: #000;
}

/* Ensure cards look like project cards */
#awards .window,
#qualifications .window {
  max-width: 100%;
  margin: 0 auto;
  background: var(--winxp-window-bg);
}

#awards .window-body,
#qualifications .window-body {
  padding: 15px;
  background: var(--winxp-window-bg);
}

/* Thumbnails (same sizing as projects) */
#awards img.award-thumb,
#qualifications img.award-thumb {
  width: 100%;
  height: auto;
  max-height: 250px;
  margin: 0 auto 15px;
  display: block;
  object-fit: contain;
}

/* Grid spacing – consistent with projects */
#awards .row,
#qualifications .row {
  row-gap: 30px;
}

html {
  scroll-behavior: smooth;
}

.modal .title-bar-controls button {
  /*all: unset;  remove bootstrap reset */
  /* width: 16px; */
  /* height: 14px; */
  /* background: none; */
  /* border: none; */
  padding: 0;
  display: inline-block;
}





.xp-taskbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;              /* span full viewport */
  width: 100vw;          /* ignore parent widths */
  height: 40px;
  z-index: 9999;
  background: var(--winxp-taskbar);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;            /* no internal padding */
    transition: transform 0.3s ease-in-out; /* smooth animation */

}

/* Start image as the button, flush-left */
.start-img {
  display: block;
  margin: 0;             /* no gap on the left */
  padding: 0;
  line-height: 0;        /* remove inline-gap */
}

.start-img img {
  display: block;
  height: 40px;          /* match taskbar height */
  width: auto;
  cursor: pointer;
}

/* Title + links */
/* Title + links */
.taskbar-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-right: 20px;   /* small spacing before links */
}

.xp-nav {
  display: flex;
  gap: 15px;            /* equal spacing between links */
  margin: 0;            /* remove auto push to right */
}


.xp-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
}

.xp-nav a:hover {
  text-decoration: underline;
}

/* Hamburger hidden on desktop */
.xp-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  margin-left: auto;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .xp-nav {
    display: none;                /* hide links by default */
    flex-direction: column;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    background: var(--winxp-taskbar);
    padding: 10px;
  }

  .xp-nav.show {
    display: flex;                /* show when toggled */
  }

  .xp-hamburger {
    display: block;               /* show hamburger */
  }
}



/* Smooth hide / show */
.xp-taskbar {
  transition: transform 0.3s ease-in-out;
}

.xp-taskbar.hidden {
  transform: translateY(-100%);
}

/* hide navbar and dropdown menu */
#xpNavbar.hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

#xpNavbar.hidden .xp-nav {
  display: none !important; /* force-close menu when navbar hides */
}