/* ---STYLESHEET FOR THE WEBSITE---
and notes - Submitting today! Yay! :) ...no time for fancy animated buttons...
April 19th - changed from adobe fonts to google fonts because adobe does not work unless the user has adobe and those specific fonts installed! very annoying... created media queries for smaller screens. validated code and cleaned up parse errors. optimized images and added attributions to the images in comments. finished up resonponsive design. got the parallax working - more like an animation but it works fine. Added in Terms and Privacy pages - recycled most of the text for this from previous website.
April 18th - adjusting styles on pages. completed accordian content. amended image sizes for parallax and logo. added gallery. 
April 15th - added GSAP CDN to all pages. app.js created.
April 14th - added all pages. Set active links for most - still need to add for contact, privacy, gallery, and terms. Accordian added to FAQ's. Testmimonial slider added to membership page. 
April 9th - added in social media icons. Work more on parallax. 
April 8th - working on parallax and finishing up styling of elements on main page, including footer. Must create social media icons. 
April 2nd - Fixed the logo. Hero images are completed. Consider adding a static screen gif to the TV image.
March 30th - Finished getting some of the basics done. Need to fix the favicon and the logo needs some colour alterations. Will work on tonight. Hero images for parralax should be done in the next few days. CREATE NEW VERSION FOR NEXT ITERATION */

body {
    font-family: "Space Mono", monospace, sans-serif;
    font-size: 1.5rem;
    text-align: center;
    background-color: #807979;
    width: 100%;
    height: auto;
}

/* hero image styles - parallax - more of an animation but it works */

    
.parallax {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #807979;
    height: 50vh;
    overflow: hidden;
    z-index: -10;   
}


.couch {
    position: absolute;
    top: 0;
    z-index: -1;  
}

.creepy-tv {
    display: grid;
    position: relative;
    z-index: -2;
}
 

/* header styles for navigation bar */

.bg-dark {
    background: -moz-linear-gradient(0deg, rgba(23,23,23,1) 0%, rgba(128,121,121,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(23,23,23,1) 0%, rgba(128,121,121,1) 100%);
    background: linear-gradient(0deg, rgba(23,23,23,1) 0%, rgba(128,121,121,1) 100%);
}

.parallax-nav {
    display: flex;
    justify-content: space-between;
}
.navbar-dark .navbar-nav .nav-link {
    display: inline-flex;
    color: #8cc63f;
    font-size: 3rem;
    gap: 2rem;
    background-color: transparent;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 2rem;
    padding-left: 0.5rem;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #1c618c;
}
a.active,
li.nav-item.active > a {
    background-image: url("../images/blood-splatter-100x197.webp");
    background-repeat: no-repeat;
    background-size: auto;
    color: white;
}



/* main content styles for home page and others */

.button-positioning {
    padding-top: 3%;
}

.btn-primary {
    color: #8cc63f;
    background-color: #1c618c;
    border-color: #8cc63f;

}

.btn {
    font-size: 2.5rem;
    line-height: 1.5;
    border-radius: 10px;
}

.btn-primary:hover {
    background-color: #8cc63f;
    color: #f4f4f4;
    border: #1c618c 2px dashed;
}

.h1, h1 {
    font-family: "Space Mono", monospace, sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #171717;
}


.h2, h2 {
    font-family: "Nosifer", sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #730202;
}

.h3, h3 {
    font-family: "Eater", serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: #171717;
}

.col-auto {
    background: #f4f4f4;
    padding: 10%;
}

.align-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2%;
}

.align-img > h3 {
    padding-top: 3rem;
}

.align-img > h1 {
    text-align: left;
    padding-left: 2rem; 
}

.align-img > img {
    border: solid black 5px;
    border-radius: 15px;
}
/* carousel styles on membership page */
.carousel {
    padding-top: 2rem;
    height: 500px;
    width: 500px;
    margin: auto;
}

.carousel-indicators {
    top: 96%;
}

.carousel-inner,
.carousel-item > img {
    border-radius: 50px;
}

.carousel-item > img {
    opacity: 60%;
}
.carousel-caption {
    font-family: "Space Mono", monospace, sans-serif;
    font-size: 1.25rem;
    text-shadow: #171717 1px 1px;
}

.carousel-caption > h5 {
    font-family: "Creepster", serif;
    color: #8cc63f;
    font-size: 2rem;
}

/* accordian styles on faq page */


.btn-link {
    font-size: 3rem;
    color: #1c618c;
}
.btn-link:hover {
    color: #8cc63f;
    text-decoration: none;
}

.btn:focus {
    box-shadow: none;
}

.mb-0 {
    font-family: "Creepster", serif;
}
/* image lightbox styles on gallery page */

