/* universal styles, configuration etc. */
:root {
  font-family: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings: "wdth" 87.5;
  --font-color: #66727f;
  color: var(--font-color);
  font-size: 15px;
  line-height: 1.3rem;
  --measure: 75ch;
  --ratio: 1.5;
  --border-thin: var(--s-6);
  --border-color: #e3e3e3;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
}

body {
  background-image: url('/static/django_resume/img/white-linen.png');
  background-repeat: repeat;
  background-size: 560px;
  background-position: top left;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", monospace;
  font-weight: 600;
  font-style: normal;
  font-variation-settings: "slnt" 0;
  font-optical-sizing: auto;
  color: black;
  margin: 0; /* Removes default margin to remove gaps between sections */
}

p, ul {
  margin: 0;  /* Removes default margin to remove gaps between sections */
}

* {
  box-sizing: border-box;
  max-inline-size: var(--measure);
}

html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}

a {
  text-decoration: none; /* Removes the underline */
}

a.underlined {
  position: relative;
  color: #0071c7; /* Changes the link color */
}

a.underlined::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 113, 199, 0.7);
}

a.underlined:hover::after {
  width: 100%; /* Expand underline */
  transition: width 0.3s ease; /* Only apply transition on hover */
}

svg {
  vertical-align: middle; /* Adjusts the vertical alignment */
}

/* layout primitives */
.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
}

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.with-sidebar > :first-child {
  /* not sidebar */
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

.with-sidebar > :last-child {
  /* sidebar */
  flex-basis: 15rem;
  flex-grow: 1;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

[class^='stack'] > * {
  /* top and bottom margins in horizontal-tb writing mode */
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--s0);
}

.stack-card > :nth-child(2) {
  margin-block-end: auto; /* push second child to the bottom */
}

.stack-card > :last-child {
  margin-block-start: var(--s1);  /* min space between card text and badges */
}

.stack-small > * + * {
  margin-block-start: var(--s-1);
}


.stack-large > * + * {
  margin-block-start: var(--s2);
}

.stack-large > :first-child {
  margin-block-start: var(--s1);
}

.icon {
  width: 1.25em;
  height: 1.25em;
}

.icon-link {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  color: #0071c7 !important;
}

.link-margin {
  margin-inline-end: var(--s-1);
}

.with-icon {
  display: inline-flex;
  vertical-align: middle;
}

.with-icon .icon {
  margin-inline-end: 0.2rem;
}

.project-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s0);
  border: rgb(180, 185, 198) var(--border-thin) solid;
  border-radius: 0.5ch;
  --color-light: #fff;
  --color-dark: #000;
  color: var(--font-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.project-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px rgba(110, 114, 124, 0.15);
  /*background-color: rgba(52, 136, 218, 0.05); !* link color 30% *!*/
  background: linear-gradient(to bottom, rgba(52, 136, 218, 0.1), rgba(255, 255, 255, 0));
}

.project-box > h3 {
  color: black;
}

.project-box > p {
  font-size: calc(0.9 * var(--s0));
}

.project-box * {
  color: inherit;
}

.grid {
  display: grid;
  grid-gap: 1rem;
}

@supports (width: min(180px, 100%)) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  }
}

/* special cases and utility classes */
.avatar-container {
  display: flex;
  justify-content: flex-end;
}

.avatar {
  border-radius: 10%;
}

.social-link {
  color: #333333;
  border: var(--border-thin) solid var(--border-color);
  padding: var(--s-3);
  border-radius: 0.5ch;
}

.social-link:hover {
  background-color: rgba(52, 136, 218, 0.3); /* link color 30% */
  color: black;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: flex-start;
  align-items: center;
}

.timeline-header-cluster {
  justify-content: space-between;
  align-items: center;
}

.timeline-header-title {
  display: flex;
  gap: var(--s-2);
}

.year-span {
  top: var(--s1);
  right: 0;
  font-size: calc(0.9 * var(--s0));
  font-weight: lighter;
  margin-left: auto;
}

.cluster-list {
  list-style-type: none; /* Removes default bullets */
  padding: 0; /* Removes default padding */
}

.icons-list {
    margin-block-end: var(--s-3);  /* Remove ul default margin for social link icons */
}

.skills-list li {
  background-color: #333333; /* Dark grey background */
  color: #ffffff; /* White text color */
  padding: 0.5ch 1ch; /* Adds space inside the badge */
  border-radius: 0.5ch; /* Rounds the corners */
  font-size: calc(0.8 * var(--s0)); /* Adjusts the font size */
  display: inline-block; /* Ensures badges are inline */
}

.pronoun-badges-list li {
  background-color: rgb(235, 236, 241); /* Light grey background */
  line-height: 1.5; /* normalize the line height so that the badges are centered vertically */
  padding: 0.5ch 1ch; /* Adds space inside the badge */
  border-radius: 1ch; /* Rounds the corners */
  font-size: calc(0.8 * var(--s0)); /* Adjusts the font size */
  color: #545d69; /* Dark grey text color */
  display: inline-block; /* Ensures badges are inline */
}

.job-badges-list li {
  background-color: rgb(235, 236, 241); /* Light grey background */
  line-height: 1.5; /* normalize the line height so that the badges are centered vertically */
  padding: 0.5ch 1ch; /* Adds space inside the badge */
  border-radius: 1ch; /* Rounds the corners */
  font-size: calc(0.8 * var(--s0)); /* Adjusts the font size */
  color: #545d69; /* Dark grey text color */
  display: inline-block; /* Ensures badges are inline */
}

.project-badges-list li {
  background-color: rgb(235, 236, 241); /* Light grey background */
  padding: 0.5ch 1ch; /* Adds space inside the badge */
  border-radius: 1ch; /* Rounds the corners */
  font-size: calc(0.8 * var(--s0)); /* Adjusts the font size */
  color: #545d69; /* Dark grey text color */
  display: inline-block; /* Ensures badges are inline */
}

.sub-line {
  font-size: calc(1.1 * var(--s0));
  color: black;
}

header {
  display: flex;
  justify-content: flex-end;
  padding-block-end: var(--s1);
  padding-block-start: var(--s1);
}

h1 {
  font-size: calc(2.5 * var(--s0));
  font-weight: 600;
}

h3 {
  color: hsl(207, 6%, 30%);
}

section {
  /*background-color: red;*/
  padding-block-start: var(--s1);
  padding-block-end: var(--s1);
}
