body {
  background-image: url("../img/background.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color:#fff;
  font-family: "Comfortaa", serif;
  font-size:14px;
}

main {
  margin-top:80px;
  display: flex;
  justify-content: center;
}

@font-face {
  font-family: 'THR';
  src: url("../fonts/THR.otf") format("opentype");
}

@font-face {
  font-family: 'THR';
  font-weight:lighter;
  src: url("../fonts/THR-soft.otf") format("opentype");
}

.navbar-brand {
  font-family: "THR"!important;
}

nav {
  background-image:url("../img/kanker.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  /*filter: brightness(2);*/
}

.nav-item a span:after {
  background: #003692;
  background: -moz-linear-gradient(90deg,rgba(0,54,146,1) 0%,rgba(140,49,182,1) 100%);
  background: -webkit-linear-gradient(90deg,rgba(0,54,146,1) 0%,rgba(140,49,182,1) 100%);
  background: linear-gradient(90deg,rgba(0,54,146,1) 0%,rgba(140,49,182,1) 100%);
  bottom: 0;
  content: "";
  height: 4px;
  right: 0;
  position: absolute;
  width: 0;
  transition: .3s;
  -webkit-transition: .3s;
}

.nav-item a span {
  position: relative;
  padding: 5px 0 8px;
}

.nav-item a:hover span:after {
  left: 0;
  width: 100%;
}

.customPlayer {
  font-size: 20px;
  background-color: #ffffff3d;
  width: fit-content;
  padding-left: 11px;
  padding-right: 11px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 12px;
  margin-top:16px;
}

.customPlayer i {
  width:19px;
}

.customPlayer .titleMarquee {
  font-size:15px;
  position: relative;
  top: -2px;
  display: inline-flex;
}

.customPlayer marquee {
  width:220px;
  transition:all 1s ease-in-out;
}

.customPlayer .badge {
  position: relative;
  top: -3px;
  right: -3px;
}

@keyframes breathing-live {
  from
  {
      background-color: #fd4747;
  }
  to
  {
      background-color: #fc8484;
  }
}

.live-animation {
  animation: 1s infinite alternate ease-out breathing-live;
}

.cardCustom {
  background-color: #1e1e1e85;
  padding: 18px 18px 17px 18px;
  border-radius: 14px;
  backdrop-filter: blur(7px);
  border: 1px solid #4e4e4e54;
}

.cardCustom .cardHeader {
  margin-left: -19px;
  margin-right: -19px;
  background-color: #00000033;
  margin-top: -19px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 6px 10px 6px 18px;
  display: flex;
  position: relative;
  border: 1px solid #ffffff00;
  border-bottom: 0px;
  margin-bottom: 11px;
  font-family: 'THR';
  font-size: 21px;
  justify-content: center;
}