:root {
    --cor-texto-geral: rgb(255, 255, 255);
    --cor-fundo-geral: rgb(14, 14, 14);
    --cor-botao-volume: rgb(222, 222, 222);
    --cor-borda-botao-volume: rgb(153, 153, 153);
    --cor-traco-botao-volume: rgb(102, 102, 102);
    --cor-texto-botao-tooltip: rgb(153, 153, 153);
    --cor-fundo-botao-tooltip: rgb(84, 84, 84);
    --cor-fundo-popup: rgba(100, 100, 100, 0.9);
    --cor-texto-popup: rgb(200, 200, 200);
    --cor-borda-popup: rgb(135, 135, 135);
    --cor-texto-rodape: rgb(0, 183, 255);
    --cor-botao-active: rgba(255, 255, 0, 0.5);
    --cor-botao-hover: rgba(0, 183, 255, 0.5);
    --cor-texto-botao: rgb(0, 72, 255);
    --cor-container-marquee: rgb(51, 51, 51);
    --cor-texto-tempo-musica: rgb(255, 250, 0);
    --cor-texto-titulo: rgb(255, 196, 0);
    --cor-texto-estatisticas: rgb(88, 196, 26);
    --cor-link-dev: rgb(0, 255, 166);
    --cor-link-dev-hover: rgb(202, 81, 138);
    --cor-borda-ads: rgba(0, 0, 0, 0);
    --cor-fundo-ads: rgba(0, 0, 0, 0);
}

/*Fonte Customizada*/
@font-face {
    font-family: 'digital-sans';
    font-display: auto;
    src: url('../src/fonts/DigitalSans.ttf') format('truetype');
}

@font-face {
    font-family: 'ds-digital';
    font-display: auto;
    src: url('../src/fonts/DS-DIGI.ttf') format('truetype');
}

@font-face {
    font-family: 'ds-digital-bold';
    font-display: auto;
    src: url('../src/fonts/DS-DIGIB.ttf') format('truetype');
}

@font-face {
    font-family: 'ds-digital-italic';
    font-display: auto;
    src: url('../src/fonts/DS-DIGII.ttf') format('truetype');
}

@font-face {
    font-family: 'ds-digital-tached';
    font-display: auto;
    src: url('../src/fonts/DS-DIGIT.ttf') format('truetype');
}

@font-face {
    font-family: 'fanfare-ticker';
    font-display: auto;
    src: url('../src/fonts/fanfareticker.ttf') format('truetype');
}

@font-face {
    font-family: 'fanfare-ticker-3D';
    font-display: auto;
    src: url('../src/fonts/fanfareticker3d.ttf') format('truetype');
}

@font-face {
    font-family: 'fanfare-ticker-italic';
    font-display: auto;
    src: url('../src/fonts/fanfareticker3dital.ttf') format('truetype');
}

@font-face {
    font-family: 'fanfare-ticker-bolder';
    font-display: auto;
    src: url('../src/fonts/fanfaretickerbackground.ttf') format('truetype');
}

@font-face {
    font-family: 'fanfare-ticker-bolder-italic';
    font-display: auto;
    src: url('../src/fonts/fanfaretickerbackgroundital.ttf') format('truetype');
}

@font-face {
    font-family: 'fanfare-ticker-italic';
    font-display: auto;
    src: url('../src/fonts/fanfaretickerital.ttf') format('truetype');
}

@font-face {
    font-family: 'fanfare-ticker-left';
    font-display: auto;
    src: url('../src/fonts/fanfaretickerleft.ttf') format('truetype');
}

@font-face {
    font-family: 'fanfare-ticker-semi-italic';
    font-display: auto;
    src: url('../src/fonts/fanfaretickersemital.ttf') format('truetype');
}

/* CSS */
body {
    color: var(--cor-texto-geral);
    background-color: var(--cor-fundo-geral);
    overflow: hidden;
}

#main-content {
    width: 100%;
    height: 100vh;
    margin: auto;
}

