/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");

/* Variables de typo */
:root {
  --font-mono: "JetBrains Mono", "Courier New", Courier, monospace;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

/*--------------------------------------------------------------------*/

h1,
h2,
h3 {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.2;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

p,
span,
a {
  font-family: var(--font-mono);
  line-height: 1.2;
  color: var(--color-primary);
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

h1 {
  font-size: 39px;
  text-transform: uppercase;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 39px 0px;
}

h2 {
  font-size: 18px;
  text-transform: uppercase;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 27px 0px;
}

h3 {
  font-size: 15px;
  text-transform: uppercase;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 12px 0px;
}

p,
span {
  font-size: 12px;
  text-transform: none;
}

button,
input,
select,
textarea {
  font-family: var(--font-mono);
}

a {
  font-family: var(--font-mono);
  text-decoration: none;
  transition: color 0.2s ease;
}

strong,
b {
  font-weight: var(--font-weight-bold);
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
  h1 {
    font-size: 45px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 24px;
  }

  p {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 45px;
  }

  h2 {
    font-size: 30px;
  }

  h3 {
    font-size: 24px;
  }

  p {
    font-size: 16px;
  }
}