@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&family=Lato:wght@700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@font-face {
    font-family: 'Arial';
    src: url('/static/fonts/ARIAL.TTF') format('truetype');
    font-weight: normal; /* Peso para Light */
    font-style: normal;
}
*
{
    font-family: 'Montserrat' !important;
    font-weight:600 !important;
}

.detalhe1
{
    top:0;
    left:0;
    position:absolute;
    width:6rem;    
}

.detalhe2
{
    bottom:0;
    right:0;
    position:absolute;
    display: none;
    width:6rem;
}

img
{
    position: relative;
    z-index: 2;
}

.tipo-musica
{
    background: rgb(18, 98, 18);
    width: 100%;
    gap: 1rem;
    color: #fff;
    border-radius:50px;
}

.tipo-musica span
{
    font-size:1.3rem;
}

.detalhe3
{
    top:50%;
    right:0;
    position:absolute;
    height:12rem;
    z-index: 1;
}

.d-flex
{
    position: relative;
    z-index: 2;
}

body
{
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/image01.jpeg');
        background-position: center;
        background-size:cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position:relative;
    overflow-x:hidden;
}

a
{
    text-decoration: none !important;
}

.progress-bar
{
    max-width:100% !important;
}

header span
{
    font-size: 1rem;
}
@media(max-width:768px)
{
    .player
    {
        gap:2.5rem !important;
    }

    .music
    {
        font-size:1.3rem !important;
    }

    body
    {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../img/image01.jpeg') !important;
        background-size:cover !important;
        background-position: center;

    }
    

    .redes-sociais
    {
        gap:1.5rem !important;
    }

    .redes-sociais img
    {
        height:4rem !important;
    }

    .compartilhar, .repetir
    {
        display:none !important;
    }

}

@media(max-width:334px)
{
    header span
    {
        font-size:1rem !important;
    }
}

@media(max-width:395px)
{
    .imagem-mc
    {
        width:5rem !important;
        height: 5rem !important;
    }

    .fonte-mc
    {
        font-size: 1rem !important;
    }
}

.classe-ativa
{
    border:solid 2px #fff;
    border-radius:20px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-down-animation {
    animation: slideDown 0.5s ease forwards;
}

.classe-ativa1
{
    border:solid 2px #fff;
    border-radius:20px;
    padding:.5rem;
}

#prev, #next, #play, .compartilhar, .repetir
{
    cursor: pointer;
}

.musico
{
    cursor: pointer;
}

.openModal
{
    cursor: pointer;
}

.notificacao
{
    position: absolute !important;
    top:0;
    max-width: 90% !important;
}