@import url('https://fonts.googleapis.com/css?family=Piazzolla:300,400,500&subset=latin');

:root {
  --decoration-main-color: #000;
  --page-max-width: 1024px;
  --text-grid-step: 1.5rem;

  --link-hover-bg-color: #0000ee;
  --link-offset: var(--text-grid-step);
  --link-x-offset: calc(var(--link-offset) / 2);
  --link-y-offset: calc(var(--link-offset) / 10);

  --double-text-grid-step: calc(var(--text-grid-step) * 2);
  --half-text-grid-step: calc(var(--text-grid-step) / 2);
  --third-text-grid-step: calc(var(--text-grid-step) / 3);
  --fifth-text-grid-step: calc(var(--text-grid-step) / 5);

  --nav-size: var(--double-text-grid-step);
  --nav-top-offset: calc(var(--nav-size) * -2);
  --nav-bottom-offset: var(--nav-size);

  /* active section gradient */
  --grad-start-color: color-mix(in srgb, var(--link-hover-bg-color), transparent 66%);
  --grad-end-color: transparent;
  --grad-step: 20px;
  --scroll-duration: 2; /* seconds */
  --animation-duration: 1s; /* seconds */

  --middle-gradient: repeating-linear-gradient(
    to right,
    var(--grad-start-color) 0,
    var(--grad-start-color) var(--grad-step),
    var(--grad-end-color) calc(var(--grad-step) + 1px),
    var(--grad-end-color) calc(var(--grad-step) * 2)
  );
}

* {
  box-sizing: border-box;
}

html {
  font-family: Piazzolla, serif;
  padding: var(--nav-size);
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-size);
}

body {
  margin: var(--text-grid-step);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  line-height: var(--text-grid-step);
  margin: 0 0 var(--text-grid-step);
}

h1,
h1 + h2 {
  font-weight: 100;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--page-max-width);
}

header {
  column-gap: var(--double-text-grid-step);
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--page-max-width);
}

main {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--page-max-width);
}

a[href] {
  color: var(--link-hover-bg-color);
  font-size: 1rem;
  margin: calc(var(--link-y-offset) * -1) calc(var(--link-x-offset) * -1);
  padding: var(--link-y-offset) var(--link-x-offset);
}

a:is(:hover, :focus, :focus-visible) {
  background-color: var(--link-hover-bg-color);
  color: white;
  outline: none;
  text-decoration: none;
}

.summary p,
main p,
main h3 {
  margin-bottom: var(--text-grid-step);
}

.links {
  h3 {
    margin: 0;

    &::after {
      content: ':';
      display: inline-block;
      line-height: var(--text-grid-step);
    }
  }
}

section:has(> :is(h2, h3, h4)):not(:last-child) {
  margin-bottom: var(--double-text-grid-step);
}

section > h4 {
  margin-bottom: 0;
}

main p {
  margin-bottom: var(--half-text-grid-step);
}

section:has(table) h3 {
  margin-bottom: var(--half-text-grid-step);
}

.skills {
  column-gap: var(--text-grid-step);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  h2 {
    flex-basis: 100%;
  }
}

table {
  border-collapse: collapse;
  table-layout: fixed;

  th,
  td {
    line-height: var(--text-grid-step);
    padding: 0;
    text-align: start;
    vertical-align: middle;
  }

  td {
    padding: 0 var(--half-text-grid-step);
  }

  thead :is(th, td) {
    font-size: 0.875em;
    padding-bottom: var(--fifth-text-grid-step);
  }

  tbody tr:first-child :is(th, td) {
    border-top: 1px solid color-mix(in srgb, var(--decoration-main-color) 33%, white);
    padding-top: var(--fifth-text-grid-step);
  }
}

footer {
  display: none;
}

/* navigation */
nav {
  align-items: center;
  column-gap: var(--half-text-grid-step);
  display: flex;
  height: var(--nav-size);
  justify-content: center;
  margin: var(--nav-top-offset) 0 var(--nav-bottom-offset);
  position: sticky;
  top: 0;

  &::after {
    backdrop-filter: blur(2px);
    background-color: hsla(0, 100%, 100%, 0.8);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }

  a {
    position: relative;
    z-index: 0;

    &:is(:hover, :focus-visible) {
      z-index: 1;
    }
  }
}

