/* Mobile Website Styling */
 
@font-face {
    font-family: 'Base Neue Expanded';
    src: url('fonts/BaseNeueTrial-Expanded.woff') format('woff');
}

@font-face {
    font-family: 'Base Neue Expanded Med';
    src: url('fonts/BaseNeueTrial-ExpandedMedium.woff') format('woff');
}

@font-face {
    font-family: 'Base Neue Expanded Semi';
    src: url('fonts/BaseNeueTrial-ExpSemBd.woff') format('woff');
}

body {
    margin: 0;
    padding: 0;
    background-color:#100C09;
}

main {
    background-color:#100C09;
}

/* Header Section*/
header {
    display:flex;
    align-items: center;
    justify-content: space-between;
    background-color: #100C09;
    padding: 2px 16px 2px 16px
}

header h2 {
    font-family: 'Base Neue Expanded Semi';
    color:white;
    font-size: 16px;
    position: sticky;
}

.accent {
    color: #D85A30;
}

.hero {
    background-image: url("images/herobg.png");
    background-repeat: no-repeat;
    background-size:  cover;
    filter:grayscale(100%);
    height: 220px;
    border-bottom: 1px solid #2C2C2C;
}

.hero h2 {
    font-family: 'Base Neue Expanded Semi';
    text-align:center;
    color:white;
    font-size: 32px;
    padding: 64px 28px 76px 40px;
    margin: 0;

}

/* Genre Card Section */
.genres {
    background-color: #100C09;
    border-radius: 16px;
    overflow: hidden;
    margin: 32px;
    border: 1px solid #2C2C2C;
}

.genres img {
    width: 100%;
    display: block;
    border-bottom: 2px solid #D85A30;
}

.genres-desc {
    padding: 16px 16px;
}

.genres-label {
    font-family: 'Base Neue Expanded Med';
    font-size: 16px;
    color:#D85A30;
}

.genres h2 {
    font-family: 'Base Neue Expanded Semi';
    font-size: 12x;
    color: #ffffff;
}

.genres p {
    font-family: 'Base Neue Expanded';
    font-size: 12px;
    color:#ffffff;
}

.genres-button {
    font-family: 'Base Neue Expanded Semi';
    font-size: 14px;
    color:#ffffff;
    display: inline-block;
    border: 2px solid #D85A30;
    border-radius: 50px;
    padding: 12px 28px;
}

/* Album Card Section */
.albums {
    background-color: #100C09;
    border-radius: 16px;
    overflow: hidden;
    margin: 32px;
    border: 1px solid #2C2C2C;
}

.albums img {
    width: 100%;
    display: block;
    border-bottom: 2px solid #BA7517;
}

.albums-desc {
    padding: 16px 16px;
}

.albums-label {
    font-family: 'Base Neue Expanded Med';
    font-size: 16px;
    color:#BA7517;
}

.albums h2 {
    font-family: 'Base Neue Expanded Semi';
    font-size: 12x;
    color: #ffffff;
}

.albums p {
    font-family: 'Base Neue Expanded';
    font-size: 12px;
    color:#ffffff;
}

.albums-button {
    font-family: 'Base Neue Expanded Semi';
    font-size: 14px;
    color:#ffffff;
    display: inline-block;
    border: 2px solid #BA7517;
    border-radius: 50px;
    padding: 12px 28px;
}

/* Artist Card Section */
.artist {
    background-color: #100C09;
    border-radius: 16px;
    overflow: hidden;
    margin: 32px;
    border: 1px solid #2C2C2C;
}

.artist img {
    width: 100%;
    display: block;
    border-bottom: 2px solid #993556;
}

.artist-desc {
    padding: 16px 16px;
}

.artist-label {
    font-family: 'Base Neue Expanded Med';
    font-size: 16px;
    color:#993556;
}

.artist h2 {
    font-family: 'Base Neue Expanded Semi';
    font-size: 12x;
    color: #ffffff;
}

.artist p {
    font-family: 'Base Neue Expanded';
    font-size: 12px;
    color:#ffffff;
}

.artist-button {
    font-family: 'Base Neue Expanded Semi';
    font-size: 14px;
    color:#ffffff;
    display: inline-block;
    border: 2px solid #993556;
    border-radius: 50px;
    padding: 12px 28px;
}