.container {
    width: 100vw;
    height: 100vh;
    background-image: url('../src/img/console-central.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.container table {
    width: 100%;
    height: 100%;
    margin: auto;
    table-layout: fixed;
    border: 1px solid;
    border-collapse: collapse;
    border-color: rgba(0, 0, 0, 0);
}

.container td,
.container th {
    text-align: center;
    vertical-align: middle;
}

.ads {
    position: absolute;
    background-color: var(--cor-fundo-ads);
    border: 1px solid;
    border-color: var(--cor-borda-ads);
}

#ads-direito {
    height: 100vh;
    width: 35.5vw;
}

#painel-astra {
    height: 100vh;
    width: 29.5vw;
    left: 35vw;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
}

#ads-esquerdo {
    height: 100vh;
    width: 35.5vw;
    right: 0;
}

#ads-central {
    top: 12vh;
    left: 7.4vw;
    height: 85px;
    width: 250px;
    border-radius: 7%;
}

.dial {
    --rotation: 135deg;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
    top: 47.8%;
    left: 21.6%;
    background: var(--cor-botao-volume);
    border: 1px solid;
    border-color: var(--cor-borda-botao-volume);
}

.dial:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, var(--cor-traco-botao-volume) 50%, transparent 50%);
    transform-origin: center;
    transform: rotate(var(--rotation));
    transition: transform 0.1s;
}

.btn-player {
    position: absolute;
    height: 20px;
    width: 20px;
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
}

.btn-player:hover {
    background-color: var(--cor-botao-hover);
    border-radius: 5%;
}

.btn-player:active {
    background-color: var(--cor-botao-active);
    border-radius: 5%;
}

.btn-player::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 150%;
    transform: translateY(-50%);
    white-space: nowrap;
    display: none;
    background-color: var(--cor-fundo-botao-tooltip);
    color: var(--cor-texto-botao-tooltip);
    padding: 5px;
    border-radius: 5px;
}

.btn-player:hover::after {
    display: inline;
}

#btn-src {
    top: 46.2%;
    left: 12.9%;
    width: 50px;
}

#popup-esquerdo {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    padding: 10px;
    background-color: var(--cor-fundo-popup);
    border: 1px solid;
    border-color: var(--cor-borda-popup);
    border-radius: 10px;
    bottom: 50%;
    left: -80%;
    z-index: 1;
    transition: width 0.5s, height 0.5s;
}

#popup-esquerdo:after {
    content: '';
    position: absolute;
    top: 83%;
    left: 100%;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent transparent var(--cor-fundo-popup);
    display: block;
    width: 0;
}

.source-container {
    border: 1px solid;
    height: 50%;
    width: 100%;
    overflow-y: auto;
}

.source-container a {
    text-decoration: none;
    transition: 0.3s;
    color: var(--cor-texto-rodape);
}

.source-container a:hover,
.source-container a:focus {
    color: var(--cor-texto-tempo-musica);
}

#btn-pesquisar {
    top: 46.2%;
    left: 34%;
    width: 50px;
}

#btn-muted {
    top: 50%;
    left: 37.4%;
    width: 25px;
    height: 25px;
}

#btn-celular {
    top: 50%;
    left: 13.5%;
    width: 42px;
    height: 26px;
}

#btn-retornar {
    top: 54.2%;
    left: 13.1%;
    width: 52px;
}

#btn-retroceder {
    top: 54.2%;
    left: 33.8%;
}

#btn-avancar {
    top: 54.2%;
    left: 41%;
}

#btn-01 {
    top: 54.2%;
    left: 46%;
}

#popup-superior {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    padding: 10px;
    background-color: var(--cor-fundo-popup);
    border: 1px solid;
    border-color: var(--cor-borda-popup);
    border-radius: 10px;
    bottom: 56%;
    left: 3.5%;
    z-index: 1;
    transition: width 0.5s, height 0.5s;
}

