/* Hero */
.hitlist-main{
display: flex; flex-direction: row; flex-wrap: wrap; padding-top: 5vh; width: 100%; justify-content: center;
}
.hero-text{
max-width: 450px; padding: 0px 20px 30px 20px;
} .hero-text > h1{
color: var(--secondary);
}
.hero-text > p{
color: var(--light);
}
/* Subhero */ .hitlist-subhero{
background-color: black; color: var(--white); padding: 2vh 5vw; margin-top: 4rem;
} .hitlist-subhero > h2{
font-weight: 700;
} .hitlist-subhero > h3{
margin-top: -10px; font-size: 2rem;
}
/* Songs */ .song-container{
display: flex; flex-direction: column; align-items: center; padding: 5vh 10vw;
}
.song{
display: flex; background-color: rgba(0,0,0,0.3); box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 8px 0px, rgba(0, 0, 0, 0.5) 0px 6px 20px 0px; flex-direction: row; width: 90vw; padding: 0px 20px; color: var(--white);
}
.headers{
display: flex; flex-direction: row; align-items: center; margin-right: 20px;
}
.place{
margin-right: 10px; width: 3rem;
}
.place > h4 > span{
color: var(--primary);
}
.content{
display: flex; flex-direction: row; width: 65vw; align-items: center; margin-top: -2rem; justify-content: space-between;
}
.album-cover{
width: 200px; height: 200px;
}
.album-cover > img{
width: 100%; height: 100%;
}
@media only screen and (max-width: 600px){
.song{ flex-direction: column; } .content{ flex-direction: column; margin-top: 30px; margin-left: 10px; align-items: flex-start; justify-content: flex-start; }
}