/**
**
** Movies & TV Recommendation System
** Style File
** by Stefanos Choutridis
**
**/


/* General Styling Starts Here*/
.mtv-rec-sys{
  overflow: hidden;
}
.main-bg-color{
  background: #1C002E;
}
.dark-mode-bg-color{
  background: #1F1D21;
}
.dark-bg{
  background: #171518;
}
.dark-bg .movie-item-details, .dark-bg .system-home{
  color: #fff;
}
.main-dark-color{
  background: #212529;
}
.light-color{
  color: #F3F1FF;
}
.height-70{
  height: 70px;
}
a{
  text-decoration: none !important;
  transition: all 0.3s linear;
}
.mtv-rec-sys.poptoggler-light::before {
    content: "";
    position: absolute;
    display: block;
    width: 20%;
    height: 40%;
    background: #00000000;
    z-index: 9999;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: 0.5s pop_toggler_light linear;
    -webkit-animation: 0.5s pop_toggler_light linear;
    -moz-animation: 0.5s pop_toggler_light linear;
}
.mtv-rec-sys.poptoggler-dark::before {
    content: "";
    position: absolute;
    display: block;
    width: 20%;
    height: 40%;
    background: #00000000;
    z-index: 9999;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: 0.5s pop_toggler_dark linear;
    -webkit-animation: 0.5s pop_toggler_dark linear;
    -moz-animation: 0.5s pop_toggler_dark linear;
}
@keyframes pop_toggler_light {
  0% {background: #ffffffff;}
  25% {
    background: rgb(31,29,33);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.42620798319327735) 50%, rgba(255,255,255,0) 100%);
  }
  50% {
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0984768907563025) 50%, rgba(255,255,255,0.7455357142857143) 100%);
    width: 40%;
    height: 80%;
  }
  100% {
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
    width: 200%;
    height: 200%;
  }
}
@keyframes pop_toggler_dark {
  0% {background: #00000000;}
  25% {
    background: rgb(31,29,33);
    background: radial-gradient(circle, rgba(31,29,33,1) 0%, rgba(31,29,33,0.42620798319327735) 50%, rgba(31,29,33,0) 100%);
  }
  50% {
    background: rgb(31,29,33);
    background: radial-gradient(circle, rgba(31,29,33,0) 0%, rgba(31,29,33,0.0984768907563025) 50%, rgba(31,29,33,0.7455357142857143) 100%);
    width: 40%;
    height: 80%;
  }
  100% {
    background: rgb(31,29,33);
    background: radial-gradient(circle, rgba(31,29,33,0) 0%, rgba(31,29,33,0) 50%, rgba(31,29,33,0) 100%);
    width: 200%;
    height: 200%;
  }
}
.disclosure{
  font-style: italic;
  color: #a7a7a7;
  border-bottom: 1px solid;
}
.info-icon{
  position: fixed;
  right: 20px;
  bottom: 50px;
  box-shadow: 0 0 5px 0;
  border-radius: 50%;
  z-index: 10;
}
.info-icon:hover{
  right: 40px;
  animation: 2s infinite_shadow infinite;
  -webkit-animation: 2s infinite_shadow infinite;
  -moz-animation: 2s infinite_shadow infinite;
}
@keyframes infinite_shadow {
0% {box-shadow: 0 0 5px 0;  transform: rotate(0deg) scale(1);}
50% {box-shadow: 0 0 15px 0; transform: rotate(359deg) scale(1.5);}
100% {box-shadow: 0 0 5px 0; transform: rotate(0deg) scale(1);}
}
.disclosure-info{
  position: fixed;
  background: #0000002b;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;
}
.about-info{
  position: absolute;
  background: #1e092c;
  border: 3px solid #fff;
  border-radius: 20px;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  color: #fff;
  box-shadow: 0 0 10px 0;
  z-index: 900;
}
.close-disc-btn{
  color: #fff;
  position: absolute;
  top: -15px;
  right: 0;
  background: #c95f17;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.close-disc-btn:hover{
  color: #fff !important;
}
.hidden{
  display: none;
}
/* General Styling Ends Here*/

/* Header Styling Starts Here*/
.mtv-header{
  position: fixed;
  z-index: 999;
}
.mode-toggler.desktop{
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
}
.mode-toggler.mobile{
  display: none;
}
.toggler-btn{
  width: 110px;
  height: 40px;
  display: block;
  background: #EDEDED;
  border-radius: 50px;
  position: relative;
}
.toggler-ellipsis{
  display: block;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  right: 0;
}
.light-mode{
  box-shadow: -4px 0 5px 0 #0000003d;
  right: 0;
}
.dark-mode{
  background: #6600B0;
  left: 0;
  box-shadow: 4px 0 5px 0 #0000003d;
}
.mode-toggler > span{
  width: 90px;
}
.logo a{
  display: block;
}
.logo img{
  width: 45%;
  height: auto;
}
.top-header-menu.desktop{
  display: flex;
  align-items: center;
  gap: 20px;
}
.top-menu.mobile{
  display: none;
}
.top-header-menu > a:last-child img{
  margin-top: -5px;
}
.top-header-menu a{
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.top-header-menu a.active{
  border-bottom: solid;
  border-width: 1px;
  border-image: linear-gradient(to right, #ffffff26 0%, #fff 50%, #ffffff26 100%) 1;
}
.top-header-menu a:hover:not(:last-child){
  border-bottom: solid;
  border-width: 1px;
  border-image: linear-gradient(to right, #ffffff26 0%, #fff 50%, #ffffff26 100%) 1;
}
.top-header-menu a:last-child:hover, .top-header-menu a:last-child.active{
  border-bottom: solid;
  border-width: 1px;
  border-image: linear-gradient(to right, #ffffff26 0%, #ffffff26 25%, #f00 50%, #ffffff26 100%) 1;
}
/* Header Styling Ends Here*/

/* Main Body Styling Starts Here*/
.mtv-main-body{
  padding-top: 86px;
  padding-bottom: 40px;
}
.mtv-main-body > div.row{
  height: calc(100vh - 120px);
}
.mtv-main-body > div.row > div:nth-child(2){
  overflow: auto;
  height: 100%;
}
/* Main Body Styling Ends Here*/

/* Sidebar Styling Starts Here*/
.sidebar-items{
  overflow-y: auto;
  display: grid;
  grid-gap: 20px;
  height: calc(100vh - 200px);
  margin-top: 20px;
}
.sidebar-items > a:hover{
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: solid;
  border-width: 1px;
  border-image: linear-gradient(to right, #ffffff26 0%, #fff 50%, #ffffff26 100%) 1;
}
.sidebar-items > a > div{
  display: flex;
  align-items: center;
  gap: 20px;
}
.sidebar-items img{
  border-radius: 20px;
}
.sidebar-items h4{
  font-size: 30px;
  color: #fff;
  margin: 0;
}
.sidebar-menu h3{
  color: #fff;
}
.sidebar-items::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}
.sidebar-items::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow: none;
  background: #f2721c;
}
.sidebar-items::-webkit-scrollbar-track{
  background: #2125293b;
}
.movies-container{
  flex-wrap: wrap;
  justify-content: stretch;
  align-items: start;
  gap: 20px;
  padding-bottom: 6rem !important;
}
.movie-item-container{
  flex: 1 0 30%;
  max-width: 30%;
  text-align: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transition: all 0.3s linear;
}
.movie-item-container:hover{
  transform: scale(1.02);
  box-shadow: 0 0 6px 0 #1c002e54;
}
.movie-item-container a{
  color: #fff;
}
.movie-img{
  height: 200px;
  overflow: hidden;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.movie-img img{
  width: 100%;
  height: auto;
}
.movie-title h3{
  font-size: 20px;
}
.movie-desc{
  overflow: hidden;
  height: auto;
}
.movie-desc p{
  margin-bottom: 0;
}
.read-more-btn{
  font-style: italic;
}
.movie-item-container:hover .read-more-btn{
  animation: 3s infinite_hop infinite;
  -webkit-animation: 3s infinite_hop infinite;
  -moz-animation: 3s infinite_hop infinite;
}
@keyframes infinite_hop {
  0% {opacity: 0.3; transform: scale(1);}
  50% {opacity: 1; transform: scale(1.1);}
  100% {opacity: 0.3; transform: scale(0.7);}
}
.movie-reviews{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
 .movie-item-reviews{
  display: flex;
  align-items: baseline;
  justify-content: start;
  gap: 10px;
  margin-top: 10px;
}
.movie-reviews span, .movie-item-reviews span{
  font-weight: 600;
}
.movie-reviews > span > span, .movie-item-reviews > span > span{
  font-weight: 400 !important;
}
.active-genre{
  background: linear-gradient(to right, #ffffff78, transparent);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
/* Sidebar Styling Ends Here*/

/* Footer Styling Starts Here*/
.mtv-footer{
  position: fixed;
  bottom: 0;
}
.mtv-footer span{
  width: 100%;
  display: block;
  text-align: right;
}
/* Footer Styling Ends Here*/

/* Single Movie Styling Starts Here*/
.single-movie-item-container{
  gap: 20px;
}
.movie-item-img img{
  width: auto;
}
.movie-tagline{
  border-left: 4px solid #f2721c;
  padding-left: 10px;
  font-size: 20px;
  font-style: italic;
  margin-bottom: 20px;
  display: block;
}
.movie-item-reviews .fw-bold{
  font-weight: 600 !important;
}
/* Single Movie Styling Ends Here*/


/****************************/
/****** MEDIA QUERIES ******/
/****************************/


@media screen and (max-width: 1200px){
  .toggler-btn {
    width: 80px;
    height: 40px;
  }
  .top-header-menu a {
    font-size: 16px;
  }
  .sidebar-items h4 {
    font-size: 20px;
  }
}

@media screen and (max-width: 992px){
  .about-info{
    width: 80%;
  }
  .single-movie-item-container{
    flex-wrap: wrap;
  }
  .mobile-burger-menu{
    color: #fff;
  }
  .top-header-menu.desktop, .logo{
    display: none;
  }
  .top-menu.mobile{
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .close-btn{
    color: #fff;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 30px;
    font-weight: 600;
  }
  .mode-toggler.mobile{
    display: flex;
    align-items: center;
    gap: 20px;
    color: #fff;
  }
  .mode-toggler.desktop{
    display: none;
  }
  .offboard-menu{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
    padding: 0 20px;
  }
  .offboard-menu.hidden-menu{
    display: none;
  }
  .offboard-menu.reveal-menu{
    animation: 0.5s offboard_menu linear;
    -webkit-animation: 0.5s offboard_menu linear;
    -moz-animation: 0.5s offboard_menu linear;
  }
  @keyframes offboard_menu {
    0% {top: 100%;}
    100% {top: 0;}
  }
  .main-mob-menu{
    display: grid;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: solid;
    border-width: 1px;
    border-image: linear-gradient(to right, #ffffff26 0%, #fff 50%, #ffffff26 100%);
  }
  .main-mob-menu a{
    color: #fff;
    font-weight: 600;
  }
  .movie-item-container {
    flex: 1 0 100%;
    max-width: 100%;
  }

  @keyframes pop_toggler_light {
    0% {background: #ffffffff;}
    25% {
      background: rgb(31,29,33);
      background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.42620798319327735) 50%, rgba(255,255,255,0) 100%);
    }
    50% {
      background: rgb(255,255,255);
      background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0984768907563025) 50%, rgba(255,255,255,0.7455357142857143) 100%);
      width: 100% !important;
      height: 60% !important;
    }
    100% {
      background: rgb(255,255,255);
      background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
      width: 200%;
      height: 200%;
    }
  }
  @keyframes pop_toggler_dark {
    0% {background: #00000000;}
    25% {
      background: rgb(31,29,33);
      background: radial-gradient(circle, rgba(31,29,33,1) 0%, rgba(31,29,33,0.42620798319327735) 50%, rgba(31,29,33,0) 100%);
    }
    50% {
      background: rgb(31,29,33);
      background: radial-gradient(circle, rgba(31,29,33,0) 0%, rgba(31,29,33,0.0984768907563025) 50%, rgba(31,29,33,0.7455357142857143) 100%);
      width: 100% !important;
      height: 60% !important;
    }
    100% {
      background: rgb(31,29,33);
      background: radial-gradient(circle, rgba(31,29,33,0) 0%, rgba(31,29,33,0) 50%, rgba(31,29,33,0) 100%);
      width: 200%;
      height: 200%;
    }
  }

}