@import url('/css/fonts/Din/stylesheet.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

 :root {
    --plyr-color-main: rgb(43 48 53);
  }



/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
  
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #orange;
}

body {
	 font-family: "DIN Pro", sans-serif !important;
font-weight: 300;
  font-style: normal;
}

#noni {
overflow: hidden;
overflow-y: auto;
mask-image: linear-gradient( to bottom, transparent 0, var(--bs-body-bg) 2.4rem, var(--bs-body-bg) calc(100% - 2.4rem), transparent 100% );
}

.ch-img {
object-fit: cover;
aspect-ratio: 16/9;
width: 100%;
transition: 1s; 
}

.ch-title {
	 font-family: "DIN Pro", sans-serif !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
z-index: 1;
text-shadow: 0px 0px 3px black;
}

.ch-timeshift {
position: absolute;
top: 5;
right: 5;
z-index: 1;
text-shadow: 0px 0px 3px black;
}

.ch-card {
    position: relative;
    text-align: center;
    color: white;
overflow: hidden;
}

.ch-card:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;    
	position: absolute;
	top: 0;    
	left: 0;
background: rgb(13,110,253);
opacity: 0.8;
border-radius: 5px;
}



 $color-mode-type: data;

@include color-mode(dark) {
   .logo {
	  filter: invert(100%);
  }
}