:root {
  --color-dark-primary: #0c0c0c;
  --color-dark-secondary: #384151;
  --color-light-primary: #fff7e8;
  --color-light-secondary: #fff7e890;
  --color-border-dark: #202533;
  --color-border-light: #d1c7b3;

  --font-family-heading: "Inter Tight", sans-serif;
  --font-family: "Barlow", sans-serif;
  --h1-font-size: 10cqw;
  --h2-font-size: 6cqw;
  --h3-font-size: 4cqw;
  --h4-font-size: 4cqw;
  --nav-font-size: 3cqw;
  --paragraph-font-size: 2.5cqw;
  --list-font-size: 2.5cqw;
  --font-weight-base: 300;

  --icon-radius: 4px;

  color-scheme: light dark;
}

html {
  background: light-dark(var(--color-light-primary), var(--color-dark-primary));
  height: 100%;
  width: 100%;
}

body {
  color: light-dark(var(--color-dark-primary), var(--color-light-primary));
  font-family: var(--font-family);
  font-weight: var(--font-weight-base);
  height: 100%;
  line-height: 1.4;
  letter-spacing: .02em;
  margin: 0;
  width: 100%;
}

h2 {
  font-size: var(--h2-font-size);
  font-weight: calc(var(--font-weight-base) + 100);
  letter-spacing: .02em;
}

h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--font-weight-base);
}

h4 {
  font-size: var(--h4-font-size);
  font-weight: calc(var(--font-weight-base) * 1.2);
}

p {
  font-size: var(--paragraph-font-size);
  margin: 0;
  padding-bottom: 1cqw;
}

section {
  margin-top: 40px;
}

a,
a:link,
a:visited {
  /* TODO: make light mode color contrast more with the standard light mode text color.  */
  color: color(var(--color-dark-primary), var(--color-light-secondary));
  font-weight: calc(var(--font-weight-base) * 1.4);
  text-decoration: none;
  /* underline animation */
  background-image: linear-gradient(light-dark(var(--color-dark-primary), var(--color-light-primary)), light-dark(var(--color-dark-primary), var(--color-light-primary)));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s, color 0.25s;
  /* underline animation */
}  

a:hover,
a:active {
  background-size: 100% 1px;
  color: light-dark(var(--color-dark-primary), var(--color-light-primary));
}  

a.card-img-link {
  background-image: none;
  background-size: initial;
  background-position: initial;
  background-repeat: initial;
}

ul {
  list-style: none;
  padding: 0;
}

footer {
  padding: 10px;
  justify-items: end;
}

footer p {
  font-size: 20px;
  padding: 0;
}

.badge {
  display: inline-block;
  background: transparent;
  border: 1px solid light-dark(var(--color-dark-primary), var(--color-light-primary));
  color: light-dark(var(--color-dark-primary), var(--color-light-primary));
  font-size: 1rem;
  font-weight: calc(var(--font-weight-base) - 100);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  user-select: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.bio {
  padding: 2cqw 0;
}

.card {
  display: grid;
  grid-template-columns: .5fr 1.2fr;
  place-items: center;
  background: transparent;
  /* No border-radius because background is transparent */
  box-shadow: none;
  padding: 2cqw;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}  

.card:hover .badge {
  color: light-dark(var(--color-dark-primary), var(--color-light-primary));
  border-color: light-dark(var(--color-dark-primary), var(--color-light-primary));
}

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}  

.card-content {
  padding: 0 0 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  /* justify-content: start;
  align-items: start; */
  grid-gap: 3cqw;
  /* height: 100%;
  min-height: 0; */
}    

.card-desc {
  font-size: var(--paragraph-font-size);
  font-weight: calc(var(--font-weight-base) - 100);
  hyphens: auto;
  letter-spacing: .02em;
  margin: 0;
  text-wrap: pretty;
  transition: color 0.2s;
}  


.card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}  

.card-img-link {
  display: block;
  width: 60%;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: hidden;
  border-radius: 8px;
}  

.card-img-link img {
  /* width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%; */
  object-fit: cover;
}

.card-title {
  color: light-dark(var(--color-dark-primary), var(--color-light-primary));
  display: inline;
  font-weight: calc(var(--font-weight-base) + 100);
  margin: 0;
  padding: 0;
  transition: color 0.2s;
  white-space: nowrap;
  position: relative;
  background-image: linear-gradient(light-dark(var(--color-dark-primary), var(--color-light-primary)), light-dark(var(--color-dark-primary), var(--color-light-primary)));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s, color 0.25s;
}

a.card-title-link {
  align-items: center;
  background-image: none;
  color: inherit;
  position: relative;
  text-decoration: none;
}

a.card-title-link:hover .card-title,
a.card-title-link:focus .card-title {
  color: light-dark(var(--color-dark-primary), var(--color-light-primary));
  background-size: 100% 1px;
}


.container {
  background: transparent;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 100vh;
  /* Add container query context for grid-based layout */
  container-type: inline-size;
  container-name: main-layout;
}  

.custom-tooltip {
  background-color: var(--color-dark-secondary);
  border-radius: 6px;
  bottom: 100%; /* Position above the name */
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: opacity 0.3s;
  text-align: center;
  visibility: hidden;
  white-space: nowrap;
  width: 180px;
  z-index: 1;
}  

.icon {
  display: inline-block;
  width: 100%;
  background: transparent;
  border-radius: var(--icon-radius);
  opacity: 0.8;
}

.icon img {
  object-fit: contain;
  background: transparent;
  border-radius: var(--icon-radius);
}

.icon.github {
  background: transparent;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.2s;
}

.icon.github:hover {
  opacity: 1;
}