/* print button */
#print {
  all: unset;
  background-color: transparent;
  border: 1px solid var(--decoration-main-color);
  color: var(--decoration-main-color);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: var(--text-grid-step);
  margin-left: var(--double-text-grid-step);
  padding: 0 0.66em;

  &:is(:hover, :focus-visible) {
    background-color: var(--link-hover-bg-color);
    border-color: transparent;
    color: #fff;
  }
}

section.active h2 {
  position: relative;
  z-index: 1;
}

section.active h2::after {
  animation: Glare linear 1;
  animation-duration: var(--animation-duration);
  background-image: var(--middle-gradient);
  background-size: calc(var(--grad-step) * 2) 100%;
  content: '';
  display: block;
  height: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 150%;
  width: 100%;
}

@keyframes Glare {
  0% {
    background-position: 0 0;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    background-position: calc(var(--grad-step) * calc(var(--scroll-duration) * 3)) 0;
    opacity: 0;
  }
}

/* Mobile styles */
@media only screen and (max-width: 768px) {
  :root {
    --text-grid-step: 1.25rem;
    --nav-size: calc(var(--text-grid-step) * 4);
  }

  html {
    padding: 0;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: var(--nav-size) var(--half-text-grid-step) var(--half-text-grid-step);
    row-gap: var(--text-grid-step);
  }

  h1 {
    font-size: 1.75rem;
    margin-bottom: 0;
  }

  h1 + h2 {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  header {
    column-gap: 0;
    grid-template-columns: 1fr;
  }

  header section:has(> h2) {
    margin-bottom: var(--text-grid-step);
  }

  section {
    &:has(> :is(h2)) {
      margin-bottom: var(--double-text-grid-step);
    }

    &:has(> :is(h3, h4)) {
      margin-bottom: var(--text-grid-step);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  nav {
    align-content: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: var(--half-text-grid-step);
  }

  #print {
    margin-left: auto;
  }

  .skills {
    column-gap: var(--text-grid-step);
  }

  table {
    font-size: 0.875rem;
    width: 100%;
  }

  table {
    --row-padding: var(--third-text-grid-step);
    --cell-padding: var(--text-grid-step);

    th {
      padding: var(--row-padding) var(--cell-padding) 0 0;
    }
    td {
      padding: var(--row-padding) var(--cell-padding) 0;
      width: auto;

      &:last-child {
        text-align: right;
      }
    }
  }
}

@media screen {
  .cv-url {
    display: none;
  }
}

/* print styles */
@media print {
  :root {
    --text-grid-step: 12px;
    --third-text-grid-step: calc(var(--text-grid-step) / 3);
    --double-text-grid-step: calc(var(--text-grid-step) * 2);
    --fourth-text-grid-step: calc(var(--text-grid-step) * 4);
  }

  @page {
    margin: var(--fourth-text-grid-step);
  }

  nav,
  footer,
  #print {
    display: none;
  }

  body {
    font-size: var(--text-grid-step);
    padding: unset;
  }

  p {
    line-height: 1.5;
    margin-bottom: var(--half-text-grid-step);
  }

  h2,
  h3,
  h4 {
    margin-bottom: var(--text-grid-step);
    page-break-after: avoid;
  }

  h1 + h2 {
    margin-bottom: var(--double-text-grid-step);
  }

  main > section,
  h2 ~ section {
    margin-bottom: var(--double-text-grid-step);
  }

  h4 ~ p + p,
  h3 ~ section {
    margin-bottom: var(--text-grid-step);
    page-break-inside: avoid;
  }

  h4 ~ p {
    margin: 0;
  }

  section > h4 {
    margin-bottom: var(--text-grid-step);
  }

  .links h3,
  .links h3::after,
  .links h3 + * {
    display: inline-block;
    text-align: baseline;
  }

  .links section {
    margin-bottom: 0;
  }

  .links > section {
    margin-bottom: var(--double-text-grid-step);
  }

  .skills {
    column-gap: var(--double-text-grid-step);
  }

  section:has(table),
  table {
    page-break-inside: avoid;

    :is(th, td) {
      line-height: var(--double-text-grid-step);
    }

    td {
      padding: 0 var(--double-text-grid-step);
    }
  }
}