@import url("https://fonts.cdnfonts.com/css/arista-pro-alternate");

@font-face {
  font-family: "Quantify";
  src: url("../../fonts/quantify.ttf") format("truetype");
}

:root {
  --verde: #8cc63f;
  --verde-1: #6fa22b;
  --verde-2: #2d4212;
  --verde-3: #4c701d;
  --verde-4: #1b270b;
  --verde-5: #548317;
  --verde-abra1: #2a934e;
  --verde-abra2: #8eb871;
  --verde-abra3: #36591c;
  --verde-bandeira: #008000;
  --amarelo-abra1: #caca4d;
  --amarelo-abra2: #e3bb2c;
  --azul-abra1: #2c4485;
  --azul-abra2: #1c8bb8;
  --azul-abra3: #162c68;
  --preto: #000;
  --branco: #fff;
  --branco-1: #eeeeee;
  --branco-2: #f7f7f7;
  --branco-3: #e3e3e3;
  --branco-4: #fafafab2;
  --branco-5: #e2e2e2;
  --cinza-1: #404040;
  --cinza-2: #a6a6a6;
  --cinza-3: #d0d0d0;
  --cinza-4: #202020;
  --vermelho-1: #d40303;
  --vermelho-2: #ff3b25;
  --vermelho-3: #ff1c1c;
  --azul-1: #003d69;
  --rgba-branco-1: rgba(238, 238, 238, 0.7);
  --rgba-verde-1: rgba(76, 112, 29, 0.8);
  --rgba-preto-1: rgba(0, 0, 0, 0.5);

  --font-1: "Quantify", sans-serif;
  --font-2: "Glacial Indiferent", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 62.5%;

  & body {
    font-family: var(--font-1);
    background-color: var(--branco-1);
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--preto);
    display: flex;
    flex-flow: column;
    justify-content: space-around;

    & span,
    sub,
    input {
      font-family: var(--font-2);
    }

    & section {
      background-repeat: no-repeat;
    }

    & h1 {
      color: var(--branco-1);
      font-size: 4.78rem;
      font-weight: 700;
      line-height: 1;
    }

    & h2 {
      font-size: 2.3rem;
      line-height: 1.1;
    }

    & p,
    label {
      font-size: 1.92rem;
    }
  }
}

.flex {
  display: flex;

  &.column {
    flex-flow: column;

    &.wrap {
      flex-flow: row wrap;
    }
  }

  &.wrap {
    flex-flow: row wrap;
  }
}

.grid {
  display: grid;
}