:root {
  --text:    hsl(0, 0%, 0%);
  --grey:    hsl(0, 0%, 56%);
  --base:    hsl(0, 0%, 100%);
  --primary: hsl(150, 50%, 40%);
  --line:    hsla(0, 0%, 0%, 0.1);
}

* {
  font-family: "Inter Tight";
  font-size: 12px;
  font-weight: 300;
  color: var(--text);

  transition: background-color 100ms, 
              color 100ms;
}

a, 
a:link, 
a:visited {
  color: var(--text);
  font-weight: 400;
  margin: 0 2px;
}

a:hover {
  color: var(--primary);
}

body {
  width: 100vw;
  min-height: 100vh;
  position: relative;

  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--base);
}

body.dark {
  --text:    hsl(50, 12%, 96%);
  --grey:    hsl(50, 4%, 76%);
  --base:    hsl(0, 0%, 6%);
  --primary: hsl(150, 60%, 52%);
  --line:    hsla(0, 0%, 100%, 0.1);

  .toggle {
    svg.moon { display: none }
    svg.sun { display: unset }
  }
}

.toggle {
  position: absolute;
  inset: 24px 24px auto auto;
  cursor: pointer;

  svg {
    fill: var(--grey);
  }

  svg.moon { display: unset }
  svg.sun { display: none }
}

.toggle:hover {
  filter: brightness(125%);
}

a.pdf_anchor {
  position: absolute;
  inset: auto 24px 24px auto;
  background-color: var(--base);
  padding: 0 6px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: min(calc(100vw - 64px), 1000px);
}

.top {
  /* width: max-content; */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.title {
  font-family: "Gabarito";
  font-size: 42px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .7;
  color: var(--text);
}

.subtitle {
  font-family: "Gabarito";
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -3.5%;
  text-transform: uppercase;
  line-height: .7;
  color: var(--grey);
}

.grid {
  font-size: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  line-height: .7;
}

.grid__header {
  font-weight: 500;
}

.bottom {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 64px;
}

.column, .hide, .show {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.show {
  display: none;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.section {
  position: relative;
}

.section__title {
  font-family: "Gabarito";
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary);
  line-height: .7;
  margin-bottom: 16px;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-wrap: nowrap;
}

.section__line {
  width: 100%;
  height: 2px;
  background-color: var(--line);
}

.section__content {
  display: flex;
  flex-direction: column;
  gap: 12px;

  p {
    margin: 0;
  }
}

.item {
  ul {
    padding-left: 1em;
  }

  li {
    margin: 2px 0;
    padding-left: 12px;
  }
}

.item__header {
  display: flex;
  flex-direction: row;
  align-items: end;
  gap: 12px;

  div {
    line-height: .7;
  }
}

.item__header__title {
  font-family: "Gabarito";
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -1.5%;
}

.item__header__subtitle {
  font-family: "Gabarito";
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--grey);
}

.item__header__date {
  font-family: "Gabarito";
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--grey);

  margin-left: auto;
}


@media (width <= 960px) {

  body {
    padding: 96px 0;
    align-items: start;
  }

  /* .content {
    align-items: center;
  } */

  .titles {
    align-items: center;
  }

  .contact.grid {
    grid-template-columns: auto 1fr auto auto;
  }

  .bottom {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hide {
    display: none;
  }

  .show {
    display: flex;
  }
}


@media (width <= 460px) {

  .titles {
    align-items: start;
  }

  .contact.grid {
    grid-template-columns: auto 1fr;
  }

  .row {
    gap: 16px;
  }

  .item__header {
    flex-direction: column;
    align-items: start;
    gap: 3px;

    div {
      line-height: 1;
    }
  }

  .item__header__date {
    margin-left: 0;
  }
}




/* canvas {
  max-height: 100vh;
  max-width: 100vw;

  border-radius: .5vh;
} */