body.album {
     background-image: url(../assets/images/blurred_backgrounds/10.png); 
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center center;
     background-size: cover;
     padding-bottom: 200px; /*supports player bar at bottom */
 }
 
 .album-cover-art {
     position: relative;
     left: 20%;
     margin-top: 1rem;
     width: 60%;
 }
 
 .album-view-details {
     position: relative;
     top: 1.5rem;
     padding: 1rem;
 }

/* temp text for under construction */
ul { text-align: center;}
 
/* James Co */
 .album-view-title {
     font-weight: 700;
     font-size: 50px; /*2rem;*/
     letter-spacing: 5px;
     margin: 10px;
     opacity: .6;
     color: rgba(0, 0, 0, 0.6);
     text-align: center; 
 animation: fadein 2s;
         -moz-animation: fadein 2s; /* Firefox */
   -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
     
   /*transition: all 1s;*/
 }


 
/* Front End Developer */
.album-view-artist {
   /* font-weight: 300; */
  /*   font-size: 1.5rem; */
     text-align: center;
    width: 315px;
    padding: 10px;
    margin: 0 auto;  /* center the box */
    border: 1px solid rgb(0,0,0);
    background-color: rgb(0,0,0);
    opacity: .6;
    font-size: 16px; 
    letter-spacing: 5px;
    color: white;
    animation: fadein 2s;
         -moz-animation: fadein 2s; /* Firefox */
   -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
     /*transition: all 0.5s;*/
 }
 
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:.6;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:.6;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:.6;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: .6;
    }
}

/* format the icon skill set */
.ion-social-html5,
.ion-social-css3,
.ion-ion-phone,
.fa fa-code,
.ion-social-javascript,
.ion-social-angular,
.ion-social-github,
.ion-social-nodejs {
    font-size: 5rem;
     margin: 10px;
    padding-left: 130px;
    color: rgba(101,18,95,0.5);
}


 .album-view-details .album-view-release-info {
     font-weight: 700;
     font-size: 0.75rem;
     margin: 40px;
     text-align: left;
 }

/* styling the song list in CH 10 */

 .album-view-song-list {
     width: 90%;
     margin: 1.5rem auto;
     font-weight: 300;
     font-size: 0.75em;
    
 }
 
 .album-view-song-item {
     height: 3rem;
     /* #1 */
     border-bottom: 1px solid rgba(255,255,255,0.5);
     transition: all 0.5s;
     
 }
 
 .song-item-number {
     width: 5%;
     min-width: 30px; /* CH 26 make sure button has room */
 }
 
 .song-item-title {
     width: 85%;
 }
 
 .song-item-duration {
     width: 5%;
 }

/* CH 26 adding button when hover album song list */

 .album-song-button {
     text-align: center;
     font-size: 14px;
     background-color: gray;
     color: rgb(210, 40, 123);
     border-radius: 50% 50%;
     display: inline-block;
     width: 28px;
     height: 28px;
     
 }
 
 .album-song-button:hover {
     cursor: pointer;
     color: dimgrey;
     background-color: rgb(210, 40, 123);

 }
 
 .album-song-button span {
     line-height: 28px;
 }

/* JCO addition */

.album-view-song-item:hover {
    background-color: rgba(255, 255, 255, 0.3);
  
    
}
/* making album view responsive via media queries CH 10 */

 /* #2 */
 @media (max-width: 40rem) and (min-width: 20rem) {
     .album-view-details {
         text-align: center;
     }
     
     .album-view-title {
         margin-top: 0;   
     }
 }
 
 /* #3 */
 @media (max-width: 64rem) and (min-width: 20rem) {
    .album-view-song-list {
         position: relative;
         top: 1rem;
         width: 80%;
         margin: auto;
     }
 }