:root {
  --main-accent: #0073e6;
  /* --main-accent: #e60073; */
}

    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      color: #333;
      line-height: 1.5;
      margin: 0;
      padding: 0;
    }

    body.resume-page {
      padding: auto;
      background: #fafafa;
    }



    .resume-container {
      max-width: 800px;
      margin: auto;
      background: #fff;
      padding: 30px 40px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 0;
      font-weight: 600;
    }
    a{
      color: var(--main-accent);
      text-decoration: underline var(--main-accent);
    }
    .subtitle {
      font-size: 0.95rem;
      color: var(--main-accent);
      margin-top: 4px;
    }
    .section {
      margin-top: 30px;
    }
    .section-title {
      display: inline-block;
      margin-bottom: 12px;
      font-size: 1.15rem;
      font-weight: 600;
      border-bottom: 2px solid var(--main-accent);
      padding-bottom: 4px;
    }
    /* .two-column {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .two-column > div {
      width: 48%;
    } */
    .experience-item, .edu-item {
      margin-bottom: 20px;
    }
    .item-header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .item-role {
      font-weight: 600;
    }
    .item-org {
      color: #555;
    }
    .item-date {
      color: #999;
      font-size: 0.9rem;
    }
    ul.skills-list, ul.cert-list, ul.nav-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul.skills-list li, ul.cert-list li, ul.nav-links li {
      background: #eaf4ff;
      color: var(--main-accent);
      display: inline-block;
      padding: 6px 10px;
      margin: 4px 6px 4px 0;
      border-radius: 40px;
      /* border-radius: 4px; */
      font-size: 0.9rem;
    }


    /* error page */
    body.error-page {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 85vh;
    }

    .error-container {
      text-align: center;
      max-width: 600px;
    }
    .error-number {
      font-size: 8rem;
      font-weight: 700;
      color: var(--main-accent);
      margin: 0;
      line-height: 1;
    }
    .error-text {
      font-size: 1.5rem;
      margin: 20px 0;
      color: #000000;
    }
    .error-description {
      font-size: 1rem;
      color: var(--main-accent);
      margin-bottom: 30px;
    }
    .error-button {
      display: inline-block;
      background: var(--main-accent);
      color: white;
      padding: 12px 30px;
      text-decoration: none;
      border-radius: 4px;
      font-weight: 600;
      transition: background 0.3s;
    }
    .error-button:hover {
      background: #005bb5;
      color: white;
    }


/* topnav */
/* .topnav {
  overflow: hidden;
  background-color: #eaf4ff;
}

.topnav a {
  float: left;
  color:var(--main-accent);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: var(--main-accent);
  color: #eaf4ff;
}

.topnav a.active {
  background-color: var(--main-accent);
  color: #eaf4ff;
} */


.topnav {
  display: flex;
  justify-content: space-evenly; /* even spacing between all items */
  align-items: center;
  background-color: #eaf4ff;
  padding: 0; /* optional for cleaner look */
}

.topnav a {
  flex: 1; /* ensures equal width */
  text-align: center;
  padding: 14px 16px;
  color: var(--main-accent);
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: var(--main-accent);
  color: #eaf4ff;
}

.topnav a.active {
  background-color: var(--main-accent);
  color: #eaf4ff;
}