/* tokens */

:root {
  --color-7: 17, 24, 39;
  --color-6: 51, 65, 85;
  --color-5: 100, 116, 139;
  --color-4: 148, 163, 184;
  --color-3: 203, 213, 225;
  --color-2: 248, 250, 252;
  --color-1: 255, 255, 255;

  --size-0: 4px;
  --size-1: 8px;
  --size-2: 16px;
  --size-3: 24px;
  --size-4: 32px;
  --size-5: 48px;
  --size-6: 64px;
  --size-7: 128px;
  --size-8: 256px;
  --size-9: 512px;

  --font-size-1: 14px;
  --font-size-2: 16px;
  --font-size-3: 20px;
  --font-size-4: 24px;
  --font-size-5: 28px;
  --font-size-6: 32px;
  --font-size-7: 36px;

  --font-weight-1: 400;
  --font-weight-2: 500;
  --font-weight-3: 700;
}

/* reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
  padding: 0;
  margin: 0;
  border: 0;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
}

/* styles */

html {
  font-family: "Roboto";
  color: rgb(var(--color-6));
  background-color: rgb(var(--color-1));
  padding-block-end: var(--size-5);
}

body {
  max-width: min(90%, var(--size-9));
  margin: auto;
}

p {
  font-weight: var(--font-weight-1);
  font-size: var(--font-size-3);
}

header {
  display: grid;
  grid-template:
    "a b" auto
    "a c" auto / 0.2fr 0.8fr;
  column-gap: var(--size-1);
  row-gap: var(--size-2);
  text-align: end;
  padding-block-start: var(--size-2);
}

header .photo {
  grid-area: a;

  & img {
    display: block;
    width: 100%;
    height: 100%;    
    border-radius: 15%;
    object-fit: cover;
  }
}

header .moto {
  grid-area: b;

  & h1 {
    margin-block-end: var(--size-1);
    color: rgb(var(--color-5));

    & .name {
      color: rgb(var(--color-7));
    }
  }
}

header .social {
  grid-area: c;
  display: flex;
  justify-content: end;
  align-items: end;
  gap: var(--size-4);
  width: 100%;

  & svg {
    width: var(--size-4);
    fill: rgb(var(--color-7));
    transition: all 500ms;
  }

  & svg:hover {
    fill: rgb(var(--color-5));
    transform: scale(1.5);
    transition: all 250ms;
  }

  & .self {
    display: none;
  }
}

section h1 {
  margin-block-start: var(--size-4);
  font-size: var(--size-5);
  font-weight: var(--font-weight-3);
}

section h2 {
  margin-block-start: var(--size-2);
  font-size: var(--size-3);
  font-weight: var(--font-weight-2);
}

section .description {
  margin-block-start: var(--size-1);
  font-weight: var(--font-weight-1);
  font-size: var(--font-size-2);
  text-align: justify;
}

section .split {
  margin-block-start: var(--size-0);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-2);
}

section .period {
  font-size: var(--font-size-1);
}

/* print */

@media print {
  /* the translation page provided by google injects an iframe with its toolbar */
  iframe {
    display: none;
  }

  body {
    max-width: none;
    padding-block: var(--size-4);
    padding-inline: var(--size-6);
  }

  header .social {
    display: flex;
    flex-direction: column;
    gap: 0;

    .self {
      display: revert;
    }
  }

  svg,
  .photo,
  .no-print {
    display: none;
  }

  header a::after {
    content: attr(href);
  }
}