@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: 'Bohemy';
  --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: #ff0000;
  --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: 'Bohemy';
  src: url(../../../font/Bohemy.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;
  font-weight: 400;
  cursor: pointer;
}

.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);
}

.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 {
    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-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;
}