html {
    height: 100%;
}

@font-face {
   font-family: 'bubble-bobble';
   src: url('https://chewinggum4theeyes.com/public/css/fonts/bubble-bobble/Bubble-Bobble.otf') format('otf'), 
        url('https://chewinggum4theeyes.com/public/css/fonts/bubble-bobble/Bubble-Bobble.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

body{
    
    font-family: bubble-bobble;
    font-weight: 900;
   
}

body, #welcome-app, .modal-content-background {
    
    background-color: #1F2022; /* For browsers that do not support gradients */
}

.navbar{
    background-color:#2E3033;
}
   
.navbar-brand ,h1, h2, h3{
    
    color: #fc5a8d;
    
}

input[type="password"]{
    
    font-family: "Times New Roman", Times, serif;
    
}

.form-control:focus {
    box-shadow: 0.2rem 0.2rem #fc5a8d;
} 

.card img{
    
    cursor:pointer;
    height: 12.75;
    min-height: 12.75;
    
}


.card img:hover , .carousel-item img:hover{
    
    opacity: 0.7;
}


a{
    text-decoration: none;
}

a:not(.view-all){
    color: #fc5a8d;
    
}

.favorite-btn-wrapper button,
.favorite-btn-wrapper a {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
}
    
.favorite-btn-wrapper svg,
.favorite-btn-wrapper i {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
}




a:link, .view-all:links, .categories-links:links{
    
    color: #fc5a8d;
    
}

a:hover, .navbar-link:hover, .view-all:hover, .categories-links:hover{
    
    color: #38E8D3;
}

.spinner-border{

    top: 0.6rem;
    right: 2.0rem;
    padding-right: 0.6250rem;
}

.carousel-height{
    height:40em;
}

/*#carousel-container {*/
/*  perspective: 1000px; */
/*}*/

.carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
}

.carousel-inner {
  display: flex;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}

.carousel-item {
  flex: 0 0 100%;
  transform-origin: center;
  transform: translateZ(-500px); /* Adjust the depth of inactive items */
  opacity: 0; /* Hide the inactive items initially */
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.carousel-item.active {
  transform: translateZ(0) scale(1.2); /* Adjust the scale for a 3D zoom effect */
  opacity: 1; /* Show the active item */
}



.show-page-image{
    
    height:25em;
}

/*.actor-image{*/
    
/*    height:15.75em;*/
/*}*/


/* Responsive iFrame */
.iframe-player {
  width: 100%;
  height: 15em;
  max-width: 100%;
  min-height: 15em;
}


/*scroll button*/
#scroll-to-top, #menu-btn, #back-btn {
    padding:0.5em 1em;
    border: 1px solid #ffffff;
    border-radius:50%;
    color:#ffffff;
    background-color:#fc5a8d;
    position: fixed;
    z-index:2000;
    cursor: pointer;
}

#scroll-to-top {
    bottom: 7em;
    right: 1.5em;
    display: none;
}

#back-btn {
    text-decoration:none;
    padding:0.5em 1.1em;
    bottom: 3.7em;
    right: 1.5em;
    display: none;
}

/*menu button*/
#menu-btn {
    bottom: 0.5em;
    right: 1.4em;
    display: block;
}


/* Hide scrollbar for Firefox, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Chrome */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.recommended-scroll{
    
    -webkit-overflow-scrolling: touch !important;
}

.show-container, .actor-container, .tv-episode-container, .tv-season-container, .category-container, .genre-container {
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-size: 1.25rem;
    font-weight: 400; /* Adjust as needed */
    padding-top: 1em;
    padding-bottom: 1em;
    
    /* Anti-aliasing for crisper text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    }
    
    .actor-container .main-actor-image img{
        height: 35em !important;
    }
    
    .actor-known-for img{
        height: 12.75em !important;
        min-height: 12.75em !important;
    }


/*scroll content on view episode button*/
 #scrollContent {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 100%;
      white-space: nowrap;
    }

    #scrollContent>span {
      display: flex;
      animation: textScrollEffect 3s linear;
      animation-iteration-count: 1;
    }

    @keyframes textScrollEffect {
      from {
        transform: translateX(50%);
      }

      to {
        transform: translateX(-50%);
      }
    }
    


/* Base styles for favorite button */
.favorite-btn-wrapper button,
.favorite-btn-wrapper a {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1 !important;
}

.favorite-btn-wrapper svg,
.favorite-btn-wrapper i {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
}