#popup-superior:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 80%;
    border-width: 20px;
    border-style: solid;
    border-color: var(--cor-fundo-popup) transparent transparent transparent;
    display: block;
    width: 0;
}

#btn-02 {
    top: 54.2%;
    left: 52.4%;
}

#popup-inferior {
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    padding: 10px;
    background-color: var(--cor-fundo-popup);
    border: 1px solid;
    border-color: var(--cor-borda-popup);
    border-radius: 10px;
    bottom: 6%;
    left: 3.5%;
    z-index: 1;
    transition: width 0.5s, height 0.5s;
}

#popup-inferior:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 80%;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent var(--cor-fundo-popup) transparent;
    display: block;
    width: 0;
}

#estatisticas-container,
#dev-container {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 14px
}

#estatisticas-container th,
#dev-container h2 {
    color: var(--cor-texto-titulo);
    font-weight: bolder;
    text-align: center;
}

#estatisticas-container td:nth-child(2) {
    color: var(--cor-texto-estatisticas);
    font-style: italic;
}

#dev-container p {
    text-align: justify;
    /* Adiciona um recuo de 2em no início de cada parágrafo */
    text-indent: 2em;
}

#dev-container a {
    color: var(--cor-link-dev);
}

#dev-container a:hover {
    color: var(--cor-link-dev-hover);
}

#dev-container span {
    display: flex;
    justify-content: right;
    padding: 2px;
    color: var(--cor-texto-rodape);
}

#btn-03 {
    top: 54.2%;
    left: 57.5%;
}

#btn-04 {
    top: 54.2%;
    left: 64.5%;
}

#btn-05 {
    top: 54.2%;
    left: 69.5%;
}

#btn-06 {
    top: 54.2%;
    left: 76.5%;
}

#btn-usb {
    top: 48.9%;
    left: 83%;
    height: 44px;
    width: 30px;
}

#popup-direito {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 0;
    height: 0;
    padding: 10px;
    background-color: var(--cor-fundo-popup);
    border: 1px solid;
    border-color: var(--cor-borda-popup);
    border-radius: 10px;
    top: 31%;
    right: -83%;
    z-index: 1;
    transition: width 0.5s, height 0.5s;
}

#popup-direito:after {
    content: '';
    position: absolute;
    top: 70%;
    right: 100%;
    border-width: 20px;
    border-style: solid;
    border-color: transparent var(--cor-fundo-popup)transparent transparent;
    display: block;
    width: 0;
}

#barra_progresso,
.tempo-musica,
#curiosidades-musica,
#interprete-musica,
#ritmo-musica {
    padding: 1px;
    font-size: 16px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
}

.tempo-musica {
    color: var(--cor-texto-tempo-musica);
}

#curiosidades-musica {
    text-align: justify;
}

#interprete-musica,
#ritmo-musica {
    color: var(--cor-texto-rodape);
    font-weight: bolder;
}

