* {
    margin: 0;
    padding: 0;
    border: 0;
}

textarea:focus, input:focus, button:focus, select:focus {
    outline: none;
}

@font-face {
    font-family: "Grobold";
    src: url("./polices/GROBOLDpr.ttf");
}

@font-face {
    font-family: "Confortaa";
    src: url("./polices/Comfortaa-Regular.ttf");
}

html, body, input, textarea, button, select {
    font-family: Confortaa, sans-serif;
    color: #d0ceca;
}

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #201916;
    font-size: 1.2em;
    touch-action: manipulation;
}

.petiteMesure {
    /*border-bottom: 1px dotted #4f663f;*/
    /*text-decoration: none;*/
    background-color: #4f663f40;
}

.commentaire {
    font-family: Lucida Console, monospace;
    font-size: 70%;
    color: #4f663f;
    white-space: pre;
    overflow-y: scroll;
    margin-bottom: -2em;
    overflow: overlay;
    padding-bottom: 1em;
}

.silence {
    font-size: 50%;
    color: #6d895a;
}

.silence2 {
    font-size: 60%;
    background-color: #3c332f;
    border-radius: 50%;
    color: #5a8489;
    vertical-align: middle;
    padding: 0.4em;
    /*font-weight: bold;*/
}

#conteneurPrincipal {
    background-color: #302926;
    margin: auto;
    max-width: 25em;
    height: 100%;
    overflow: hidden;
}

#vueChanson {
    max-width: 100vw;
    height: 100%;
    position: relative;
}

#vueListeChanson {
    height: 100%;
    /*width: 100vw;*/
}

#conteneurChanson {
    position: relative;
    height: 80%;
    overflow: scroll;
    overflow-x: hidden;
    filter: sepia(20%);
}

#conteneurBas {
    height: 20%;
    background-color: #221c1a;
    border-top: solid;
    border-color: #44662c;
}

#conteneurAccord {
    position: absolute;
    height: 20vh;
    width: 20vh;
    background-color: #1a1412;
    border-radius: 50%;
    right: 1%;
    bottom: 0.5%;
    cursor: pointer;
    overflow: hidden;
    border: #1a1412 solid;
}

#conteneurRoue {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

#champAccord {
    position: absolute;
    font-size: 4vh;
    font-weight: bold;
    pointer-events: none;
    user-select: none;
    bottom: 1vh;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: sepia(20%) drop-shadow(0.1em 0.1em 0.05em #000000);
}

#champFond {
    position: absolute;
    left: 50%;
    top: 40%;
    font-size: 1200%;
    transform: translate(-50%, -50%) rotate(-25deg);
    color: #292320;
    font-weight: bold;
}

#pochette {
    height: 100%;
}

#conteneurPochette {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#conteneurInfo {
    display: flex;
    /*width: 100%;*/
    flex-direction: column;
    /*height: 20vh;*/
    /*justify-content: end;*/
}

#champInfo {
    white-space: pre-line;
    margin: 1%;
    /*font-size: 4vw;*/
    display: flex;
    flex-direction: column;
}

.boutonOption {
    border-radius: 30%;
    background-color: #44662c;
    width: 5vh;
    height: 5vh;
    margin: 0.5%;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.imgBtn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: sepia(60%);
}

.iconeOption {
    text-align: center;
    line-height: 5vh;
    filter: sepia(60%);
    user-select: none;
}

.nomChanson {
    /*color: #7BBD40;*/
    margin: 0.2em;
}

.auteurChanson {
    /*color: #ab5e83;*/
    color: #7BBD40;
    margin: 0.2em;
    font-size: 80%;
    white-space: pre;
}

.mesure {
    border-radius: 0.2em;
}

.illu {
    width: 100%;
    border: 1px #1e140f;
    border-bottom-style: solid;

    /*position: absolute;*/
    /*transform: translate(-50%, -50%);*/
    /*left: 50%;*/
    /*top: 50%;*/
}

.infoTitre {
    color: #436266;
}

.infoValeur {
    color: #665852;
}

#lecteurYoutube {
    position: absolute;
    width: 185%;
    /*height: 100%;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/*
########################################
#  ➔ Ascenseur
########################################
*/

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    border-radius: 2px;
    background: #1e140f;
}

::-webkit-scrollbar-thumb {
    background: #44662c;
    border-radius: 2px;
}