@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Open+Sans:wght@700&family=Open+Sans&family=Kite+One&family=Fira+Code&display=swap');

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  print-color-adjust: exact !important;
}

:root {
  --background-color: #ffffff;
  --main-color: #000000;
  --sub-color: #434343;
  --theme-color: #674ea7;
  --technical-color: #80739e;

  --small-font-size: 8pt;
  --main-font-size: 10pt;
  --medium-font-size: 12pt;
  --very-big-font-size: 40pt;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000;
    --main-color: #ffffff;
    --sub-color: #cfcfcf;
    --theme-color: #a78ee6;
    --technical-color: #aa9ccc;
  }

  .github img {
    filter: invert(1);
  }
}

a {
  color: var(--theme-color);
  text-decoration: underline;
  text-decoration-skip-ink: all;
}

/* Layout */

body {
  background-color: var(--background-color);
  padding: 20pt;
  max-width: 600pt;
  display: flex;
  flex-direction: column;
  gap: 20pt 0;

  header {
    display: flex;
    justify-content: space-between;
    padding: 10pt;
    margin: 0 0 10pt 0;
  }
}

@media print {
  @page {
    size: 21cm 29.7cm;
    margin: 0.5cm 0.25cm;
  }
}

/* Name and subtitle */

.name,
.subtitle {
  color: var(--main-color);
}

.name {
  font-size: var(--very-big-font-size);
  margin-bottom: 10pt;
  font-family: "Kite One";
  line-height: 1.0;

  .lastName {
    color: var(--theme-color);
  }
}

.subtitle,
section#coordinates {
  line-height: 1.5;
  font-family: "Open Sans";
  color: var(--main-color);
  font-size: var(--main-font-size);
  font-weight: bold;
}

section#coordinates {
  display: flex;
  flex-direction: column;
  align-items: end;

  a[class$="-info"] {
    display: inline-block;
    text-decoration: none;

    &:after {
      display: inline-block;
      width: 20px;
      height: 17px;
      text-align: center;
      margin: 0 0 0 5px;
    }
  }

  .linkedin-info:after {
    content: "";
    width: 15px;
    print-color-adjust: exact !important;
    background-image: url('./LinkedIn.svg');
    background-repeat: no-repeat;
    background-size: 17px 17px;
    background-position: 2px 2px;
  }

  .home-info:after {
    content: "🏠";
  }

  .email-info:after {
    content: "📧";
  }

  .phone-info:after {
    content: "📱";
  }
}

/* Headings */

h1,
h2,
h3 {
  line-height: 1.0;
  page-break-after: avoid;
  font-weight: bold;
  display: block;
}

h1 {
  color: var(--theme-color);
  font-size: var(--medium-font-size);
  font-family: "Kite One";
  text-transform: uppercase;
  border-bottom: 2px dashed var(--technical-color);
  padding: 0 0 10pt 0;
}

.github img {
  width: 8pt;
  height: 8pt;
}

/* Sections */

section:is(.professional, .formations, .projects, .skills, .languages, .interests, .club-work) {
  display: flex;
  flex-direction: column;
  gap: 15pt 0;
  break-inside: avoid;

  h1::before {
    display: inline-block;
    padding-right: 5px;
  }

  h2 {
    color: var(--main-color);
    font-size: var(--medium-font-size);
    font-family: "Nunito";
  }

  h3 {
    color: var(--sub-color);
    font-size: var(--small-font-size);
    line-height: 8pt;
    font-family: "Open Sans";
    display: flex;
    align-items: center;
    gap: 0 8px;

    .date,
    .location {
      text-transform: uppercase;
    }

    .date::before {
      padding-right: 5px;
      content: '📅';
    }
  }

  div:is(.work, .formation, .project, .skill) {
    display: flex;
    flex-direction: column;
    gap: 5pt 0;

    p {
      line-height: 1.25;
    }
  }


  div.skill {
    gap: 3pt 0;
  }
}

section.professional h1::before { content: '💼 //'; }
section.formations h1::before { content: '🎓 //'; }
section.projects h1::before { content: '📚 //'; }
section.skills h1::before { content: '💻 //'; }
section.languages h1::before { content: '🌍 //'; }
section.interests h1::before { content: '🎮 //'; }
section.club-work h1::before { content: '🎟️ //'; }

section.skills {
  display: flex;
  flex-direction: column;

  .columns {
    display: flex;

    .skill-column {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 8pt 8pt;
    }
  }
}

section.languages {
  gap: 2px 0;

  h1 {
    margin-bottom: calc(15pt - 2px);
  }

  small {
    opacity: 0.8;
  }
}

p:is(.description, .technical-stack),
:is(.skills, .languages, .interests, .club-work) p,
:is(.work, .project, .interests, .club-work) ul li {
  line-height: 1.70;
  color: var(--sub-color);
  font-size: var(--main-font-size);
  font-family: "Nunito";
}

:is(.work, .project, .interests, .club-work) ul {
  margin: 0 100pt 0 20pt;

  li {
    padding-left: 5pt;
  }

  li::marker {
    content: "\002794";
  }
}

div.make-this-inline {
  display: flex;
  gap: 0 5pt;
  align-items: center;
  justify-content: space-between;
}

/* Others */

code,
p.technical-stack {
  font-family: "Cascadia Code", Consolas, "Courier New", monospace, monospace;
  font-size: var(--main-font-size);
  color: var(--technical-color);
}

/* Ordering of sections */

section.professional {
  order: 1;
}

section.formations {
  order: 3;
}

section.projects {
  order: 4;
}

section.skills {
  order: 2;
}

section.languages {
  order: 5;
}

section.interests {
  order: 6;
}

section.club-work {
  order: 7;
}