.container-marquee {
    position: absolute;
    width: 168px;
    height: 38px;
    background-color: var(--cor-container-marquee);
    top: 49%;
    left: 48%;
    border-radius: 15%;
    border-top-right-radius: 5%;
    border-bottom-right-radius: 5%;
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee h2 {
    display: block;
    animation: marquee 1s linear infinite;
    font-size: 35px;
    font-family: fanfare-ticker;
    text-align: center;
}

.container-rodape {
    color: var(--cor-texto-rodape);
    font-family: ds-digital;
    font-size: 17px;
    font-weight: bolder;
    position: absolute;
    bottom: 34.5%;
    left: 19.5%;
}

/* Celulares Smartphones Portait 9:21 */
@media screen and (min-width: 400px) and (max-width: 550px) {
    body {
        color: var(--cor-texto-geral);
        background-color: var(--cor-fundo-geral);
        overflow: hidden;
    }

    #main-content {
        height: 100dvh;
        width: 100dvw;
        margin: auto;
    }

    .container {
        height: 80dvh;
        width: 100dvw;
        margin-top: 20%;
        background-image: url('../src/img/console-central.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .container table {
        width: 100%;
        height: 100%;
        margin: auto;
        table-layout: fixed;
        border: 1px solid;
        border-collapse: collapse;
        border-color: rgba(0, 0, 0, 0);
    }

    .container td {
        text-align: center;
        vertical-align: middle;
    }

    .ads {
        position: absolute;
        background-color: var(--cor-fundo-ads);
        border: 1px solid;
        border-color: var(--cor-borda-ads);
    }

    #ads-direito,
    #ads-esquerdo {
        display: none;
    }

    #ads-central {
        top: 6dvh;
        left: -8.2dvw;
        height: 7.3dvh;
        width: 42dvw;
        border-radius: 7%;
    }

    .dial {
        --rotation: 135deg;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: relative;
        top: 37.8dvh;
        left: -11.6dvw;
        background: var(--cor-botao-volume);
        border: 1px solid;
        border-color: var(--cor-borda-botao-volume);
    }

    .dial:before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 2px;
        height: 100%;
        background: linear-gradient(to bottom, var(--cor-traco-botao-volume) 50%, transparent 50%);
        transform-origin: center;
        transform: rotate(var(--rotation));
        transition: transform 0.1s;
    }

    .btn-player {
        position: absolute;
        height: 14px;
        width: 14px;
        border-color: rgba(0, 0, 0, 0);
        background-color: rgba(0, 0, 0, 0);
    }

    .btn-player:hover {
        background-color: var(--cor-botao-hover);
        border-radius: 5%;
    }

    .btn-player:active {
        background-color: var(--cor-botao-active);
        border-radius: 5%;
    }

    .btn-player::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        top: 150%;
        transform: translateY(-50%);
        white-space: nowrap;
        display: none;
        background-color: var(--cor-fundo-botao-tooltip);
        color: var(--cor-texto-botao-tooltip);
        padding: 5px;
        border-radius: 5px;
    }

    .btn-player:hover::after {
        display: none;
    }

    #btn-src {
        top: 36.4dvh;
        left: -19dvw;
        width: 35px;
        height: 13px;
    }

    #popup-esquerdo {
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        padding: 10px;
        background-color: var(--cor-fundo-popup);
        border: 1px solid;
        border-color: var(--cor-borda-popup);
        border-radius: 10px;
        bottom: 58%;
        left: -110%;
        z-index: 1;
        transition: width 0.5s, height 0.5s;
    }

    #popup-esquerdo:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 83%;
        border-width: 20px;
        border-style: solid;
        border-color: var(--cor-fundo-popup) transparent transparent transparent;
        display: block;
        width: 0;
    }

    .source-container {
        border: 1px solid;
        height: 50%;
        width: 100%;
        overflow-y: auto;
    }

    .source-container a {
        text-decoration: none;
        transition: 0.3s;
        color: var(--cor-texto-rodape);
    }

    .source-container a:hover,
    .source-container a:focus {
        color: var(--cor-texto-tempo-musica);
    }

    #btn-pesquisar {
        top: 36.4dvh;
        left: -0.5dvw;
        width: 38px;
        height: 13px;
    }

    #btn-muted {
        top: 40dvh;
        left: 2.5dvw;
        width: 15px;
        height: 15px;
    }

    #btn-celular {
        top: 39.5dvh;
        left: -19.2dvw;
        width: 30px;
        height: 22px;
    }

    #btn-retornar {
        top: 44dvh;
        left: -19.6dvw;
        width: 36px;
        height: 14px;
    }

    #btn-retroceder {
        top: 44dvh;
        left: -0.5dvw;
    }

    #btn-avancar {
        top: 44dvh;
        left: 5.5dvw;
    }

    #btn-01 {
        top: 44dvh;
        left: 10dvw;
    }

    #popup-superior {
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        padding: 10px;
        background-color: var(--cor-fundo-popup);
        border: 1px solid;
        border-color: var(--cor-borda-popup);
        border-radius: 10px;
        bottom: 58%;
        left: -110%;
        z-index: 1;
        transition: width 0.5s, height 0.5s;
    }

    #popup-superior:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 80%;
        border-width: 20px;
        border-style: solid;
        border-color: var(--cor-fundo-popup) transparent transparent transparent;
        display: block;
        width: 0;
    }

    #btn-02 {
        top: 44dvh;
        left: 16dvw;
    }

    #popup-inferior {
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        padding: 10px;
        background-color: var(--cor-fundo-popup);
        border: 1px solid;
        border-color: var(--cor-borda-popup);
        border-radius: 10px;
        bottom: 0;
        left: -110%;
        z-index: 1;
        transition: width 0.5s, height 0.5s;
    }

    #popup-inferior:after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 80%;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent var(--cor-fundo-popup) transparent;
        display: block;
        width: 0;
    }

    #estatisticas-container,
    #dev-container {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 14px
    }

    #estatisticas-container th,
    #dev-container h2 {
        color: var(--cor-texto-titulo);
        font-weight: bolder;
    }

    #estatisticas-container td:nth-child(2) {
        color: var(--cor-texto-estatisticas);
        font-style: italic;
    }

    #dev-container p {
        text-align: justify;
        /* Adiciona um recuo de 2em no início de cada parágrafo */
        text-indent: 2em;
    }

    #dev-container a {
        color: var(--cor-link-dev);
    }

    #dev-container a:hover {
        color: var(--cor-link-dev-hover);
    }

    #dev-container span {
        display: flex;
        justify-content: right;
        padding: 2px;
        color: var(--cor-texto-rodape);
    }

    #btn-03 {
        top: 44dvh;
        left: 21dvw;
    }

    #btn-04 {
        top: 44dvh;
        left: 27dvw;
    }

    #btn-05 {
        top: 44dvh;
        left: 32dvw;
    }

    #btn-06 {
        top: 44dvh;
        left: 37.5dvw;
    }

    #btn-usb {
        top: 38.5dvh;
        left: 43dvw;
        height: 34px;
        width: 24px;
    }

    #popup-direito {
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        padding: 10px;
        background-color: var(--cor-fundo-popup);
        border: 1px solid;
        border-color: var(--cor-borda-popup);
        border-radius: 10px;
        top: 58%;
        left: -110%;
        z-index: 1;
        transition: width 0.5s, height 0.5s;
    }

    #popup-direito:after {
        content: '';
        position: absolute;
        top: -14.5%;
        right: 10%;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent var(--cor-fundo-popup) transparent;
        display: block;
        width: 0;
    }

    #barra_progresso,
    .tempo-musica,
    #curiosidades-musica,
    #interprete-musica,
    #ritmo-musica {
        padding: 1px;
        font-size: 16px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    .tempo-musica {
        color: var(--cor-texto-tempo-musica);
    }

    #curiosidades-musica {
        text-align: justify;
    }

    #interprete-musica,
    #ritmo-musica {
        color: var(--cor-texto-rodape);
        font-weight: bolder;
    }

    .container-marquee {
        position: absolute;
        width: 116px;
        height: 24px;
        background-color: var(--cor-container-marquee);
        top: 39.5dvh;
        left: 12dvw;
        border-radius: 15%;
        border-top-right-radius: 5%;
        border-bottom-right-radius: 5%;
    }

    .marquee {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .marquee h2 {
        display: block;
        animation: marquee 1s linear infinite;
        font-size: 22px;
        font-family: fanfare-ticker;
        text-align: center;
    }

    .container-rodape {
        width: 60dvw;
        color: var(--cor-texto-rodape);
        font-family: ds-digital;
        font-size: 12px;
        position: absolute;
        bottom: 25.5dvh;
        left: -14dvw;
    }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
    body {
        color: var(--cor-texto-geral);
        background-color: var(--cor-fundo-geral);
        overflow: hidden;
    }

    #main-content {
        height: 100dvh;
        width: 100dvw;
        margin: auto;
    }

    .container {
        height: 80dvh;
        width: 100dvw;
        margin-top: 20%;
        background-image: url('../src/img/console-central.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .container table {
        width: 100%;
        height: 100%;
        margin: auto;
        table-layout: fixed;
        border: 1px solid;
        border-collapse: collapse;
        border-color: rgba(0, 0, 0, 0);
    }

    .container td {
        text-align: center;
        vertical-align: middle;
    }

    .ads {
        position: absolute;
        background-color: var(--cor-fundo-ads);
        border: 1px solid;
        border-color: var(--cor-borda-ads);
    }

    #ads-direito,
    #ads-esquerdo {
        display: none;
    }

    #ads-central {
        top: 9dvh;
        left: -8.2dvw;
        height: 7.3dvh;
        width: 42dvw;
        border-radius: 7%;
    }

    .dial {
        --rotation: 135deg;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: relative;
        top: 37.4dvh;
        left: -12.6dvw;
        background: var(--cor-botao-volume);
        border: 1px solid;
        border-color: var(--cor-borda-botao-volume);
    }

    .dial:before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 2px;
        height: 100%;
        background: linear-gradient(to bottom, var(--cor-traco-botao-volume) 50%, transparent 50%);
        transform-origin: center;
        transform: rotate(var(--rotation));
        transition: transform 0.1s;
    }

    .btn-player {
        position: absolute;
        height: 14px;
        width: 14px;
        border-color: rgba(0, 0, 0, 0);
        background-color: rgba(0, 0, 0, 0);
    }

    .btn-player:hover {
        background-color: var(--cor-botao-hover);
        border-radius: 5%;
    }

    .btn-player:active {
        background-color: var(--cor-botao-active);
        border-radius: 5%;
    }

    .btn-player::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        top: 150%;
        transform: translateY(-50%);
        white-space: nowrap;
        display: none;
        background-color: var(--cor-fundo-botao-tooltip);
        color: var(--cor-texto-botao-tooltip);
        padding: 5px;
        border-radius: 5px;
    }

    .btn-player:hover::after {
        display: none;
    }

    #btn-src {
        top: 36.4dvh;
        left: -19.8dvw;
        width: 32px;
        height: 13px;
    }

    #popup-esquerdo {
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        padding: 10px;
        background-color: var(--cor-fundo-popup);
        border: 1px solid;
        border-color: var(--cor-borda-popup);
        border-radius: 10px;
        bottom: 58%;
        left: -110%;
        z-index: 1;
        transition: width 0.5s, height 0.5s;
    }

    #popup-esquerdo:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 83%;
        border-width: 20px;
        border-style: solid;
        border-color: var(--cor-fundo-popup) transparent transparent transparent;
        display: block;
        width: 0;
    }

    .source-container {
        border: 1px solid;
        height: 50%;
        width: 100%;
        overflow-y: auto;
    }

    .source-container a {
        text-decoration: none;
        transition: 0.3s;
        color: var(--cor-texto-rodape);
    }

    .source-container a:hover,
    .source-container a:focus {
        color: var(--cor-texto-tempo-musica);
    }

    #btn-pesquisar {
        top: 36.4dvh;
        left: -0.4dvw;
        width: 32px;
        height: 13px;
    }

    #btn-muted {
        top: 40dvh;
        left: 2.5dvw;
        width: 15px;
        height: 15px;
    }

    #btn-celular {
        top: 39.5dvh;
        left: -19.6dvw;
        width: 26px;
        height: 22px;
    }

    #btn-retornar {
        top: 43.5dvh;
        left: -19.6dvw;
        width: 32px;
        height: 14px;
    }

    #btn-retroceder {
        top: 43.5dvh;
        left: -0.5dvw;
    }

    #btn-avancar {
        top: 43.5dvh;
        left: 5dvw;
    }

    #btn-01 {
        top: 43.5dvh;
        left: 10dvw;
    }

    #popup-superior {
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        padding: 10px;
        background-color: var(--cor-fundo-popup);
        border: 1px solid;
        border-color: var(--cor-borda-popup);
        border-radius: 10px;
        bottom: 58%;
        left: -110%;
        z-index: 1;
        transition: width 0.5s, height 0.5s;
    }

    #popup-superior:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 80%;
        border-width: 20px;
        border-style: solid;
        border-color: var(--cor-fundo-popup) transparent transparent transparent;
        display: block;
        width: 0;
    }

    #btn-02 {
        top: 43.5dvh;
        left: 15.5dvw;
    }

    #popup-inferior {
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        padding: 10px;
        background-color: var(--cor-fundo-popup);
        border: 1px solid;
        border-color: var(--cor-borda-popup);
        border-radius: 10px;
        bottom: 0;
        left: -110%;
        z-index: 1;
        transition: width 0.5s, height 0.5s;
    }

    #popup-inferior:after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 80%;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent var(--cor-fundo-popup) transparent;
        display: block;
        width: 0;
    }

    #estatisticas-container,
    #dev-container {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 14px
    }

    #estatisticas-container th,
    #dev-container h2 {
        color: var(--cor-texto-titulo);
        font-weight: bolder;
    }

    #estatisticas-container td:nth-child(2) {
        color: var(--cor-texto-estatisticas);
        font-style: italic;
    }

    #dev-container p {
        text-align: justify;
        /* Adiciona um recuo de 2em no início de cada parágrafo */
        text-indent: 2em;
    }

    #dev-container a {
        color: var(--cor-link-dev);
    }

    #dev-container a:hover {
        color: var(--cor-link-dev-hover);
    }

    #dev-container span {
        display: flex;
        justify-content: right;
        padding: 2px;
        color: var(--cor-texto-rodape);
    }

    #btn-03 {
        top: 43.5dvh;
        left: 20.5dvw;
    }

    #btn-04 {
        top: 43.5dvh;
        left: 26.5dvw;
    }

    #btn-05 {
        top: 43.5dvh;
        left: 31.5dvw;
    }

    #btn-06 {
        top: 43.5dvh;
        left: 37dvw;
    }

    #btn-usb {
        top: 38.5dvh;
        left: 43dvw;
        height: 34px;
        width: 20px;
    }

    #popup-direito {
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        padding: 10px;
        background-color: var(--cor-fundo-popup);
        border: 1px solid;
        border-color: var(--cor-borda-popup);
        border-radius: 10px;
        top: 58%;
        left: -110%;
        z-index: 1;
        transition: width 0.5s, height 0.5s;
    }

    #popup-direito:after {
        content: '';
        position: absolute;
        top: -14.5%;
        right: 10%;
        border-width: 20px;
        border-style: solid;
        border-color: transparent transparent var(--cor-fundo-popup) transparent;
        display: block;
        width: 0;
    }

    #barra_progresso,
    .tempo-musica,
    #curiosidades-musica,
    #interprete-musica,
    #ritmo-musica {
        padding: 1px;
        font-size: 16px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    .tempo-musica {
        color: var(--cor-texto-tempo-musica);
    }

    #curiosidades-musica {
        text-align: justify;
    }

    #interprete-musica,
    #ritmo-musica {
        color: var(--cor-texto-rodape);
        font-weight: bolder;
    }

    .container-marquee {
        position: absolute;
        width: 100px;
        height: 24px;
        background-color: var(--cor-container-marquee);
        top: 39.5dvh;
        left: 12dvw;
        border-radius: 15%;
        border-top-right-radius: 5%;
        border-bottom-right-radius: 5%;
    }

    .marquee {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .marquee h2 {
        display: block;
        animation: marquee 1s linear infinite;
        font-size: 22px;
        font-family: fanfare-ticker;
        text-align: center;
    }

    .container-rodape {
        width: 65dvw;
        color: var(--cor-texto-rodape);
        font-family: ds-digital;
        font-size: 10.2px;
        position: absolute;
        bottom: 27.4dvh;
        left: -14dvw;
    }
}