* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Merriweather Sans';
    background: url(../imagens/5.png)  no-repeat fixed;
    background-size: 70%;
}


.banner {
    width: 99.1vw;
    min-height: 500px;
    background-image: linear-gradient(to bottom, #ffffff00, #000000 400%);
    background-size: 50%;
    box-shadow: 0 4px 32px rgba(0,0,0,0.2);
    display: flex;
    align-items: flex-start;
    flex-flow: column nowrap;
    justify-items: flex-end;
    justify-content: flex-end;
    align-content: flex-end;
    & h1 {
        font-size: 4rem;
        color: white;
        padding: .5rem;
        padding-left: 20px;
    }
    & h2 {
        font-size: 1.5rem;
        color: white;
        padding: .5rem;
        padding-left: 20px;

        & img {
            display: inline;
            width: 1.3rem;
        }
    }
}

header{
    display: flex;
    align-items: center;
    align-content: flex-end;
    flex-flow: row wrap;
    
    padding: 10px;



    & img {
        width: 5%;
        
    }
    & span.follow{
        border: 1px solid white;
        border-radius: 20px;
        padding: 10px 20px;
        &:hover {
            background-color: rgba(255,255,255,0.05);
            transition-duration: .3s;
            cursor: pointer;
        }
        &:not(:hover){
            background-color: rgba(255, 255, 255, 0);
            transition-duration: .3s;
        }
        }
    }



main {
    background-color: #121212;
    color: white;
    & h1 {
        padding: 20px;
    }
}

/* Seção de músicas populares*/

div.head{
    display: flex;
    align-items: center;
    align-content: flex-end;
    flex-flow: row wrap;
    
    padding: 0 10px 0 5px;
    & span{
        padding: 10px;
        border: 1px solid white;
        margin-right: 5px;
        border-radius: 20px;
        &:hover {
            background-color: rgba(165, 165, 165, 0.63);
            transition-duration: .3s;
            cursor: pointer;
        }
        &:not(:hover){
            background-color: rgba(255, 255, 255, 0);
            transition-duration: .3s;
        }
        }
    }


.flex {
    display: flex;

    margin-left: 2rem;

    max-width: 50%;
    min-width: 40%;

    align-items: flex-start;
    justify-content: flex-start;

    

    & div {
        gap: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8rem;

        &:hover {
            background-color: gainsboro;
            transition-duration: .3s;
        }
        &:not(:hover){
            background-color: white;
            transition-duration: .3s;
        }
    }

    & input {
        appearance: none;
        border: none;
        margin: auto;
        background-color: rgba(255, 255, 255, 0);
    }
}

.item-1 {
    flex: 1;
    height: 40px;
    outline: 1px solid gray;
    padding: 10px;
}

.item-2 {
    flex: 2;
    height: 40px;
    padding: 10px;
    outline: 1px solid gray;
}