:root {
    --v-border: 0.5vw solid black;
    --v-border-radius: 1.2vw;
    --v-border-temp: 0.2vw solid red;

    --v-bkgrd-cor-dedos: rgb(229, 249, 249);

    --v-size-setas: 14vw;
    --v-size-fig-mus: 7vw;

    --v-aumento: 100;
    --v-aumento-margem: 0vw;
}

body {
    user-select: none;
    padding: 0;
    margin: 0;

    font-family: Roboto, Arial, Helvetica, sans-serif;
}

.container-ritmo {
    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: 6vw;
    padding-top: 2.5vw;
    padding-bottom: 1.5vw;

    background-color: #ddf1fd;
}

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

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

    width: fit-content;
    height: 100%;

    margin-top: 3vw;
    margin-bottom: 3vw;

    background-color: white;
    border: var(--v-border);
    border-radius: var(--v-border-radius);
    box-shadow: rgba(45, 45, 45, 0.5) 0.8vw 0.8vw 0.8vw;
}

.box-ritmo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: 100%;

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

    border-bottom: var(--v-border);
    border-radius: var(--v-border-radius) var(--v-border-radius) 0 0;

    background-color: #eee;

    /*** Altura Do Nome Do Rítmo *****************/
    height: 8vw;
}

.nome-ritmo {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 6vw;
    font-weight: 700;
    line-height: 1;
}

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

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

.box-compasso span {
    font-size: 3.5vw;
    line-height: 1;
    font-weight: 700;
}

.box-compasso span:nth-child(1) {
    text-decoration: underline;
    text-underline-offset: 0.4vw;
    line-height: 1;
    padding-right: 0.6vw;
}

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

    width: 100vw;

    margin: 0;
    margin-bottom: 1.2vw;

    padding: 0vw;

    background-color: transparent;
    z-index: 3;
}

audio {
    box-shadow: rgba(45, 45, 45, 0.5) 0.8vw 0.8vw 0.8vw;
    border-radius: 50vw;
    border: 0.25vw solid black;

    margin: 0;
    margin-left: 10vw;
    margin-right: 10vw;
}

/**********************************************/
.seta,
.figura {
    padding: 0;
    margin: 0;

}

.seta {
    z-index: 99;
}

.seta img {
    width: fit-content;
    height: fit-content;

    height: var(--v-size-setas);
    object-fit: contain;
    border: 0.2vw solid transparent;

    padding: 0;
    margin: 0;

    padding-left: 0.30vw;
    padding-right: 0.30vw;

    transition: all ease .3s;

    /* border: 0.2vw solid red; */
}

.figura img {
    width: fit-content;
    height: fit-content;

    height: var(--v-size-fig-mus);
    object-fit: contain;

    padding: 0;
    margin: 0;

    padding-left: 0.30vw;
    padding-right: 0.30vw;
}

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

    width: fit-content;

    padding: 0;
    margin: 0;
}

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

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}

.box-mv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    width: fit-content;
    padding: 0;
    margin: 0;

    /* margin: 0.2vw; */
    /* background-color: rgb(255, 227, 136); */
}

.box-cor-back {
    display: flex;
    flex-direction: column;
    align-items: center;

    height: fit-content;
    width: 100%;

    margin: 0;
    padding: 0.5vw;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;

    /* margin-top: 1vw; */

    background-color: #DAF7A6;
    border-top: 0.2vw solid #476d00;
}

/*********************************************************/
@media (orientation: portrait) {
    /* @media screen and (max-width: 600px) { */
    .wrapper-ritmo {
        --v-size-setas: 28vw;
        --v-size-fig-mus: 16vw;

        width: fit-content;
        max-width: 98vw;
    }

    .contagem,
    .dedos {
        font-size: 4vw;
    }

    .meio {
        height: calc(var(--v-size-setas) + 2vw + 12vw);
    }

    .top,
    .bot {
        font-size: 2vw;
    }

    audio {
        /*** Ajuste da Largura ***/
        width: 88%;
    }
}

/*********************************************************/
@media (orientation: landscape) {
/* @media screen and (min-width: 600px) { */
    .wrapper-ritmo {
        --v-size-setas: 13vw;
        --v-size-fig-mus: 7vw;

        width: fit-content;
        /* max-width: 54vw; */
        max-height: 80vh;
    }

    .contagem,
    .dedos {
        font-size: 3vw;
    }

    .meio {
        height: 17vw;
        height: calc(var(--v-size-setas) + 2vw + 12vw);
    }

    .top,
    .bot {
        font-size: 3vw;
    }

    audio {
        /*** Ajuste da Largura ***/
        width: 51%;
    }
}

.margem {
    height: 100%;

    display: flex;
    flex-direction: column;
    align-content: space-between;
}

.margem-1 {
    width: 2vw;
}

.margem-2 {
    width: 2vw;
}

.margem .top {
    background-color: var(--v-bkgrd-cor-dedos);
    border-bottom: 0.2vw solid rgb(0, 124, 124);

    margin: 0;
    padding: 0.4vw;
    padding-left: 0.8vw;
    padding-right: 0.8vw;
    /* margin-bottom: 1vw; */

    line-height: 1;
    /* border: 0.8 solid transparent; */
}

.margem .bot {
    background-color: #DAF7A6;
    border-top: 0.2vw solid #476d00;

    margin: 0;
    padding: 0.6vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    margin-top: 1vw;
}

.margem-1 .bot {
    border-radius: 0 0 0 0.8vw;
}

.margem-2 .bot {
    border-radius: 0 0 0.8vw 0 ;
}

.meio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    height: calc(var(--v-size-setas) + 2vw);

    /* background-color: blueviolet; */
}

.dedos,
.contagem {
    background-color: var(--v-bkgrd-cor-dedos);

    margin: 0;
    padding: 0.4vw;
    padding-left: 0.8vw;
    padding-right: 0.8vw;
    color: blue;

    text-align: center;
    line-height: 1;
    width: 100%;

    border: 0.8 solid transparent;
}

.dedos {
    font-family: Courier, 'Courier New', monospace;
    font-weight: 700;
    border-bottom: 0.2vw solid rgb(0, 124, 124);

    /* margin-bottom: 1vw; */
}

.contagem {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: 700;

    border: 0.25vw solid transparent;

    background-color: #DAF7A6;

    margin: 0;
    padding: 0.6vw;
    padding-top: 0.2vw;
    padding-bottom: 0.2vw;

    transition: all ease .3s;
}

.cont-parte {
    z-index: 99;
}

.c-verde {
    color: green;
}

.c-vermelho {
    color: red;
}

.c-preta {
    color: black;
}