@font-face {
  font-family: Consolas;
  src: url(../../_fontes/consola.ttf);
}

@font-face {
  font-family: "Liberation Mono";
  src: url(../../_fontes/LiberationMono-Regular.ttf);
}

@font-face {
  font-family: "Bahnschrift Condensed";
  /* font-family: "Bahnschrift"; */
  src: url(../_fontes/bahnschrift.ttf);
}

body {
  font-family: Arimo, Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  user-select: none;
  width: 100vw;
}

.container {
  /*** Define Tamanho Para Centralizar Sem Quebrar ***/
  height: 100%;
  min-height: 100vh;

  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

  padding-top: 1vw;

  /* background-color: bisque; */
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 0;
  margin: 0;
  /* margin: 22px; */
  width: 100vw;

  /* background-color: coral; */
}

.cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;
  padding-top: 1.5vw;
  padding-bottom: 1.5vw;

  width: fit-content;
}

h1,
h2,
h3 {
  line-height: 2vw;
  letter-spacing: 1px;
  font-family: Roboto, Arimo, Arial, Helvetica, sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 4vw;
  color: #DA1C1C;
}

h2 {
  line-height: 4.5vw;
  font-size: 4.5vw;
  font-weight: 900;
  color: rgb(61, 61, 255);

  -webkit-text-stroke-width: 0.9px;
  -webkit-text-stroke-color: rgb(255, 255, 255);
  text-shadow: 0.5vw 0.5vw 0.8vw #484848;
}

h3 {
  font-size: 4vw;
  color: #009900;
}

.corpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;
  max-width: 100vw;

  /* background-color: #DA1C1C; */
}

.cifra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  margin: 0;
  padding: 0;
  padding-top: 2vw;
  padding-bottom: 2vw;

  width: 100vw;

  padding-left: 3vw;
  /* padding-right: 4vw; */

  background-color: #D5F5E3;
  /* background-color: rgb(219, 219, 255);       */
}

.tab {
  font-family: Consolas, monospace;
  letter-spacing: -0.19vw;
  line-height: 0.92;
  font-weight: 100;
  /*** Largura dos Riscos (cordas) ***/

  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border: 0.25vw solid #000;

  padding-top: 0.6vw;
  padding-left: 0.8vw;
  padding-right: 0.9vw;
  padding-bottom: 0.1vw;

  margin: 0;
  margin-left: 0;
  /*** Posição Em Relação à Esuqerda ***/
  margin-bottom: 0.9vw;
}

.mao-esq,
.obs {
  font-family: "Liberation Mono", monospace;

  margin: 0;
  padding: 0;

  margin-left: 0.90vw;
  /*** Posição Em Relação à Tab, Na Esuqerda ***/

  letter-spacing: -0.19vw;
  line-height: 0.9;
  margin-top: 1vw;
  line-height: .85;
}

.obs {
  margin: 0;
  padding: 0;
  margin-left: 0.90vw;
  /*** Posição Em Relação à Tab, Na Esuqerda ***/
}


/*** Contracanto **************/
.contracanto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.titulo-ctc {
  font-family: Consolas, monospace;
  letter-spacing: 0.1vw;
  font-size: 3.3vw;
  color: #000;
  margin: 0;
  padding: 0;
  margin-top: .95vw;
  padding-top: 2.5vw;
}

.ng {
  font-weight: 700 !important;
}

.ngr {
  font-weight: 700 !important;
  color: #000 !important;
}

/*** Ajustes Solo ***************/
b,
i,
u,
s {
  font-weight: unset;
  font-style: unset;
  text-decoration: none;
  font-weight: 800;
}

b {
  color: rgb(1, 1, 230);
}

i {
  color: rgb(0, 169, 0);
}

u {
  color: black;
}

s {
  color: rgb(223, 0, 0);
}

/*** s = Espaco de Tempo Maior ***/
mark {
  background-color: rgb(220, 220, 220);
}

.mao-esq b,
.mao-esq i,
.mao-esq u,
.mao-esq s {
  font-weight: 500;
  line-height: .85;
}

.obs b,
.obs i,
.obs u,
.obs s {
  font-weight: 500;
  line-height: .85;
}

/*** Parte do Solo ***/
span {
  font-weight: 900;
  text-decoration: none;
  color: rgb(0, 136, 255);
  text-shadow: rgb(176, 176, 176) 0.1em 0.1em 0.2em
}

.parte {
  line-height: 1.5vw;
  text-decoration: underline;
  font-style: oblique;
  color: rgb(135, 205, 222);
}

/*** pd = Pedal ************/
.pd {
  text-decoration: underline;
}

/**** mb = margin-bottom ****************/
.espaco {
  margin: 0;
  padding: 0;
  /* background-color: #009900; */
}

/*** Audio ***/

.player {
  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100vw;

  margin: 0;
  padding: 10px;
  /* padding-left: 10px;
  padding-right: 10px; */
  background-color: #999;
}

audio {
  width: 100%;
}