@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Nunito+Sans&display=swap');
:root {
    --primary-color: #0d6efd;
    --secondary-color: #6cbdff;
    --heading-color: #6cbdff;
    --text-color: #6cbdff;
    --link-color: #6cbdff;
    --primary-font: 'Montserrat', sans-serif;
    --secondary-font: 'Nunito Sans', sans-serif;
    --heading-font: 'Montserrat', sans-serif;
    --text-font: 'Nunito Sans', sans-serif;
    --link-font: 'Nunito Sans', sans-serif;
    --white: #ffffff;
    --blue: #004aad;
    --blue2: #003b8d;
    --green: #357533;
    --silver: #afb7c9;
    --h1: 36px;
    --h2: 30px;
    --h3: 24px;
    --h4: 18px;
    --h5: 16px;
    --h6: 14px;
  }
  *{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: var(--text-font) !important;
  }

h1, h2, h3, h4, h5, h6{
    font-family: var(--heading-font) !important;
    margin: 0 !important;
    padding: 0 !important;
}
h1{
    font-size: var(--h1) !important;
}
h2{
    font-size: var(--h2) !important;
}
h3{
    font-size: var(--h3) !important;
}
h4{
    font-size: var(--h4) !important;
}
h5{
    font-size: var(--h5) !important;
}
h6{
    font-size: var(--h6) !important;
}
a{
    font-family: var(--link-font) !important;
    font-weight: 800 !important;
    line-height: 24px;
    text-decoration: none !important;
}
.navigation{
    background-color: var(--primary-color);
    
}

.nav-link, .navbar-brand{
    color: var(--white) !important;
}
.logo{
    height: 70px;
}
.breadcrumb {
    padding: 5px 0 !important;
    margin: 0 5px !important;
}
.breadcrumb a{
    text-decoration: none !important;
}
.breadcrumb .active{
    font-weight: bold !important;
    color: var(--success) !important;
}
.song-box{
    transition: all .3s;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    max-height: 250px;
}
.song-box:hover {
    transform: scaleY(1.1);
}
.song-title{
    font-family: var(--primary-font) !important;
    font-size: 16px !important;
    word-wrap: break-word !important;
}
.song-img{
    max-height: 150px;
}
.song-img2{
    max-height: 300px;
}

@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover > .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
    .dropend:hover > .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
      }
}
@media only screen and (max-width: 768px) {
    :root {
    --h1: 22px;
    --h2: 20px;
    --h3: 18px;
    --h4: 16px;
    --h5: 14px;
    --h6: 12px;
    }
    h1{
        font-size: var(--h1) !important;
    }
    h2{
        font-size: var(--h2) !important;
    }
    h3{
        font-size: var(--h3) !important;
    }
    h4{
        font-size: var(--h4) !important;
    }
    h5{
        font-size: var(--h5) !important;
    }
    h6{
        font-size: var(--h6) !important;
    }
    .songName {
        font-size: var(--h3);
        line-height: 16px;
        font-weight: 600;
    }
  }