css.css

header {
  background-color:rgba(21, 238, 138, 0.65); 
}
h3 {
  color:white;
  text-align: center;
  margin:0 auto;
}
h4.album_title {
  color:white;
  text-align: center;
  margin:0 auto;
}
h4 {
  color:blue;
  margin:0px;
}
body {
  width:100%;
}
.album {
  position: relative;
}
.modal-body {
height:250px;
}
button.fa {
  position: relative;
  font-size: 32px;
  margin-left: 45%;
  margin-top: -120%;
}
button.btn-md {
  position: relative;
  font-size: 20px;
  margin-left: -50%;
}
button.btn-md:hover {
  position: relative;
  font-size: 20px;
  margin-left: -50%;
transition:none;
-webkit-transition:none;
}
button.btn-md-del{
    position: absolute;
    margin-left: -80%;
}
#btnNext,#btnPrev {
  font-size: 30px;
}
.switchSongs {
  margin-left: 80%;
}
.btn {
  background: #3455d9;
  background-image: -webkit-linear-gradient(top, #3455d9, #2980b9);
  background-image: -moz-linear-gradient(top, #3455d9, #2980b9);
  background-image: -ms-linear-gradient(top, #3455d9, #2980b9);
  background-image: -o-linear-gradient(top, #3455d9, #2980b9);
  background-image: linear-gradient(to bottom, #3455d9, #2980b9);
  font-family: Georgia;
  color: #fcfcfc;
  font-size: 18px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}
.btn1{
float:left;
margin-left:-10%;
font-size: 110%;
}
.btn {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
ul {
  list-style-type: none;
}

#content {
  position: relative;
  max-width: 80%;
  padding: 1rem;
  border: 1px solid #000;
  background-color: #fff;
}
#remove_btn {
  position: absolute;
  top: .5rem;right: .5rem;
}
img#secPicAlbum:hover{
 opacity: 1;
}
input[name=search]  {
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 18px 30px 20px 35px;
    -webkit-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    float:right;
}
body { margin: 0; background: #333; }

.albums_container { 
  list-style: none;
  align-items: center;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  widows: 1100px;
}

#mainPicAlbum {
    width: 170px;
    margin-left: -70%;
    margin-top: -20%;
}

.album_container img { 
  padding: 5px;
  width: 170px;
  height: auto;
  margin: 10px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center; 
  opacity: 0.85;
}

@media screen and (max-width: 800px) {

  
}

input[name=search]:focus {
    width: 60%;
}
@import url("//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400");


/* Desktop
================================================== */

.column { width:inherit; }


/* Tablet (Portrait)
================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.container {width:500px;}
}


/* Mobile (Portrait)
================================================== */

@media only screen and (max-width: 767px) {
.container {width:300px;}
}


/* Mobile (Landscape)
================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {width:400px;}
}


/* CSS Reset
================================================== */

html,div,span,h1,h6,p,a,u\,li,audio {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}

body { line-height:1; }


/* Basic Styles
================================================== */

html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
background-color:#111;
color:#C8C7C8;
font:14px/28px "Yanone Kaffeesatz", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:300;
}

* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
}


/* Typography
================================================== */

h1,h6,p { color:#808080; font-weight:200; }
h1 { font-size:42px; line-height:44px; margin:20px 0 0; }
h6 { font-size:18px; line-height:20px; margin:4px 0 20px; }
p { font-size:18px; line-height:20px; margin:0 0 2px; }


/* Links
================================================== */

a,a:visited { color:#ddd; outline:0; text-decoration:underline; }
a:hover,a:focus { color:#bbb; }
p a,p a:visited { line-height:inherit; }



/* Custom Styles
================================================== */

/* Highlight Styles */
::selection { background-color:#262223; color:#444; }


/* Audio Player Styles
================================================== */

/* Default / Desktop / Firefox */
audio { 
  position: relative;
  margin-left: 15%;
}
#mainwrap {
    border-radius: 180px;
    background-color:#2751df;
    min-width: 300px;
    max-width: 700px;
    min-height: 300px;
    max-height: 400px;  
    box-shadow:0 0 6px 1px rgba(0,0,0,.25);
    background-size: cover;
    margin: 0 auto;


  }
#audiowrap { background-color:#3451e5; margin:0 auto; }
#plwrap { 
    margin: 0px 45%;
    width:50%;
 }
#tracks { position:relative; text-align:center; }
#nowPlay { display:inline; margin-left:10%; }
#npTitle { margin:0; padding:10px; text-align:right; }
#npAction { margin-left: 17%; position:relative; }
#plList { margin:0; }
#plList { color:white; background-color:#; cursor:pointer; display:block; margin:0; padding:0px 0; }
.plItem { position:relative;list-style: none; }
.plTitle { font-size:16px; margin-left: 15%; margin-top: 5%; text-overflow:ellipsis; top:0; white-space:nowrap; background: rgba(0, 58, 204, 0.5); }
.plNum { padding-left:21px; width:25px; }
.plLength { padding-left:21px; position:absolute; right:21px; top:0; }
.plSel,.plSel:hover { background-color:#262223!important; cursor:default!important; }
a[id^="btn"] { background-color:#231F20; color:#C8C7C8; cursor:pointer; display:inline-block; font-size:50px; margin:0; padding:21px 27px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active { background-color:#262223; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }