@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --cor-principal: #3f3f3f;
  --cor-secundaria: #EE7156;
  --cor-sessao: #e1e1e1;
  --fonte-principal: "Relaway";
  --fonte-titulo: "Bebas";
  --fonte-modal: "Roboto";
  --titulo-de-sessao: 1.75rem;
}
@font-face {
  font-family: "Bebas";
  src: url(../../font/BebasNeue-Regular.otf);
}
@font-face {
  font-family: "Relaway";
  src: url(../../font/font-relaway.ttf);
}
.fonte-principal {
  font-family: var(--fonte-principal);
}
.fonte-titulo {
  font-family: var(--fonte-titulo);
}
.fonte-modal {
  font-family: var(--fonte-modal);
}
.titulo-de-sessao {
  font-size: var(--titulo-de-sessao);
}
.titulo-card {
  font-family: var(--fonte-titulo);
  font-size: var(--titulo-card);
}
.cor-principal {
  color: var(--cor-principal);
}
.cor-secundaria {
  color: var(--cor-secundaria);
}
.btn-principal {
  background-color: var(--cor-principal);
  font-family: var(--fonte-principal);
  width: 300px;
  height: 40px;
  color: #ffffff;
  transition: 0.2s ease-in-out;
}
.btn-principal:hover {
  background-color: var(--cor-secundaria);
  color: #ffffff;
}
.btn-principal {
  max-width: 300px;
  width: 245px;
  height: 45px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600 !important;
}

@media (max-width: 770px) {
  .btn-principal {
    width: 180px !important;
    height: 40px !important;
    font-size: 13px !important;
  }

  .titulo-de-sessao {
    font-size: 1.188rem;
  }

  .subtitulo-de-sessao {
    font-size: 0.813rem;
  }
}

@media (max-width: 400px) {
  .titulo-de-sessao {
    font-size: 1rem;
  }
}

/* Tamanhos de fonte */
.fs-8 {
  font-size: 8px !important;
}

.fs-10 {
  font-size: 10px !important;
}

.fs-11 {
  font-size: 11px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}
.fs-15 {
  font-size: 15px !important;
}
.fs-16 {
  font-size: 16px !important;
}
.fs-17 {
  font-size: 17px !important;
}
.fs-18 {
  font-size: 18px !important;
}
.fs-19 {
  font-size: 19px !important;
}
.fs-20 {
  font-size: 20px !important;
}
.fs-21 {
  font-size: 21px !important;
}
.fs-22 {
  font-size: 22px !important;
}
.fs-23 {
  font-size: 23px !important;
}
.fs-24 {
  font-size: 24px !important;
}
.fs-25 {
  font-size: 25px !important;
}
.fs-26 {
  font-size: 26px !important;
}
.fs-27 {
  font-size: 27px !important;
}
.fs-28 {
  font-size: 28px !important;
}
.fs-29 {
  font-size: 29px !important;
}
.fs-30 {
  font-size: 30px !important;
}
.fs-31 {
  font-size: 31px !important;
}
.fs-32 {
  font-size: 32px !important;
}
.fs-33 {
  font-size: 33px !important;
}
.fs-34 {
  font-size: 34px !important;
}
.fs-35 {
  font-size: 35px !important;
}
.fs-36 {
  font-size: 36px !important;
}
.fs-37 {
  font-size: 37px !important;
}
.fs-38 {
  font-size: 38px !important;
}
.fs-39 {
  font-size: 39px !important;
}
.fs-40 {
  font-size: 40px !important;
}
.fs-41 {
  font-size: 41px !important;
}
.fs-42 {
  font-size: 42px !important;
}
.fs-43 {
  font-size: 43px !important;
}
.fs-44 {
  font-size: 44px !important;
}
.fs-45 {
  font-size: 45px !important;
}
.fs-46 {
  font-size: 46px !important;
}
.fs-47 {
  font-size: 47px !important;
}
.fs-48 {
  font-size: 48px !important;
}
.fs-49 {
  font-size: 49px !important;
}
.fs-50 {
  font-size: 50px !important;
}

.fs-70 {
  font-size: 70px !important;
}