: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: 15vw;
}

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

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

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


header h1,
header h2 {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    line-height: 1;
    text-align: center;
    padding-bottom: 2vw;
}

header h1 {
    color: #ff4646;
    font-size: 4.8vw;
    font-weight: 600;
}

header h2 {
    color: rgb(26, 106, 255);
    color: rgb(0, 84, 240);
    font-size: 5.2vw;
    font-weight: 700;
}

main {
    /* background-color: aquamarine; */
    padding: 1vw;
}

.wrapper-ritmo {
    height: fit-content;
    color: black;

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

.wrapper-metronomo {
    background-color: cadetblue;
    padding: 2vw;
}

h1 {


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

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

.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.2vw solid black;
    border-radius: 0.8vw 0.8vw 0 0;
    background-color: #ddd;

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

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

.box-compasso {
    display: flex;
    flex-direction: column;
}

.box-compasso> :nth-child(1) {
    text-decoration: underline;
    text-underline-offset: 0.3vw;
}

.box-header .box-compasso span {
    font-family: Arial, sans-serif;
    font-weight: 400;

    font-size: 3vw;
    line-height: 1;
    font-weight: 600;

    /* background-color: brown; */
}

/* ------- */

.box-ritmo {
    display: grid;
    grid-template-columns: 1vw auto auto auto auto auto auto auto auto auto auto 1vw;
    /* background-color: dodgerblue; */
    padding: ivw;

    /* border: 2px solid black; */
    /* margin-bottom: 1vw; */
}

.box-ritmo div {
    display: grid;
    align-items: center;

    font-size: 3vw;
    text-align: center;

    background-color: white;
    color: black;

    padding: 0.4vw;
}

.box-ritmo .dedo {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 800;
    background-color: rgb(251, 251, 192);

    border-bottom: 0.1vw solid black;

    margin-bottom: 0.5vw;
}

.box-ritmo .frase {
    font-family: Arial, sans-serif;
    font-weight: 600;
    background-color: rgb(216, 255, 156);
    border-top: 0.1vw solid black;
    border-bottom: 0.1vw solid transparent;

    margin-top: 0.5vw;
}

.frase-mrg-l,
.frase-mrg-r {
    margin-top: 0.5vw;
}

.box-ritmo .espaco {
    background-color: rgb(216, 255, 156);
    border-top: 0.1vw solid black;

    margin-top: 0.5vw;
}

/*** Margens: Left - Right ***/
.box-ritmo .dedo-mrg-l {
    /* Margem - Left */
    background-color: rgb(251, 251, 192);
    border-bottom: 0.1vw solid black;
}

.box-ritmo .dedo-mrg-r {
    /* Margem - Right */
    background-color: rgb(251, 251, 192);
    border-bottom: 0.1vw solid black;
}

.box-ritmo .frase-mrg-l {
    /* Margem - Left */
    background-color: rgb(216, 255, 156);
    border-top: 0.1vw solid black;
    border-bottom: 0.1vw solid rgb(216, 255, 156);

    border-radius: 0 0 0 1vw;
}

.box-ritmo .frase-mrg-r {
    /* Margem - Right */
    background-color: rgb(216, 255, 156);
    border-top: 0.1vw solid black;
    border-bottom: 0.1vw solid rgb(216, 255, 156);

    border-radius: 0 0 1vw 0;
}

/*** Setas ***/

.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.2vw solid transparent;
    /* box-shadow: none; */
    background-color: unset;

    z-index: 9;

    transition: all ease .3s !important;
}

.seta img {
    height: var(--v-height-seta);
    /* height: 15vw; */
    object-fit: contain;

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

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

    /* background-color: white; */
}

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

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

.espaco-left {
    margin-left: 2vw;
    background-color: aqua;
}

.espaco-right {
    margin-right: 1vw;
    background-color: aqua;
}

.player {
    margin-top: 1.6vw;
    margin-bottom: 1vw;
}

.player audio {
    width: 100%;
    border: 0.2vw solid black;
    border-radius: 4vw;
}

/* ------------- */

.box-ritmo .blue {
    color: blue;
}

.box-ritmo .red {
    color: red;
}

.box-ritmo .green {
    color: green;
}