:root {
  --highlight-orange: #ff830b;
  --secondary-orange: #fe7608;

  --orange-1: #c66011;
  --orange-2: #e37823;
  --orange-3: #e47d2c;
  --orange-4: #e67f33;
  --orange-5: #e6883e;
  --orange-6: #e88f48;
  --orange-7: #ea9655;
  --orange-8: #ed9c5a;
  --orange-9: #eda061;

  --blue-1: #09536c;
  --blue-2: #136984;
  --blue-3: #186e89;
  --blue-4: #196f88;
  --blue-5: #1d738c;
  --blue-6: #1e748d;
  --blue-7: #257993;
  --blue-8: #277d96;
  --blue-9: #2a8099;

  --green-1: #30591f;
  --green-2: #3e6a2b;
  --green-3: #426e2f;
  --green-4: #447033;
  --green-5: #4e773f;
  --green-6: #537b46;
  --green-7: #5a824e;
  --green-8: #698f5e;
  --green-9: #6d9163;

  --bruna-blue: #0294b5;
  --secondary-blue: #004c98;
  --NavBar-background: #a3bfc5;
  --text-color: #333;
}

@font-face {
  font-family: 'beauty-magnolia';
  src: url('../Fonts/beauty-magnolia.otf')
    format('opentype');
}

@font-face {
  font-family: 'inter-variable';
  src: url('../Fonts/Inter-VariableFont_opsz_wght.ttf')
    format('trueType');
}

@font-face {
  font-family: 'inter-italic-variable';
  src: url('../Fonts/Inter-Italic-VariableFont_opsz_wght.ttf')
    format('trueType');
}

@font-face {
    font-family: 'klore';
    src: url('../Fonts/klore-demo.ttf')
        format('opentype');
}

@font-face {
    font-family: 'montserrat-variable';
    src: url('../Fonts/Montserrat-VariableFont_wght.ttf')
        format('trueType');
}

@font-face {
  font-family: 'firacode-variable';
  src: url('../Fonts/FiraCode-VariableFont_wght.ttf')
    format('trueType');
}

header {
  background-color: var(--blue-5);
  padding: 20px 0;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

p {
  font-family: 'inter-variable', sans-serif;
  margin-block-start: 0px;
}

h1 {
  /* font-family: 'klore', sans-serif; */
  font-size: 75px;
  /* color: var(--highlight-orange); */
  color: white;
  /* text-align: center; */
  margin: 20px calc(((100vw - 1200px) / 2) + 27.5px) 20px calc(((100vw - 1200px) / 2) + 50px);
  font-weight: normal;
}

.header-klore {
  font-family: 'klore', sans-serif;
  /* letter-spacing: 0.03em; */
  /* font-size: 75px;  */
  /* color: white; */
  margin-right: 35px;
  transition: color 0.2s ease;
}

.header-firacode {
  font-family: 'firacode-variable', cursive;
  font-size: 1em;
  font-weight: 600;
  /* color: var(--highlight-orange); */
  transition: color 0.2s ease;
}

h1:hover .header-klore, h1:hover .header-firacode {
  cursor: default;
  color: var(--highlight-orange);
  /* -webkit-text-stroke: 2px var(--highlight-orange); */
}

.article-title {
  font-family: 'firacode-variable', cursive;
  font-size: 50px;
  text-align: center;
}

.introduction-body {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  margin: 20px 0;
}

.article-text {
  max-width: 1200px;
  margin: 0 auto; /* centraliza a coluna */
  line-height: 1.6;
  font-size: 20px;
}

html, body {
  margin: 0;
  padding: 0;
  /* overflow-x: hidden; */
}

main {
  margin-left: 50px;
  margin-right: 50px;
}