.container.gallery-container {
    background-color: #fff;
    color: #35373a;
    min-height: 100vh;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

.gallery-container h1 {
    text-align: center;
    margin-top: 70px;
    font-weight: bold;
}

.gallery-container p.page-description {
    text-align: center;
    max-width: 800px;
    margin: 25px auto;
    color: #888;
    font-size: 18px;
}

.tz-gallery {
    padding: 40px;
}

.tz-gallery .lightbox img {
    width: 100%;
    margin-bottom: 30px;
    transition: 0.2s ease-in-out;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}


.tz-gallery .lightbox img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.tz-gallery img {
    border-radius: 4px;
}

.baguetteBox-button {
    background-color: transparent !important;
}

/* movie card styles on movies page */
.card {
    width: auto;
}
.card-title {
    font-family: "Creepster", serif;
    font-size: 2rem;
    color: #8cc63f;
}

.card > img {
    border-radius: 20px;
}

.card-header,
.card {
    border: none;
    background: #f4f4f4;
}

.card-body {
    font-family: "Space Mono", monospace, sans-serif;
    font-size: 2rem;
    color: #36454F;
}

.card-text {
    font-family: "Space Mono", monospace, sans-serif;
    font-size: 1.5rem;
    color: #36454F;
}


/* footer styles */
.footer-content {
    color: black;
    padding-top: 5%;
    
}

.social-media {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    padding-top: 5%;
    padding-left: 5%;
}


footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../images/thumbnail_film-strip-footer.png");
    background-size:auto;
    background-repeat: no-repeat;
    background-clip: border-box;
    width: 100%;
    height: 590px;
    padding-bottom: 2%;
    background-color: #807979;
    
}

footer > .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.social-media > p > a:hover {
    filter: drop-shadow(16px 16px 20px rgb(154, 219, 116)) contrast(200%);
}

.middle > p {
    font-family: "Space Mono", monospace, sans-serif;
    font-size: large;
}

a:not([href]):not([class]) {
    color: #8cc63f;
    font-size: 2rem;
    cursor: pointer;
}

a:not([href]):not([class]):hover {
    color: #1c618c;
}

a {
    color: #8cc63f;
    font-family: "Creepster", system-ui, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
}

a:hover {
    color: #1c618c;
    text-decoration: none;
}
.right-side {
    padding-top: 10%;
    padding-right: 25%;

}


/* media queries */
@media screen and (min-width: 0px) and (max-width: 600px) {

    .carousel-indicators {
        top: 24%;
    }

    .carousel-control-next, .carousel-control-prev {
        bottom: 475px;
    }

    .carousel-caption {
        font-size: 0.2rem;
        bottom: 0;
        right: 2%;
        left: 2%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar {
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    .navbar-brand > img {
        max-width: 80%;
        max-height: 80%;
    }
    .middle > p {
        font-size: medium;
    }
    a {
        font-size: 1.5rem;
    }
    footer {
        height: 150vh;
        background-size: cover;
    }

    .card-title {
        font-size: 6px;
    }
    
    .card-text {
        font-size: 0.9rem;
    }

    .right-side {
        display: inline-flex;
        flex-direction: row;
        padding: 0;
    }

    .right-side > p > a {
        padding-right: 2rem;
    }
}

@media only screen and (max-width: 600px) {
    .carousel {
        height: 70%;
        width: 70%;
    }

    .carousel-caption {
        font-size: 0.8rem;
    }
    .navbar {
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    .navbar-brand > img {
        max-width: 80%;
        max-height: 80%;
    }
    .social-media > p > a:hover {
        filter: drop-shadow(8px 8px 10px rgb(154, 219, 116)) contrast(200%);
    }
    .middle > p {
        font-size: medium;
    }
    a {
        font-size: 1.5rem;
    }
    footer {
        height: 800px;
        background-size: cover;
    }

    .card-title {
        font-size: 1.5rem;
    }
    
    .card-text {
        font-size: 1rem;
    }

    .right-side {
        display: inline-flex;
        flex-direction: row;
        padding: 0;
    }

    .right-side > p > a {
        padding-right: 2rem;
    }
}

@media screen and (min-width: 601px) and (max-width: 991px) {
    .navbar {
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    
    .carousel {
        height: 400px;
        width: 400px;
    }

    .carousel-caption {
        font-size: 1rem;
    }


    footer {
        height: 125vh;
        background-size: cover;
    }

    .footer-content {
        max-width: 90%;
        max-height: 90%;
        padding-top: 2%;
    }

    .card-title {
        font-size: 1.5rem;
    }
    
    .card-text {
        font-size: 1rem;
    }

    .right-side {
        display: inline-flex;
        flex-direction: row;
        padding: 0;
    }

    .right-side > p > a {
        padding-right: 2rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
   .parallax-nav {
        display: block; 
    }
    .navbar-dark .navbar-nav .nav-link {
        font-size: 2rem;
    }
    .ml-auto {
        margin: auto;
    }
}



/* colour schemes for the website

grey: #807979
green: #8cc63f
red: #730202
blue: #1c618c
black: #171717

*/
/* font styles for website 

.space-mono-regular {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
  }
  
  .space-mono-bold {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: normal;
  }
  
  .space-mono-regular-italic {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: italic;
  }
  
  .space-mono-bold-italic {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: italic;
  }
  
  .nosifer-regular {
    font-family: "Nosifer", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .creepster-regular {
    font-family: "Creepster", system-ui;
    font-weight: 400;
    font-style: normal;
  }

  .eater-regular {
    font-family: "Eater", serif;
    font-weight: 400;
    font-style: normal;
    }
    */