/* Extra Small Devices (Phones) */
@media (max-width: 576px) {
    .show-page-image {
        height: 20em;
    }
    .carousel-height {
        height: 20em;
    }
    .iframe-player {
        height: 20em;
        min-height: 20em;
    }
    
    .show-container, 
    .actor-container, 
    .tv-episode-container, 
    .tv-season-container, 
    .category-container, 
    .genre-container {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        padding-top: 0.75em;
        padding-bottom: 0.75em;
    }
    
    .actor-container .main-actor-image img{
        height: 20em !important;
    }
    
    .actor-known-for img{
        height: 12.75em !important;
        min-height: 12.75em !important;
    }
    
    /* Favorite button - Extra Small */
    .favorite-btn-wrapper button,
    .favorite-btn-wrapper a {
        padding: 0.15rem 0.3rem !important;
        font-size: 0.6rem !important;
    }
    
    .favorite-btn-wrapper svg,
    .favorite-btn-wrapper i {
        width: 10px !important;
        height: 10px !important;
        font-size: 10px !important;
    }
}

/* Small Devices (Tablets, Landscape Phones) */
@media (min-width: 577px) and (max-width: 768px) {
    .show-page-image {
        height: 12em;
    }
    .carousel-height {
        height: 25em;
    }
    .iframe-player {
        height: 15em;
        min-height: 15em;
    }
    .show-container, 
    .actor-container, 
    .tv-episode-container, 
    .tv-season-container, 
    .category-container, 
    .genre-container {
        font-size: 1rem;
        letter-spacing: 0.75px;
        padding-top: 0.8em;
        padding-bottom: 0.8em;
    }
    
    .actor-container .main-actor-image img{
        height: 25em !important;
    }
    
    /* Favorite button - Small */
    .favorite-btn-wrapper button,
    .favorite-btn-wrapper a {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.65rem !important;
    }
    
    .favorite-btn-wrapper svg,
    .favorite-btn-wrapper i {
        width: 12px !important;
        height: 12px !important;
        font-size: 12px !important;
    }
}

/* Medium Devices (Tablets) */
@media (min-width: 769px) and (max-width: 992px) {
    .show-page-image {
        height: 15em;
    }
    .carousel-height {
        height: 20em;
    }
    .iframe-player {
        height: 20em;
        min-height: 20em;
    }
    .show-container, 
    .actor-container, 
    .tv-episode-container, 
    .tv-season-container, 
    .category-container, 
    .genre-container {
        font-size: 1.1rem;
        letter-spacing: 1px;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    
    .actor-container .main-actor-image img{
        height: 25em !important;
    }
    
    /* Favorite button - Medium */
    .favorite-btn-wrapper button,
    .favorite-btn-wrapper a {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
    
    .favorite-btn-wrapper svg,
    .favorite-btn-wrapper i {
        width: 13px !important;
        height: 13px !important;
        font-size: 13px !important;
    }
}

/* Large Devices (Laptops, Small Desktops) */
@media (min-width: 993px) and (max-width: 1200px) {
    .show-page-image {
        height: 20em;
    }
    .carousel-height {
        height: 25em;
    }
    .iframe-player {
        height: 22em;
        min-height: 22em;
    }
    .show-container, 
    .actor-container, 
    .tv-episode-container, 
    .tv-season-container, 
    .category-container, 
    .genre-container {
        font-size: 1rem;
        padding-top: 1.2em;
        padding-bottom: 1.2em;
        letter-spacing: 0.5px;
        text-shadow:0;
        font-weight: 200;
    }
    
    .actor-container .main-actor-image img{
        height: 25em !important;
    }
    
    /* Favorite button - Large */
    .favorite-btn-wrapper button,
    .favorite-btn-wrapper a {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.75rem !important;
    }
    
    .favorite-btn-wrapper svg,
    .favorite-btn-wrapper i {
        width: 15px !important;
        height: 15px !important;
        font-size: 15px !important;
    }
}

/* Extra Large Devices (Large Desktops) */
@media (min-width: 1201px) {
    .show-page-image {
        height: 25em;
    }
    .carousel-height {
        height: 40em;
    }
    .iframe-player {
        height: 25em;
        min-height: 25em;
    }
    
    .show-container, 
    .actor-container, 
    .tv-episode-container, 
    .tv-season-container, 
    .category-container, 
    .genre-container {
        font-size: 1rem;
        padding-top: 1.2em;
        padding-bottom: 1.2em;
        letter-spacing: 1px;
        text-shadow:0;
        font-weight: 200;
    }
    
    /* Favorite button - Extra Large */
    .favorite-btn-wrapper button,
    .favorite-btn-wrapper a {
        padding: 0.35rem 0.7rem !important;
        font-size: 0.8rem !important;
    }
    
    .favorite-btn-wrapper svg,
    .favorite-btn-wrapper i {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
    }
}