@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

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

    padding-top: 1.5vw;
    padding-bottom: 1vw;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    margin-top: 2vw;
    border: 1.5px solid rgb(59, 59, 196);
    background-color: #eaf1ff;
}

.wrapper-grau-ch,
.escala-ch {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.grau-ch,
.acorde-ch {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    font-size: 3.5vw;
    width: 9.95vw;
}

.grau-ch {
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;

    color: black;

    letter-spacing: 0.19vw;
    line-height: 0;
    font-weight: 500;

    margin: 0.7vw;
    padding-top: 0.5vw;
    padding-bottom: 0.7vw;
}

.acorde-ch {
    font-family: Arial, Helvetica, sans-serif;

    letter-spacing: 0.15vw;
    line-height: 0.7;
    font-weight: 700;

    margin: 0.7vw;
    padding-top: 1vw;
    padding-bottom: 1vw;

    border: 0.2vw solid black;
    background-color: white;
    border-radius: 4px;
}

.acorde-ch sup {
    margin-left: 0.2vw;
    padding-top: 1vw;
    font-size: 2.5vw;
}

.dim {
    font-size: 1.80vw;
}

/***********************************************/
/*** Grupos de Acordes com Funções Similares ***/
/***********************************************/

/*** Grupo 1 ***/
.acorde-ch:nth-child(1),
.acorde-ch:nth-child(3),
.acorde-ch:nth-child(6) {
    color: rgb(0, 157, 0);

    background-color: rgb(162, 255, 162);
    border-color: rgb(0, 185, 0);
}

/*** Grupo 2 ***/
.acorde-ch:nth-child(2),
.acorde-ch:nth-child(4) {
    color: rgb(67, 108, 255);

    background-color: rgb(130, 255, 249);
    border-color: rgb(67, 108, 255);
}

/*** Grupo 3 ***/
.acorde-ch:nth-child(5),
.acorde-ch:nth-child(7) {
    color: rgb(255, 106, 0);

    background-color: rgb(251, 220, 199);
    border-color: rgb(255, 135, 49);
}

/********************************/
/*** Graus do Campo Harmonico ***/
/********************************/

/*** Graus 1-4-5 do Campo Harmônico - Mais Usados ***/
.wrapper-grau-ch .grau-ch:nth-child(1),
.wrapper-grau-ch .grau-ch:nth-child(4),
.wrapper-grau-ch .grau-ch:nth-child(5) {
    font-weight: 800;

    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(255, 255, 255);
    text-shadow: 0.4vw 0.4vw 0.6vw #434343;
}