:root {
    --primary: rgb(104, 164, 237);
    --second: rgb(200, 222, 249);
    --third: rgb(46, 72, 105);
    --forth: rgb(25, 95, 181);
    --fifth: rgb(100, 227, 129);
    --primary-dark: rgb(36, 42, 49);
    --dark-light-10: #3a3f46;
    --dark-light-20: #50555a;
    --dark-light-30: #666a6f;
    --dark-light-40: #7c7f83;
    --dark-darker-10: #20262c;
    --dark-darker-20: #1d2227;
    --dark-darker-30: #191d22;
    --dark-darker-40: #171a1f;
}

body {
    background: var(--dark-darker-20) no-repeat center center fixed;
    background-image: linear-gradient(0deg, rgba(36, 42, 49, 1) 0%, rgba(25,29,34,1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
}



/* -------------------------------------------------------- */
/* Header Styling Start */
/* -------------------------------------------------------- */

header {
    background-color: var(--dark-darker-40);
    position: sticky;
    z-index: 1040;
    top: 0;
    opacity:.95;
}

header h1 {
    color: var(--fifth);
    font-family: 'Bungee', cursive;
    margin-bottom: 0;
}

header h1 a {
    color: var(--fifth);
    font-family: 'Bungee', cursive;
}

header span {
    /* background-color: var(--third); */
    font-size: 35px;
    text-align: center;
    border-radius: .2rem;
}

header span:hover {
    cursor: pointer;
    /* background-color: var(--forth); */
}

.header-bg {
    background-color: var(--primary-dark);
    padding: .5rem .75rem;
    border-radius:.2rem;
}

.header-title a:hover {
    text-decoration: none;
    color: inherit;
}

.page-header {
    border-bottom: solid 3px var(--fifth);
    color: var(--primary);
    font-family: 'Bungee', cursive;
    
}
.navbar-dark .navbar-nav .nav-link {
    color: var(--primary);
}
/* //////////////////////////////////////////////////////// */
  


/* -------------------------------------------------------- */
/* Modal Styling Start */
/* -------------------------------------------------------- */
#theater-near-me:hover { 
    cursor: pointer;
    text-decoration: underline;
}

#theater-list li {
    list-style: none;
}

.modal-header {
    border-color: var(--dark-darker-10);
}
.modal-close {
    color: var(--fifth);
    text-shadow:none;
    
}
.modal-footer {
    border-color: var(--dark-darker-10);
}

.modal-title {
    color: var(--fifth);
}

.modal h6{
    color: var(--primary)
}

#modal-content-img {
    box-shadow: 0 7px 12px var(--dark-darker-10);
}
/* //////////////////////////////////////////////////////// */


/* -------------------------------------------------------- */
/* Rendered Content Card Styling Start */
/* -------------------------------------------------------- */
.card:hover {
    cursor: pointer;
    box-shadow: 7px 10px 10px #111418;
    transform: scale(1.01);
}
.horz-cont {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.cus-card-width {
    width: calc(225px + 3vw);
    /* width: 25%; */
}

.film-card{
   flex: 0 0 auto;
}
/* //////////////////////////////////////////////////////// */


/* -------------------------------------------------------- */
/* Custom Scrollbar Styling Start */
/* -------------------------------------------------------- */
::-webkit-scrollbar {
    height: .5em;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(56, 56, 56);
    border-radius: 1em;
}

::-webkit-scrollbar-thumb {
    background: rgb(22, 22, 22);
    border-radius: 1em;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(14, 14, 14);
}
/* //////////////////////////////////////////////////////// */

/* -------------------------------------------------------- */
/* Button Styling Start */
/* -------------------------------------------------------- */
.btn-primary {
    background-color: var(--fifth);
    color: black;
    border-color:#50b667;
}
.btn-primary:hover {
    background-color: #4ee455;
    color: black;
    border-color:#327241;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: #4ee455;
    color: black;
    border-color:#327241;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(50, 114, 65,.5);
}

.btn-primary.focus, .btn-primary:focus {
    box-shadow: 0 0 0 .2rem rgba(50, 114, 65,.5);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: black;
    background-color: var(--fifth);
    border-color: #327241;
}

.list-group-item {
    background-color: var(--primary-dark);
    color: var(--dark-light-40);
    border: 1px solid rgba(0,0,0,.125);
}

.list-group-item:hover {
    cursor:pointer;
}

.list-group-item-action:focus, .list-group-item-action:hover {
    color: #f8f9fa;
    text-decoration: none;
    background-color: var(--dark-light-10);
}

.list-group-item.active {
    z-index: 2;
    color: black;
    background-color: var(--fifth);
    border-color: #327241;
}

#load-more{
    margin-bottom:.5em;
}
/* //////////////////////////////////////////////////////// */

/* -------------------------------------------------------- */
/* Footer Styling Start */
/* -------------------------------------------------------- */
footer {
    background-color: var(--dark-darker-40);
    color:var(--primary);
}

img.resize {
    max-width:10%;
    max-height:10%;
  }
  footer h3 {
      color: var(--primary)
  }
/* //////////////////////////////////////////////////////// */

/* -------------------------------------------------------- */
/* Search Bar Styling Start */
/* -------------------------------------------------------- */
.form-control {
    background-color: var(--primary-dark);
    border-color: var(--dark-light-10) 
}

.form-control:focus {
    color: #f8f9fa;
    background-color: var(--primary-dark);
    border-color: var(--dark-light-10);
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--dark-darker-10);
}


/* //////////////////////////////////////////////////////// */

/* -------------------------------------------------------- */
/* Media Queries Start */
/* -------------------------------------------------------- */
@media screen and (max-width:1000px) {
    .horz-cont{
        flex-wrap:wrap;
        justify-content: space-around;
    }
    .media-hide{
        display: none;
    }
    .film-card{
        flex: 0 0 40%;
      
     }

    .page-header {
        text-align: center;
    }
}
@media screen and (max-width:768px) {
    .horz-cont{
        flex-wrap:wrap;
        justify-content: space-around;
    }
    .media-hide{
        display: none;
    }
    .film-card{
        flex: 1 1 100%;
     }
    #modal-content-img {
       padding: 0 15%;
       box-shadow: none;
    }

    img.resize {
        max-width:25%;
        min-width: 90px;
        max-height:25%;
      }
    
}