.hero {max-width:700px;}
a{color: #82b2e5;}
body {background-color: inherit !important; background: linear-gradient(45deg, #07070a, #001929);}
button, small.footer { text-align: left !important; }
button[data-playing="true"] { color: white; }
.container {max-width:96%;}
.card {border: 1px solid rgba(250,250,250,.1) !important;}
.card-body {background-color: #151515;}
.card-header{background-color: rgb(25, 25, 25) !important; text-align: center;}
.text-muted { color: #dedede !important;}
.btn-outline-primary {
    color: #5586b7;
    border-color: #527ca8;
}
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.btn-active {
  color:white;
  background: linear-gradient(45deg, rgba(255, 42, 212, 1) 0%, rgba(255, 204, 0, 1) 100%);
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
}
.bootstrap-table .search {
  float: none !important;
  width: 100% !important;
}
.card-header {padding: .5rem 1rem;}
.card-header .font-weight-normal {font-size: 1.2rem;}
.card-img-top {
  width: 100%;
  max-height: 170px;
  object-fit: cover;
}
.card-footer {
  border:none !important;
  background-color: #151515 !important;
}
@media screen and (min-width:1100px){
  .container {max-width:1200px;}
}