:root {
    /* 
    Altura Para Seta (Imagem Maior) e Figura Musical 
    Usado Também nos Containers de Seta (com + 2vw) e Figura  
    Para ficarem da Mesma Altura */
    --v-height-seta: 12vw;
}

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

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

body {
    /* user-select: none; */
    padding: 0;
    margin: 0;
}

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

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

    padding-top: 2.5vw;
    padding-bottom: 5vw;

    background-color: #ddf1fd;
}

.wrapper-movimento {
    display: flex;
    flex-direction: column;

    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;

    height: fit-content;
    /* padding-top: 0.8vw; */
    /* padding-bottom: 0.4vw; */

    padding: 0 !important;
    margin: 0 !important;

    border: 0.4vw solid black;
    background-color: white;
    border-radius: 1vw;
    box-shadow: rgba(45, 45, 45, 0.5) 0.8vw 0.6vw 0.8vw;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    text-align: center;
    font-weight: 700;
    font-size: 5vw;
    color: #DA1C1C;
    margin: 0;
    padding: 0;
    padding-bottom: 2vw;

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

/* Cabeçalho */
.box-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding: 0;
    margin: 0;
    padding-left: 1.5vw;
    padding-right: 1.5vw;

    border-bottom: 0.4vw solid black;
    border-radius: 0.8vw 0.8vw 0 0;
    background-color: #ddd;

    /*** Altura Do Nome Do Rítmo *****************/
    /* height: 6.5vw; */
    height: fit-content;
}

.box-header .nome-ritmo {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 4.7vw;
    font-weight: 700;
    line-height: 0.6;
    padding-left: 2vw;
    padding-right: 2vw;
}

.box-header .box-compasso span {
    font-size: 3vw;
    line-height: 1;
    font-weight: 600;
}

.box-header .box-compasso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    align-content: space-around;

    font-family: Roboto, Arial, sans-serif;
    font-weight: 500;

    height: fit-content;
    width: fit-content;
    text-align: center;
    line-height: 1;
}

.box-header .box-compasso span:nth-child(1) {
    text-decoration: underline;
    text-underline-offset: 0.3vw;
    line-height: 1;

    padding: 0;
    margin: 0;
}

.box-top {
    display: flex;
    flex-direction: row;

    align-items: center;
    align-content: center;
    justify-content: space-between;
    justify-items: center;

    width: 100%;
    height: fit-content;
    margin: 0;
    padding: 0;
    padding-top: 0.4vw;
    padding-bottom: 0.4vw;

    border-radius: 1vw 1vw 0 0;

    background-color: #f3ffa1;
    /* background-color: rgb(241, 241, 241); */
    border-bottom: 0.25vw solid #b0c430;
}

.box-bot {
    display: flex;
    flex-direction: row;

    align-items: center;
    align-content: center;

    justify-content: space-between;
    justify-items: center;

    width: 100%;
    height: fit-content;
    margin: 0;
    padding: 0;
    padding-top: 0.25vw;
    padding-bottom: 0.25vw;

    border-radius: 0 0 1vw 1vw;

    background-color: #DAF7A6;
    border-top: 0.25vw solid #79ba00;
}

.wrapper-movim {
    display: flex;
    flex-direction: row;
}

.box-movimento {
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;
    align-content: center;

    /* height: fit-content; */
    width: fit-content;
    /* padding: 1vw; */

    padding: 0;
    margin: 0;

    /* padding-top: 0;
    padding-bottom: 0; */

    /* border: 0.25vw solid blue; */
}

/* Movimento */
.wrapper-seta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;

    height: fit-content;
    padding-left: 1vw;
    padding-right: 1vw;

    width: 6vw;

    /* position: relative; */
    /* padding-bottom: 7vw; */
    z-index: 2;

    /* border: 0.25vw solid deeppink; */
}

.box-dedos {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;

    height: fit-content;

    padding-left: 1vw;
    padding-right: 1vw;

    width: 1vw;
    /* position: absolute; */
    /* margin-bottom: 0; */
    /* margin-bottom: 1vw; */
    /* margin-left: 1.4vw; */
    z-index: 1;

    /* border: 0.25vw solid chartreuse; */
    /* background-color: cadetblue; */
}

