:root {
   color-scheme: light;
   --primary-color: #745050;
   --accent-color: #158915a3;
   --text-color: #5b5349;
   --muted-color: #9a968e;
   --bg-color: #dfd9ce;
   --light-bg: #d9d1c1;
   --border-color: #d5cdbe;
   --section-gap: 2rem;
}

:root.dark-theme {
   color-scheme: dark;
   --primary-color: #b48585;
   --accent-color: #38cc7dc7;
   --text-color: #d9d5cd;
   --muted-color: #747474;
   --bg-color: #121212;
   --light-bg: #2a2a2a;
   --border-color: #333;
}

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

body {
   font-family: "Inter", sans-serif;
   line-height: 1.6;
   color: var(--text-color);
   max-width: 1000px;
   margin: 0 auto;
   padding: 1.75rem;
   background-color: var(--bg-color);
   transition: all 0.3s ease, color 0.3s ease;
}

h1,
h2 {
   font-family: "Merriweather", serif;
}

h2 {
   color: var(--primary-color);
   margin-bottom: 1rem;
   font-size: 1.5rem;
   font-weight: 500;
   position: relative;
}

header {
   padding: 2rem 0;
   border-bottom: 2px solid var(--primary-color);
   margin-bottom: var(--section-gap);
}

h1 {
   font-size: 2.5rem;
   color: var(--primary-color);
   margin-bottom: 0.5rem;
   font-weight: 600;
   font-weight: 300;
}

section {
   margin-bottom: var(--section-gap);
}

.contact-info {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   margin-top: 1rem;
}

.contact-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.skills-overview p {
   margin-bottom: 1rem;
}

.job {
   margin-bottom: 1.5rem;
}

.job-company {
   font-weight: 600;
   font-size: 1.1rem;
   margin-bottom: 0.3em;
   color: light-dark(#4c453d, #ece7df);
}

.job-date {
   color: var(--muted-color);
   margin-bottom: 0.25rem;
}

.job-title {
   margin-bottom: 0.3em;
}

.job-date-title-group {
   display: flex;
   column-gap: 0.5em;
   flex-wrap: wrap;
   margin-bottom: 0.5em;
}

.job-date-title-group .job-date,
.job-date-title-group .job-title {
   margin: 0;
   line-height: 1.25em;
}

.job-duties {
   margin-left: 0.75rem;
   margin-top: 0.75rem;
}

.job-duties li {
   margin-bottom: 0.5rem;
   margin-left: 1rem;
}

.education-item {
   margin-bottom: 1rem;
}

.education-institution {
   font-weight: 600;
   margin-bottom: 0.25rem;
}

.education-date {
   color: #666;
   margin-bottom: 0.25rem;
}

.education-title {
   margin-bottom: 0.5rem;
}

.grades {
   margin-top: 0.75rem;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 0.5rem;
}

.grade-item {
   display: flex;
   justify-content: space-between;
   background-color: var(--light-bg);
   padding: 0.5rem;
   border-radius: 4px;
}

.theme-toggle {
   position: fixed;
   top: 1rem;
   right: 1rem;
   display: flex;
   align-items: center;
   color: var(--text-color);
   background-color: var(--light-bg);
   border: none;
   border-radius: 20px;
   padding: 5px 10px;
   cursor: pointer;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   transition: background-color 0.3s ease;
   z-index: 100;
}

.theme-toggle svg {
   margin-right: 5px;
}
.commit-timeline {
   /* border-left: 2px solid #3a3d41; */
   /* padding-left: 20px; */
   margin-left: 1rem;
   position: relative;
}

.commit {
   position: relative;
   /* padding: 10px 0 10px 20px; */
   padding: 5px 0 5px 10px;
}

.circle {
   width: 10px;
   height: 10px;
   border: 2px solid var(--muted-color);
   border-radius: 50%;
   /* background-color: #1e1e1e; */
   position: absolute;
   left: -16px;
   /* top: 18px; */
   top: 12px;
}

.circle.filled {
   background-color: var(--border-color);
   border-color: var(--primary-color);
}
.circle.active {
   background-color: var(--border-color);
   border-color: var(--primary-color);
}

.message {
   font-size: 14px;
   /* color: #d4d4d4; */
}

.branch {
   display: none;
}

.commit-timeline .job-date-title-group {
   margin: 0;
}
.commit-timeline .job-date-title-group .job-title,
.commit-timeline .job-date-title-group .job-date {
   line-height: inherit;
}

@media (min-width: 768px) {
   .commit-timeline .commit:not(:last-child)::after {
      content: "";
      display: block;
      position: absolute;
      background-color: var(--muted-color);
      width: 1px;
      height: 10px;
      left: -12px;
   }
   .branch {
      display: block;
      background-color: var(--accent-color);
      color: var(--bg-color);
      border-radius: 20px;
      padding: 2px 8px;
      font-size: 12px;
      margin-left: 6px;
   }
}

@media (max-width: 768px) {
   .job-header,
   .education-header {
      flex-direction: column;
      gap: 0.25rem;
   }

   .contact-info {
      flex-direction: column;
      gap: 0.5rem;
   }
}