.limited {
            max-height: 900px;
            overflow: hidden;
            position: relative;
        }
.description .bottom {
            position: absolute;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 80%);
            width: 100%;
            height: 40%;
            opacity: 1; 
            transition: all 800ms ease-in-out;
        }        
*::-webkit-scrollbar-track { 
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
background-color: rgba(255, 255, 255,.2); 
border-radius: 5px 5px 5px 5px; 
} 
*::-webkit-scrollbar { 
width: 12px; 
background-color: rgba(0,0,0,.0); } 
*::-webkit-scrollbar-thumb { 
border-radius: 8px; 
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 1); 
background-color: #368aa8; 
}
*::-webkit-scrollbar-thumb:hover { 
background-color: #61a3ba; 
}
body {
  margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #0f172a;
      color: #fff;
  /*text-align: center;*/
}
#wrapper {
  margin: 0 5px;
  width: fit-content;
  display:inline-block; 
}
header.filters {
  padding: 0 5px;
  display: flex;
  border: 1px solid rgb(71 85 105);
  border-radius: 10px;
  color: rgb(203 213 225);
  font-family: "Inter", sans-serif;
  font-size: 12px;
}
.iconDiv {
  height: 24px;
  width:fit-content;
  margin:5px 2px;
  padding: 4px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: width 300ms ease-in-out 0s, background-color 300ms linear 200ms;
  font-size: 8pt;
}
.iconDiv span{
margin:0px 4px;
}
.iconSVG {
  height: 20px;
  aspect-ratio: 1 / 1;
}
.iconSVG i{
  font-size: 16pt;
}
.iconDiv:hover,
.iconDiv:focus-visible {
  width: fit-content;
  background-color: rgb(51 65 85);
  cursor: pointer;
  transition: width 300ms ease-in-out 0s, background-color 100ms linear 0s;
}
.iconDiv:focus-visible {
  outline: 1px solid rgb(51 65 85);
  outline-offset: 4px;
}
.iconDiv:active {
  opacity: 0.9;
}
.iconDiv .filteroptions{
  
  display: inline-block;
width:100%;

  margin:0px 4px;
  border-radius: 4px;
    padding: 1px 4px;
    background: rgb(51 65 85);
    color: white;
    font-size: 12pt;
    box-shadow: inset 0px 0px 10px 4px rgb(88 102 122);
    border: solid 1px rgb(88 102 122);
    outline: none;
}
input.filteroptions:placeholder-shown{
width:0%;
display:none;
}
.iconDiv:hover .filteroptions{
  display: inline-block;
width:100%;
animation: fadeIn 1s linear forwards;
}
/*
.iconDiv.selected .filteroptions{
display: inline-block;
width:100%;
animation: fadeIn 1s linear forwards;

}
*/
.iconDiv.selected{
width: fit-content;
  background-color: rgb(51 65 85);
  cursor: pointer;
  transition: width 300ms ease-in-out 0s, background-color 100ms linear 0s;
}
@keyframes fadeIn {
  0% {
    width:0%;
  }
  100% {
    width: 100%;
  }
}
header.menu {
      padding: 10px 40px;
      font-size: 16px;
      font-weight: bold;
      background: #020617;
      border-bottom: 1px solid #1e293b;
    }
#results_title{
  color:white;text-align:center;margin:3px;
}
#results_title small{
  font-size:10pt;
}
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
      padding: 20px;
    }

    .card {
      max-width:500px;
      background: #020617;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 -1px 6px rgba(3, 198, 252,0.6);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
    }

    .card:hover {
      /*transform: translateY(-10px);*/
      box-shadow: 0 -1px 26px rgba(3, 198, 252,0.8);
    }

    .poster{
      transition: all 600ms ease-in-out;
      width: 100%;
      margin:0 0%;
      height: 180px;
      object-fit: cover;
    }
