html {
    font-size: 62.5%;
}

body {
    background: white;
    color: #3f4652;
    margin: 0;
    padding: 0;
    font-family: 'Cinzel', serif;
}

.navbar {
    font-size: 1.8rem;
    background: white;
}

.navbar-brand {
    margin-left: 3rem;
}

.nav-item {
    margin-right: 3rem;
}

.song-image {
    width: 40rem;
    margin-top: 5rem;
    margin-bottom: 3rem;
}

h1 {
    font-size: 5rem;
}

h2 {
    font-size: 1.6rem;
}

.soundcloud-container {
    width: 50rem;
    margin-top: 3rem;
}

#social-container {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.social-icon {
    width: 3.2rem;
}


/* smart phone - xs */

@media (max-width: 576px) {
    .navbar-brand {
        margin-left: .5rem;
    }
    .nav-item {
        margin-left: auto;
        margin-right: auto;
        border-bottom: 1px solid #3f4652;
    }
    .song-image {
        width: 100%;
    }
    .soundcloud-container {
        width: 90%;
    }
    
    #social-container {
        margin-top: 3rem;
    }
    
    .social-icon {
        width: 2.5rem;
    }
}

/* tablet - sm */
@media (max-width: 768px) {
    .nav-item {
        margin-left: auto;
        margin-right: auto;
        border-bottom: 1px solid #3f4652;
    }
   
}