/* override browser default */
html,
body {
  margin: 0;
  padding: 0;
  background: rgb(4,0,73);
 /* background: -moz-linear-gradient(45deg, rgba(4,0,73,1) 0%, rgba(116,0,0,1) 50%, rgba(4,0,73,1) 100%);
 background: -webkit-linear-gradient(45deg, rgba(4,0,73,1) 0%, rgba(116,0,0,1) 50%, rgba(4,0,73,1) 100%);
 background: linear-gradient(45deg, rgba(4,0,73,1) 0%, rgba(116,0,0,1) 50%, rgba(4,0,73,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#040049",endColorstr="#040049",GradientType=1); */
 /*https://cssgradient.io/*/
}

/* use viewport-relative units to cover page fully */
body {
  /*height: 100vh;
  width: 100vw;*/
  font-family: helvetica, arial, sans-serif;
  color: white;
}

/* include border and padding in element width and height */
* {
  box-sizing: border-box;
}

#ghostery-tracker-tally{
  display: none;
}

/* full-sized  container that fills up the page */
div {
  height: 100%;
  width: 100%;
}

a{
  text-decoration: none;
  color: white;
}

a:hover{
  color: rgb(4,0,73);
  font-weight: 600;
}


body #root{
  min-height: 900px;
  width: 100%;
  margin: auto;
  background-image: url('../images/me.jpg');
  background-position: center;
  background-size: cover;
}

#root .content{
  max-width: 97%;
  height: 90%;
  margin: 20px auto 0 auto;
  background-color: rgba(255,255,255,0.2);
  display: inline-block;
  border-radius: 20px;
}

#root .content .container{
  height: 15%;
  margin-bottom: 70px;
  font-size: 13px;
}
#root .content .container .row{
  margin:auto;
}

#root .content .container .col{
    max-width: 150px;
    margin:auto;
    margin-bottom: 25px;
}

#root .content .container .col1, #root .content .container .col3{
  width: 80px;
  margin-top: 25px;
}

#root .content .container .col2{
  width: 110px;
  margin-top: 5px;
}

#root .content .container .col2 img{
  width: 100%;
}


#root .content .container .col a img{
  width: 100%;
  border-radius: 50%;
}

#root .content .container .col img:hover, #root .content .container .col img:focus{
    opacity: 0.3;
}

#root .button{
  margin: 30px auto 15px auto;
  max-width: 95%;
  height: 60px;
  border: 2px solid white;
  font-size: 25px;
}

#root .playlist{
  font-size: 15px;
}

#root .playlist a{
  padding-top: 15px!important;
}

#root .button a{
  width: 100%;
  display: inline-block;
  height: 100%;
  padding-top: 8px;
}
#root .button a i{
  margin-right: 15px;
}
#root .button a:hover, #root .button a:focus{
  background: rgb(4,0,73);
  background: -moz-linear-gradient(45deg, rgba(4,0,73,1) 0%, rgba(116,0,0,1) 50%, rgba(4,0,73,1) 100%);
  background: -webkit-linear-gradient(45deg, rgba(4,0,73,1) 0%, rgba(116,0,0,1) 50%, rgba(4,0,73,1) 100%);
  background: linear-gradient(45deg, rgba(4,0,73,1) 0%, rgba(116,0,0,1) 50%, rgba(4,0,73,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#040049",endColorstr="#040049",GradientType=1);
}

.new-release{
	outline:none;
    box-shadow:0 0 23px rgb(116,0,0);
}

.social_media_svg{
  width: 25px;
  padding: 0;
  margin: 0 15px 0 5px;
  fill: white;
  display: inline-block;
}

footer{
  font-size: 10px;
  bottom: -25px;
display: inline-block;
position: relative;
}

@media (min-width: 576px) {
 }

@media (min-width: 768px) {
  #root{
     width: 70%!important;
   }

   #root .playlist{
     font-size: 25px;
   }

   #root .playlist a{
     padding-top: 8px!important;
   }

}

@media (min-width: 992px) {
  #root{
     width: 50%!important;
   }
 }

@media (min-width: 1200px) {
  #root{
     width: 30%!important;
   }
  }