.card:hover .poster{
      height:280px;
      width:75%;
      margin:0 12.5%;
      object-fit:fill;
    }
    .content {
      position: relative;
      padding: 20px;
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .description {
      max-height: 90px;
      overflow: hidden;
      position: relative;
      font-size: 14px;
      color: #94a3b8;
      line-height: 1.5;
      transition: all 800ms ease-in-out;
    }
.description:hover{
  max-height: 400px;
}
.description:hover .bottom{
  opacity:0;
}
    .play-button {
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      cursor: pointer;
      transition: all 0.3s ease;
      border:solid 1px white;
      z-index: 9999;
    }

    .play-button::before {
      content: '';
      border-style: solid;
      border-width: 12px 0 12px 18px;
      border-color: transparent transparent transparent white;
      margin-left: 5px;
    }

    .play-button:hover {
      background: #ef4444;
      transform: translate(-50%, -50%) scale(1.2);
      box-shadow: 0 0 20px rgba(239,68,68,0.8);
    }

    .card:hover .play-button {
      opacity: 1;
    }

    .play-button {
      opacity: 0;
    }

    .card:hover .play-button {
      opacity: 1;
    }
#episodedata .play-btn{
color:white;
margin: 0px 6px;
border: solid 1px #01b2fa;
padding: 2px 7px;
border-radius: 5px;
box-shadow: inset 0px 0px 9px #01b2fa;
background: #013548;
font-size: 7pt;
position: absolute;
right: 10px;
cursor:pointer;
transition: all 400ms ease-in-out;
}
#episodedata .play-btn:hover{
box-shadow: inset 0px 0px 9px #01b2fa, 0px 0px 5px 2px #01b2fa;    
}
#Stream{
width:0px;
height:0px;
transition: opacity 1500ms ease-in-out;
position: fixed;
left:0%;
z-index:99999999999;
box-shadow:0px 0px 0px transparent;
opacity:0;
}
#Stream #playeroptions{
  text-align: right;
    position: absolute;
    top: -3px;
    right: 0px;
    width:100%;
opacity:.3;
}
#Stream:hover #playeroptions{
opacity:1;
}
#Stream.shrink{
transform:scale(0.5,0.5);
}
.playerbtn{
  margin:0 3px;
  display:inline-block;
  font-size:9pt;
  padding:3px 3px;
  background:#adadad;
  color:black;
  cursor: pointer;
border:solid 1px #134a29;
border-radius: 0px 0px 5px 5px;
  box-shadow:0px 0px 0px #3da6cc, inset 0px 1px 4px white, inset 0px -1px 4px black;
  transition: all 500ms ease-in-out; 
}
.playerbtn:hover{
    background:#39a6fa;
    box-shadow:0px 2px 6px white, inset 0px 4px 10px white, inset 0px -4px 10px black;
}
.playerbtn.close{
  border-radius: 0px 0px 5px 5px;
  font-size:11pt;
  padding:1px 3px;
border:solid 1px black;

}
.playerbtn.close:hover{
  background: #cc3d3d;
box-shadow:0px 2px 3px red, inset 0px 0px 8px black;
}
.playerbtn:after{
opacity:0;
  content:attr(data-tooltip);
  font-size:0pt;
transition: all 500ms ease-in-out;  
}
.playerbtn:hover:after{ 
  opacity: 1;
  font-size:9pt;
}
#Stream embed{
  width:100%;
  height:100%;
  border: none;

}
#Stream:has(embed){
  width: 60%;
  height: 60%;
  left:20%;
  top:15%;
box-shadow:0px 0px 20px white;
padding:24px 2px 15px 2px;
background-color: #6d7c8c;
border-radius: 4px;
opacity:1;
}

body:has(#Stream embed) .play-button{display:none;}
#pages{
  margin:0 auto;
  display: block;
  justify-items: center;
  text-align: center;
  padding: 2px;
}
#pages button{
  margin: 0 2px;
  background: #94a3b8;
  border:solid 1px #1e293b;
  padding: 2px 6px;
  border-radius: 4px;
  color: #1e293b;
  font-weight: bold;
font-size: 9pt;
}
#page{
  position: relative;
}
#page:before{
  content:'Pages';
  font-size:7pt;
  font-weight:bold;
  position: absolute;
  right:0%;
  top:100%;
}
#C4UNF{ position:fixed; bottom:0px; right:6px; display:block; text-align: center;z-index:9999;}
#C4UNF .alert{ 
    cursor: pointer;
    font-size: 13pt;
    width: fit-content;
    padding: 4px 12px;
    margin-right: 20px;
    display: block;
    background-color: #f44336;
    color: #073c4a;
    opacity: 1;
    transition: opacity .6s;
    margin-bottom: 8px;
    border-radius: 6px;
    box-shadow: inset 0px 0px 10px 3px black;
    border: solid 2px rgba(0, 0, 0, .4);
    animation-name: C4UAni;
    animation-duration: 8s;
} 
#C4UNF .alert.success {background-color: #04AA6D;}
#C4UNF .alert.info {background-color: #2196F3;} 
#C4UNF .alert.warning {background-color: #ff9800;} 
#C4UNF .C4UCBTN {  
  display:inline-block; 
  color: white; font-weight: bold; 
  font-size: 8px; 
  cursor: pointer; transition: 0.3s; background:rgba(0,0,0,.3); 
  border-radius: 6px;
  padding:2px 3px;
  margin-right:4px; 
  opacity: .5; 
  } 