.dedos {
    font-family: Consolas, Arial, Helvetica, sans-serif;
    font-size: 3vw;
    letter-spacing: 0.25vw;
    font-weight: 600;
    text-align: center;
    line-height: 1;

    width: 4vw;
    /* min-width: 10vw; */
    min-width: fit-content;
    z-index: 3;
    padding: 0.15vw 0.8vw 0 0.8vw;

    /* border: 0.25vw solid black;
    background-color: rgb(213, 250, 250); */
}

.seta {
    display: flex;
    flex-direction: column;

    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;

    height: var(--v-height-seta);

    margin: 0 !important;
    margin-top: 1.2vw !important;
    margin-bottom: 1.2vw !important;

    border: 0.25vw solid transparent;
    box-shadow: none;
    background-color: unset;

    transition: all ease .3s !important;
}

.seta img {
    height: var(--v-height-seta);
    object-fit: contain;

    padding: 0 !important;
    margin: 0 !important;
    z-index: 3;

    border: 0.25vw solid transparent;
    /* background-color: rgb(196, 255, 255); */
    /* box-shadow: rgba(45, 45, 45, 0.7) 0.5vw 0.5vw 0.5vw; */
}

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

    height: fit-content;
    padding-left: 1vw;
    padding-right: 1vw;

    width: 6vw;
    /* position: absolute; */
    margin-bottom: 0;
    /* margin-left: 1.4vw; */
    z-index: 2;

    border: 0.25vw solid transparent;
}

.frase {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3vw;
    font-weight: 600;
    text-align: center;
    line-height: 1;

    width: fit-content;
    min-width: 8vw;
    padding: 0.5vw 1.2vw 0.5vw 1.2vw;
    border: 0.25vw solid transparent;

    transition: all ease .3s;
}

/* Figura */
/*--- Dedos ja Foi em Seta ---*/

.figura {
    display: flex;
    flex-direction: column;

    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;

    height: var(--v-height-seta);

    margin: 0 !important;
    padding: 0 !important;

    padding-left: 0.5vw !important;
    padding-right: 0.5vw !important;
}

.figura img {
    height: 7.5vw;
    object-fit: contain;

    padding: 0 !important;
    margin: 0 !important;
    border: 0.25vw solid transparent;
}

.box-espaco {
    display: flex;
    flex-direction: column;

    align-items: center;
    /* justify-content: center; */
    align-content: center;
    justify-content: space-between;

    /* height: fit-content; */
    width: fit-content;

    border: 0.25vw solid transparent;
}

.espaco {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3vw;
    font-weight: 600;
    text-align: center;
    line-height: 1;

    width: fit-content;
    padding: 0.15vw 0.4vw 0 0.4vw;

    border: 0.25vw solid transparent;
    /* background-color: white; */
}

/* Cores Dedos */
.blue {
    color: blue;
}

.red {
    color: red;
}

.green {
    color: green;
}

.cyan {
    color: rgb(0, 196, 196);
}

/***********************/
/*** Player De Audio ***/
/***********************/
.player {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding: 0;
    margin: 0;
    margin-top: 1.5vw;
    margin-bottom: 3vw;
    height: fit-content;

    background-color: transparent;
}

.player audio {
    border-radius: 50vw;
    border: 0.25vw solid black;
    box-shadow: rgba(45, 45, 45, 0.5) 0.6vw 0.6vw 0.6vw;
    width: 100%;
}

/* @media (orientation: portrait) {
    .player audio {
         height: 100px; 
    }
} */

/*** Mudança do Rítmo (Mudar de Página sem Gerar Navegação) ***/
.varia-ritmo {
    display: flex;

    font-size: 3vw;
    margin-bottom: 1.5vw;
    padding-left: 1.5vw;
    padding-right: 1vw;
    border: 0.2vw solid black;
    border-radius: 0.6vw;
    background-color: rgb(255, 255, 225);
}

.varia-ritmo .titulo-vr {
    color: black;
    font-weight: 600;
    padding-right: 1vw;
}

.varia-ritmo .opcao a {
    text-decoration: none;
    color: blue;
    padding-left: 0.8vw;
}

.varia-ritmo .opcao a:hover {
    text-decoration: underline;
}

.varia-ritmo .opcao {
    display: flex;
    align-items: center;
    padding-left: 1vw;
}

#nome-musica {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    text-align: center;
    font-weight: 700;
    font-size: 4vw;
    color: blue;
    margin: 0;
    padding: 0;
    padding-bottom: 2vw;

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