@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&display=swap');

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

html::-webkit-scrollbar {
    width: 0.7rem;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: #700400;
    border-radius: 3rem;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    border: 0;
    width: 100%;
}

body {
    color: white;
    width: 100%;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
}

.now-playing {
    color: black;
    padding: 31px;
    background-color: #e4e4e4;

    display: flex;
    justify-content: center;
    align-items: center;
}

#now {
    background-color: red;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border-radius: 50%;
    animation: rec 2s infinite;
}

@keyframes rec {
    0% {
        background-color: red;
    }

    50% {
        background-color: #e4e4e4;
    }

    100% {
        background-color: red;
    }
}

iframe {
    display: block;
    margin-left: -4.5vw;
}

.icones {
    margin: 0 10vw 0 5vw;
}

.icones img {
    width: 25px;
    margin: 0 0.2em;
}

.icones a,
.donate {
    text-decoration: none;
    color: #FFFFFF;
}

.banner {
    background-image: url("../img/banner1.jpg");
    height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: bgChange 20s linear infinite;
}

/*

@keyframes bgChange {
    0% {
        background-image: url('../img/banner1.jpg')
    }
    30% {
        background-image: url('../img/banner1.jpg')
    }
    33% {
        background-image: url('../img/banner2.jpg')
    }
    63% {
        background-image: url('../img/banner2.jpg')
    }
    66% {
        background-image: url('../img/banner3.jpg')
    }
    99% {
        background-image: url('../img/banner3.jpg')
    }

}
*/

/* APLICATIVO DA RADIO */

.app {
    color: #000000;
    text-align: center;
    padding: 1em;
}

.app__texto {
    color: #630366;
    font-size: 1.2em;
    padding: 1em;
}

.app h2 {
    font-size: 2em;
    padding-bottom: 1em;
}

.app__icones {
    display: flex;
    justify-content: center;
}

.app__icones img {
    width: 80px;
    margin: 0.5em;
}

.app__footer {
    font-size: 0.7em;
    font-style: italic;
    padding: 1em;
}

/* PROGRAMAÇÃO DA RADIO */

.programacao {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: #1b1b1b;
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../img/background-blocks.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}


.programacao__div {
    margin-top: 20px;


}

.programacao h2 {
    color: rgb(90, 4, 124);
    font-size: 1.8em;
    margin-bottom: 0.2em;
    text-align: center;
}

.programacao h3 {
    font-size: 2em;
    text-align: center;
    margin-bottom: 1em;
}

.semanal {
    width: 100%;
    display: flex;
    justify-content: center;
}

.programacao__list {
    margin-bottom: 4em;
}

.programacao__item {
    font-size: 0.9em;
    margin: 0.7em;
}

.programacao__titulo {
    color: #FFFFFF;
    font-size: 1em;
    text-align: center;
    padding: 0.3em;
    margin-bottom: 1.3em;
    background: url(../img/bg-fire.jpg) no-repeat center;
    background-size: cover;
    border-radius: 8px;
}

.pedido-de-musica {
    width: 30vw;
    text-decoration: none;
    background-color: #000000;
    color: #FFFFFF;
    padding: 28px;
    text-align: center;
    border-radius: 5px 5px 0 0;
}

.equipe {
    background-image: linear-gradient(rgba(0, 0, 0, 0.795), rgba(0, 0, 0, 0.795)), url("../img/image19.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}


.equipe__container {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    padding-bottom: 2em;
}

.equipe__img {
    width: 20vw;
    margin: 0 0.5em;
    padding-bottom: 1em;
}

.item__titulo,
.item__texto {
    color: #FFFFFF;
    text-align: center;
    padding: 0.1em 0;
}

.equipe__footer {
    background-color: #000000;
    text-align: center;
    margin-top: 1em;
    padding: 1.5em;
}

.equipe__footer a,
.ouvintes__footer a {
    text-decoration: none;
    color: #FFFFFF;
}

.equipe__footer a:hover,
.ouvintes__footer a:hover {
    font-size: 17px;
}



.equipe__titulo {
    color: #FFFFFF;
    font-size: 2.5em;
    text-align: center;
    padding: 1em;
}

.ultimas-musicas {
    width: 80%;
    margin: 1.5em auto;
    text-align: center;
}

.ultimas-musicas h2 {
    text-transform: uppercase;
    font-size: 1.5em;
    color: #000000;
    text-align: center;
    padding: 0.5em;
}

.ultimas-musicas iframe {
    padding-top: 1em;
}

.patrocinadores {
    padding: 2em auto 0 auto;

}

.patrocinadores h2 {
    font-size: 30px;
    color: #000000;
    text-align: center;
    padding: 1em;
}


.ouvintes {
    background-image: linear-gradient(rgba(0, 0, 0, 0.795), rgba(0, 0, 0, 0.795)), url("../img/ouvindo-radio.jpeg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


.ouvintes h2 {
    text-transform: uppercase;
    font-size: 28px;
    color: #FFFFFF;
    text-align: center;
    padding: 1em 0 1em 0;
}


.ouvintes__titulo,
.ouvintes__texto {
    text-align: center;
    margin: 0.5em;
}

.ouvintes__titulo {
    text-transform: uppercase;
}

.ouvintes__texto {
    font-size: 14px;
    ;
}

.ouvintes__img {
    border-radius: 50%;
    width: 22vw;
    margin: 0 0.5em;
}

.ouvintes__footer {
    width: 100%;
    background-color: #000000;
    text-align: center;
    padding: 1.5em 0;
}

.social {
    display: flex;
    justify-content: center;
    width: 100%;
    color: #FFFFFF;
    background-color: #000000;

}

.logo__footer {
    width: 7em;
    margin-left: 5em;
    margin-right: 20em;
}

.rodape__texto {
    font-weight: 400;
    margin: auto;
    padding: 2em;
    text-align: center;
    padding: auto;
    background-color: #000000;
}

.rodape__texto a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
}


.social-icons {
    margin: auto -10em auto 10em;

}

.banner__radiosnet {
    margin: auto;
}





@media screen and (max-width: 768px) {

    .news,
    .now-playing,
    .icones,
    .donate,
    .programacao,
    .logo__footer,
    .social-icons,
    .only__class,
    .overlay {
        display: none;
    }

    .equipe__container,
    .equipe__item,
    .social {
        display: block;
        text-align: center;
    }

    header iframe {
        width: 100%;
        margin: 0;
    }

    .rodape__texto {
        font-size: 16px;
        padding: 1em 0;
    }

    .ouvintes__texto {
        margin-bottom: 4em auto;
    }

    header {
        position: relative;
    }

    .equipe__img,
    .ouvintes__img {
        width: 60vw;
    }

    .pedido-de-musica {
        padding: 8px 10px 8px 10px;
        margin: auto;
    }

    .banner {
        height: 81vh;
    }

    .app__icones img {
        width: 60px;
    }

}

@media screen and (max-width: 1024px) {

    .now-playing,
    .icones {
        display: none;
    }

    iframe {
        margin: 0;
    }
}