#C4UNF .C4UCBTN:hover { opacity: 1; background:rgba(0,0,0,.6); }
 @keyframes C4UAni { 0% {transform:translate(100%, 0) scale(0);} 10% {transform:translate(0%, 0) scale(1);} 95% {transform:translate(0%, 0) scale(1);} 100% {transform:translate(0%, 0) scale(1);} }
 .content:after{
position: absolute;
    bottom: 100%;
    left: 4px;
    content: attr(data-released);
    background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(0, 0, 0, 1) 70%);
    font-size: 10pt;
    padding: 3px 10px 8px 10px;
    border-radius: 10px 10px 0px 0px;
    color: white;
    font-weight: normal;
    line-height: .9em;
    text-shadow: 0px -2px 1px black;
 } 
select {
   -webkit-appearance:none;
   -moz-appearance:none;
   -ms-appearance:none;
   appearance:none;
   outline:0;
   box-shadow:none;
   border:0!important;
   background: #7297bf;
   background-image: none;
   flex: 1;
   padding: 2px 10px;
/*   margin:2px 5px;*/
   color:black;
   cursor:pointer;
   font-size: 12px;
   font-family: 'Open Sans', sans-serif;
}
select::-ms-expand {
   display: none;
}
.select {
   position: relative;
   display: flex;
   width: 140px;
   height: 20px;
   background: #cbed09;
   overflow: hidden;
   border-radius: 2px;
}
.select::after {
  color:#7297bf;
   content: '\25BC';
   position: absolute;
   top: 0;
   right: 0;
   padding: 2px 4px;
   font-size: 15px;
   background: #0c345e;
   cursor:pointer;
   pointer-events:none;
   transition:.25s all ease;
}
.select:hover::after {
   color: #23b499;
}
@supports (animation-timeline: view()) {
  @keyframes fade-in {
    from { opacity:0;font-size:0%;padding:0px 0px; }
    to   { opacity: 1;font-size:14pt;padding:8px 12px;}
  }
  /*
  @keyframes shadow-in {
    to { box-shadow: 0 10px 10px #0003 }
  }
  */
  nav, nav > a {
    animation: fade-in auto linear both;
    animation-timeline: scroll();
    animation-range: 690px 700px;
  }
  
  nav {
    animation-name: shadow-in;
  }
  @keyframes sticky-bar {
    from {padding-top: 0px;}
    to   {padding-top: 30px;}
  }
  #episodedata .Seasons{
    animation: sticky-bar auto linear both;
    animation-timeline: scroll();
    animation-range: 50px 150px;
  }  
}

nav {
  position: fixed;
  bottom: 15px;
  left:0;
  right:0;
  width: fit-content;
  z-index: 1;
  margin: 0 auto;
  box-shadow: 
  -5px -11px 10px rgb(3, 198, 252), 
  -5px 11px 10px rgb(3, 198, 252), 
  5px -11px 10px rgb(3, 198, 252), 
  5px 11px 10px rgb(3, 198, 252);
  opacity:.4;
transition: all 500ms ease-in-out;
}
nav:hover{
  opacity:1;
  box-shadow: -5px -11px 14px 3px rgb(3, 198, 252), -5px 11px 14px 3px rgb(3, 198, 252), 5px -11px 14px 3px rgb(3, 198, 252), 5px 11px 14px 3px rgb(3, 198, 252);
}
nav a {
text-align: center;
    color: white;
    background: #3e5c8a;
    box-shadow: inset 0px 5px 8px 1px white, inset 0px -5px 8px 2px black;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0%;
    cursor: pointer;
    transition: all 500ms ease-in-out;
}
nav a:hover{
color:black;
background: rgb(3, 198, 252);
    box-shadow: inset 0px 5px 8px 1px white, inset 0px -5px 8px 2px black;
  }
  /*-----------------------------------------------------------------------------*/
  
