@import url("https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --cor-de-fundo: #000000;
  --fonte-principal: "Baloo Chettan 2";
  --fonte-titulo: "Bebas";
  --fonte-card: "Inter";
  --fonte-artista: "sky";
  --titulo-de-sessao: 1.75rem;
  --subtitulo-de-sessao: 1rem;
  --titulo-card: 1.875rem;
  --titulo-artista: 10rem;
  --back-btn-principal: #ffff;
  --btn-cor-texto-principal: #000000;
  --back-btn-secundario: #b30000;
  --btn-cor-texto-secundario: #ffff;
  --back-btn-artista: #000000;
  --btn-cor-texto-artista: #ffe169;
}
@font-face {
  font-family: "Bebas";
  src: url(../../../font/BebasNeue-Regular.otf);
}

@font-face {
  font-family: "sky";
  src: url(../../../font/SKYWATER.otf);
}
.cor-de-fundo {
  background-color: var(--cor-de-fundo);
}
.fonte-principal {
  font-family: var(--fonte-principal);
}
.fonte-titulo {
  font-family: var(--fonte-titulo);
}
.fonte-card {
  font-family: var(--fonte-card);
}

.fonte-artista {
  font-family: var(--fonte-artista);
  font-size: var(--titulo-artista);
}

.titulo-de-sessao {
  font-size: var(--titulo-de-sessao);
}

.subtitulo-de-sessao {
  font-size: var(--subtitulo-de-sessao);
}

.titulo-card {
  font-family: var(--fonte-titulo);
  font-size: var(--titulo-card);
}
.btn-principal {
  background-color: var(--back-btn-principal);
  color: var(--btn-cor-texto-principal);
}
.btn-principal,
.btn-secundario,
.btn-artista {
  max-width: 300px;
  width: 245px;
  height: 45px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600 !important;
}

.btn-secundario {
  background-color: var(--back-btn-secundario);
  color: var(--btn-cor-texto-secundario);
}

.btn-artista {
  background-color: var(--back-btn-artista);
  color: var(--btn-cor-texto-artista);
  border: 1px solid var(--btn-cor-texto-artista);
}

.btn-servicos {
  background-color: var(--back-btn-secundario);
  color: var(--btn-cor-texto-secundario);
  color: #fff;
  font-family: var(--fonte-principal);
  max-width: 350px;
  width: 285px;
  height: 50px;
  border-radius: 8px;
  cursor: pointer;
}

.marcacao {
  background-color: var(--cor-de-fundo);
  color: var(--cor-de-fundo);
  border-top: 3px solid #700000;
  border-left: 3px solid #700000;
  height: 30px !important;
  width: 164px !important;
}

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

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

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

  .titulo-card {
    font-family: var(--fonte-titulo);
    font-size: var(--titulo-card);
  }

  .fonte-artista {
    font-size: 9rem;
  }
}

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

/* Tamanhos de fonte */
.fs-8 {
  font-size: 8px !important;
}
.fs-9 {
  font-size: 9px !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-60 {
  font-size: 60px !important;
}
.fs-70 {
  font-size: 70px !important;
}
.fs-100 {
  font-size: 100px !important;
}