html {
  scroll-behavior: smooth;
}

body {
  justify-content: center;

  margin: 0;
  padding: 0;

  height: 1822px;

  background: var(--page-background-color);

  font-size: 100%;
}

@font-face {
  font-family: "Inter";
  src: url(Fontes/Inter/Inter_regular.ttf);
}

@font-face {
  font-family: "M-Plus Regular";
  src: url(Fontes/M_PLUS/MPLUSRounded1c-Regular.ttf);
}

@font-face {
  font-family: "Kode Mono";
  src: url(Fontes/Kode/KodeMono-VariableFont_wght.ttf);
}

/* Color palete */
:root {
  --primary-color: #836fff;
  --primary-color-shadow: #39316f;
  --secondary-color: #15f5ba;
  --secondary-color-shadow: #09644c;

  --red-color: red;

  --dimmed-primary-color: #826fff7c;

  --hoover-color: var(--secondary-color);

  --white-font-color: white;

  --page-background-color: #0a0f1e;
  --card-background-color: #0a0f1e;
  --card-hover-color: #0b0a1f;

  --progress-container-background: #efecec0a;

  --header-background-color: #0a0f1e;
  --footer-background-color: #0a0f1e;
}

/* Main gradients */
:root {
  --gradient-01: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color),
    var(--primary-color)
  );

  --gradient-02: linear-gradient(
    to right,
    var(--secondary-color),
    var(--primary-color),
    var(--secondary-color)
  );

  --gradient-03: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  );

  --h-navbar-logo-gradient: linear-gradient(
    to bottom,
    var(--primary-color),
    var(--primary-color),
    var(--secondary-color)
  );

  --progress-container-gradient: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  );
}

/* Card colors and gradients */
:root {
  --card-orange: #fc6736;

  --card-blue: #3667fc;

  --card-yellow: #ebe457;

  --card-softBlue: #5792eb;

  --card-purple: #836fff;

  --card-white: white;

  --card-title1-gradient: linear-gradient(
    to right,
    var(--card-orange),
    var(--card-white)
  );

  --card-title2-gradient: linear-gradient(
    to right,
    var(--card-blue),
    var(--card-white)
  );

  --card-title3-gradient: linear-gradient(
    to right,
    var(--card-yellow),
    var(--card-white)
  );

  --card-title4-gradient: linear-gradient(
    to right,
    var(--card-softBlue),
    var(--card-white)
  );

  --card-title5-gradient: linear-gradient(
    to right,
    var(--card-purple),
    var(--card-white)
  );
}