.cookiewrapper {
  position: fixed;
  bottom: 10px;
  right: -500px;
  max-width: 445px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 8px 25px 10px;
  opacity:0;
  transition: right 1.2s ease, opacity 350ms ease;
  box-shadow: 0px 0px 11px 3px rgba(3, 198, 252, 1);
}
.cookiewrapper.show {
  right: 20px;
  opacity: 1;
}
.cookiewrapper header {
  display: flex;
  align-items: center;
  column-gap: 2px;
}
.cookiewrapper header i {
  color: #c9af05;
  font-size: 28px;
  text-shadow: 1px 1px 2px black;
}
.cookiewrapper header h2 {
margin: 0px;
    margin-left: 4px;
    color: #4070f4;
    font-weight: 500;
    text-shadow: 1px 1px 2px black;
}
.cookiewrapper .data {
  margin-top: 2px;
}
.cookiewrapper .data p {
  color: #333;
  font-size: 12px;
}
.data p a {
  color: #4070f4;
  text-decoration: none;
}
.data p a:hover {
  text-decoration: underline;
}
.cookiewrapper .buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content:center;
}
.buttons .button {
border: none;
    color: #fff;
    padding: 5px 0;
    margin: 0% 10%;
    border-radius: 4px;
    background: #4070f4;
    cursor: pointer;
    width: calc(80% / 2 - 10px);
    transition: all 0.2s ease;
}
.buttons #acceptBtn:hover {
  background-color: #017a27;
}
#declineBtn {
  border: 2px solid #4070f4;
  background-color: #fff;
  color: #4070f4;
}
#declineBtn:hover {
  border: 2px solid #751313;
  background-color:#751313;
  color: #fff;
}
.limited {
            max-height: 400px;
            overflow: hidden;
            position: relative;
        }
        .limited.l-200 {
            max-height: 100px;
        }
        /* Add your sizes for text box */
        .limited.l-300 {
            max-height: 300px;
        }
        .limited .bottom {
            position: absolute;
            bottom: 0;
            /*background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 80%);*/
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 80%);
            width: 100%;
            height: 40%;
            opacity: 1;
            transition: .3s;
        }
        .read-more-checker {
            opacity: 0;
            position: absolute;
        }
        .read-more-checker:checked ~ .limited {
            max-height: none;
        }
        .read-more-checker:checked ~ .limited .bottom {
            opacity: 0;
            transition: .3s;
        }
        .read-more-checker ~ .read-more-button:before {
            content: 'Show More...»';
        }
        .read-more-checker:checked ~ .read-more-button:before {
            content: '«...Show Less ';
        }
        .read-more-button {
            cursor: pointer;
            padding:3px;
            font-size:10px;
            color: #2a81df;
            border: 1px solid #c4c4c4;
            border-radius: 4px;
            margin:0px auto 6px auto;
            width: fit-content;
  display: flex;
  align-items: center;
  justify-content:center;
        }
  .ribbon {
    position: absolute;
    top:0px;
    right:0%;
  font-size: 14px;
  font-weight: bold;
  color: red;
}
.ribbon {
  --r: .4em; /* control the cutout */ 
  border-inline: .5em solid transparent;
  padding: .3em .1em calc(var(--r) + .1em);
  clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - .5em) calc(100% - var(--r)),50% 100%,.5em calc(100% - var(--r)),0 100%);
  background:
   radial-gradient(50% .2em at top,#000a,#0000) border-box,
   black padding-box; /* the color  */
  width: fit-content;
  opacity: .7;
  transition: all 500ms ease-in-out;
}
#playeroptions .ribbon{
left:10%;
}
.ribbon:hover{
  font-size: 20px;
  opacity:1;
  background:
   radial-gradient(50% .2em at top,#000a,#0000) border-box,
   #d4d4d4 padding-box;
}
.Seasons{
  display:inline-block;
}
#episodedata .Seasons{
     margin: 0 auto;
    display: block;
    padding-top: 0px;
    padding-bottom:5px;
    position: sticky;
    top: 0px;
    text-align: center;
    background: #0f172a;
}
.Seasons span{
vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    background: red;
    font-weight: normal;
    margin: 0px 6px;
    font-size: 8pt;
    padding: 2px 7px;
    border-radius: 2px;
    background-image: radial-gradient(#61a3ba, #0f172a);
    box-shadow: 0px 0px 5px 0px #61a3ba;
    text-shadow: -1px -1px 1px black;
    transition: all 400ms ease-in-out;
}
.Seasons span:hover{
    box-shadow: 0px 0px 10px 4px #61a3ba;
}
.Episodes{
  font-size:8pt;
}
#episodedata{
  opacity:0;
  display: block;
  position: fixed;
  width:0%;
  left:50%;
  top:50%;
  height:0%;
  z-index: 9999;  
  overflow: hidden;
  overflow-y: auto;
  color:white;
  background:#0f172a;
  border-radius: 6px;
  transition: all 800ms ease-in-out;
}
#episodedata.open{
  opacity:1;
    width:70%;
  left:15%;
  top:10%;
  height:80%;
  box-shadow: 0px 0px 15px 5px #61a3ba;
}
#episodedata button{
color: white;
    position: fixed;
    background: #6a0000;
    border-radius: 0px 0px 10px 0px;
    border: inset 1px #354044;
    box-shadow: -1px -1px 10px 2px #000000, inset -2px -2px 7px #cda8a8;
    padding: 3px 7px;
    z-index: 9999;
}
#epcontent h1{
font-size: 12pt;
margin: 4px 0px;
text-align: center;
}
#epcontent{
  font-size: 10pt;
  margin:10px;
}
#epcontent .epdata{
  border-bottom:solid 1px white;
  margin-bottom: 8px;
}
#epcontent p{
  margin: 4px 10px;
padding-bottom:8px;
}

#epcontent .Seasons span{
margin: 4px 6px;
}