.album-background {
    background: #000;
}

.album-body {
    padding: 0 2em 2em 2em;
}

.album-text {
    color: #fff;
    z-index: 5;
    position: absolute;
    text-align: center;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.8);
    font-family: Tahoma, sans-serif;
    outline: none;
}

.display-lyrics {
    display: none;
}

.back-to-music {
    padding-top: 20px;
}


.show-lyrics {
    padding: 10px;
    margin-bottom: 10px;
}

.show-lyrics a {
    color: #fff;
    background-color: #0b0b0b;
    padding: 10px 16px;
    text-decoration: none;
    border: 1px ridge lightgray;
}

.show-lyrics a:hover {
    background: #111;
    color: #139ed5;
    text-decoration: none;
    border: 1px ridge #139ed5;
    cursor: pointer;  
}

.song-name {
    width: 90%;
    height: 100%;
    float:left; 
}

.song-title {
    width: 100%;
    height: 50px;
}

.favourite-icon {
    width: 10%;
    float: left;
    height: 100%;
    padding: 10px;
    text-align: center;
}

.favourite-icon:hover {
    width: 10%;
    float: left;
    height: 100%;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background: #111;
    color: white;
    border: 1px ridge #139ed5;
}

.favourite-icon--selected {
    color: #139ed5;
}

@media (min-width: 1200px) {
     .album-text {
        height: 420px;
        top: 106px;
        width: 420px;
        left: 12.3%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .album-text {
        height: 420px;
        top: 106px;
        width: 420px;
        left: 27%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .album-text {
        height: 420px;
        top: 106px;
        width: 420px;
        left: 19.8%;
    }
}

@media (min-width: 576px) and (max-width: 767px ) {
    .album-text {
        height: 420px;
        top: 106px;
        width: 420px;
        left: 15%;
    }
}

@media (max-width: 575px) {
    .album-text {
        height: 420px;
        top: 106px;
        width: 420px;
        left: 34px;
    }
}

/* iphone 6/7/8 plus */
@media (max-width: 414px) {
    .album-text {
        height: 383px;
        top: 106px;
        width: 383px;
        left: 12px;
    }
}

/* Pixel 2 */
@media (max-width: 411px) {
    .album-text {
        height: 371px;
        top: 106px;
        width: 371px;
        left: 15px;
    }
}

@media (max-width: 375px) {
    .album-text {
        height: 339px;
        top: 106px;
        width: 339px;
        left: 4.2%;
    }
}

/* Galaxy S5 */
@media (max-width: 360px) {
    .album-text {
        height: 320px;
        top: 106px;
        width: 320px;
        left: 4.2%;
    }
}

/* Iphone 5 */
@media (max-width: 320px) {
    .album-text {
        height: 282px;
        top: 106px;
        width: 282px;
        left: 4.2%;
    }
}



h3 {
    text-align: center;
}

.song-list {
    margin: 0 0 35px 0;
    padding: 0;
    background-color: #0e1721;
}

.song-selected > a {
    background: black !important;
    color: #139ed5 !important;
    border-bottom: 3px ridge #139ed5 !important;
}

.song-name .song-selected a {
    background: black !important;
    color: #139ed5 !important;
    border-bottom: 3px ridge #139ed5 !important;
}

.song-name a {
    display: block;
    color: #fff;
    padding: 13px 20px;
    text-decoration: none;
    border-bottom: 1px ridge lightgray;
}

.song-name a:hover {
    background: #111;
    color: white;
    text-decoration: none;
    border-bottom: 3px ridge lightgray;
}

.song-name a:focus {
    background: #111;
    color: #139ed5;
    text-decoration: none;
    border-bottom: 3px ridge #139ed5;
}

.song-name a:active {
     color: #139ed5;
     background: #111;
}

@media only screen and (max-width: 480px) {
    .album-body {
        padding: 5px 5px 12px 5px;

    }

    li a {
        padding: 16px 16px;
    }
}