.icon.instagram {
  background: transparent;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.2s;
}

.icon.instagram:hover {
  opacity: 1;
}  

.icon.linkedin {
  background: transparent;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.2s;
}    

.icon.linkedin:hover {
  opacity: 1;
}      

.item-line {
  background: var(--color-border-light);
  border-radius: .5px;
  display: inline-block;
  height: .5px;
  justify-self: center;
  transition: background 0.3s;
  width: 75%;
}

.main-content {
  grid-column: 2;
  width: 100%;
  min-width: 280px;
  /* Container query context for main content (enables container queries on main content) */
  container-type: inline-size;
  container-name: main-content;
  padding: 50px 50px;
  box-sizing: border-box;
  border: none;
  background: transparent;
}  

.main-content h2 {
  margin: 0;
  padding: 2.5cqw 0;
  
}  

.name {
  color: light-dark(var(--color-dark-primary), var(--color-light-primary));
  cursor: pointer;
  display: block;
  font-family: var(--font-family-heading);
  font-size: var(--h1-font-size);
  font-weight: calc(var(--font-weight-base) + 200);
  margin: 0; /* override default margin */
  position: relative;
}      

.name-text {
  display: inline-block;
  position: relative;
}      


.name-text:hover + .custom-tooltip,
.name-text:focus + .custom-tooltip {
  opacity: 1;
  visibility: visible;
}      


.nav li {
  /* TODO: add better inactive text color for light mode */
  color: light-dark(var(--color-dark-secondary), var(--color-light-secondary));
  cursor: pointer;
  margin: 8px;
  transition: color 0.2s;
}      

.nav li.active,
.nav li:hover {
  color: light-dark(var(--color-dark-primary), var(--color-light-primary));
}      

.nav-line {
  display: inline-block;
  vertical-align: middle;
  height: 2px;
  width: 24px;
  margin-right: 16px;
  background: light-dark(var(--color-dark-primary), var(--color-border-light));
  border-radius: 1px;
  transition: width 0.3s, background 0.3s;
}          

.nav li.active .nav-line {
  width: 40px;
  background: light-dark(var(--color-dark-primary), var(--color-light-primary));
}          

.project-cards {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: 1fr;
  padding: 2cqw;
}  

.section-line {
  background: var(--color-border-light);
  border-radius: 1px;
  display: inline-block;
  height: 1px;
  transition: background 0.3s;
  width: 100%;
}    

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 50%;
  min-width: 280px;
  height: 100vh;
  background: transparent;
  border-right: 1px solid var(--color-border-dark);
  z-index: 10;
  /* Container query context for sidebar (enables container queries on sidebar) */
  container-type: inline-size;
  container-name: sidebar;
}            

.sidebar-content {
  padding: 60px 40px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  height: 100%;
  gap: 10px;
}            

.skills-category {
  font-size: var(--list-font-size);
  padding: 0 2.5cqw;
}


.skill-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.skills-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* grid-gap: 2.5cqw; */
}

.skills-matrix h3 {
  justify-self: center;
}

.socials {
  display: grid;
  grid-template-columns: repeat(3, 25px);
  grid-gap: 20px;
}          

.subtitle {

  color: light-dark(var(--color-dark-primary), var(--color-light-secondary));
  margin: 0;
}            

.title {
  color: light-dark(var(--color-dark-primary), var(--color-light-secondary));
  font-size: 4cqw;
  margin: 0;
}          

@media (max-width: 1150px) {
  .container {
    grid-template-columns: 1fr;
  }
  .sidebar {
    border-right: none;
    grid-column: 1;
    height: auto;
    margin: 0;
    position: static;
    width: 100%;
  }
  .main-content {
    grid-column: 1;
    width: 100%;
  }
}

@media (max-width: 750px) {

  h3 {
    font-size: calc(var(--h3-font-size) * 1.5);
  }

  h4 {
    justify-self: center;
    text-align: center;
    font-size: calc(var(--h4-font-size) * 1.5);
  }

  p {
    font-size: calc(var(--paragraph-font-size) * 1.5);
  }

  .badge {
    font-size: var(--paragraph-font-size);
  }

  .card {
    grid-template-columns: 1fr;
  }

  .cards {
    gap: 20px;
  }

  .card-content {
    place-items: center;
    padding: 24px 0;
  }

  .card-desc {
    font-size: calc(var(--paragraph-font-size) * 1.5);
  }

  .card-img-link {
    width: 50%;
  }
    
  .container {
    grid-template-columns: 1fr;
    width: 100vw;
    min-width: 0;
  }

  .main-content {
    padding: 20px;
  }

  .sidebar {
    height: auto;
    position: static;
    width: 100%;
  }
  
  .sidebar-content {
    padding: 20px;
  }

  .skills-category {
    font-size: calc(var(--list-font-size) * 1.5);
  }

  .skill-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .skills-matrix {
    grid-template-columns: 1fr;
  }
  
  .skills-matrix ul {
    justify-items: center;
    text-align: center;
  }

}

/* Show toucan_black.png in light mode, toucan_white.png in dark mode */
/* .toucan-light {
  display: inline;
}
.toucan-dark {
  display: none;
} */

@media (prefers-color-scheme: dark) {
  .ssg-light {
    display: none;
  }
  .ssg-dark {
    display: inline;
  }
  .toucan-light {
    display: none;
  }
  .toucan-dark {
    display: inline;
  }
}

@media (prefers-color-scheme: light) {
  .ssg-light {
    display: inline;
  }
  .ssg-dark {
    display: none;
  }
  .toucan-light {
    display: inline;
  }
  .toucan-dark {
    display: none;
  }
}