@import url('https://fonts.googleapis.com/css2?family=Dosis&family=Monoton&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");



/* ---------------------------------------------------------------- */
/* Global CSS */

/* Spacing */
.full-height{
    height: 100vh;
}
/* fonts */

/* set all large headings to display font */
h1{
    font-family: 'Monoton', cursive;
    color: #F18442;
}


h2,h3,h4,h5,h6,p,a{
    font-family: 'Dosis', sans-serif;
    color: white;
}

/* set page background colour to dark color */
body{
    background-color: #2b2b2b;
}

/* set text on page to white */
label, .form-text, p{
    color: white;
}

.form-text{
    color: red;
}




/*============================================================================================= */
/* Media Queries Splash Screen*/
@media(min-width: 300px){

    h1{
        font-size: 16px;
    }

    /* fixing nav bar colours */
    .navbar-toggler{
        color: white;
        background-color: #F18442;
    }

    /* splash screen */
    /* -------------------------- */

    .splash-logo{
        width: 40%;
        height: auto;
    }

    /* ------------------------------------ */
    /* sign up/login screen */

    /* logo section */
    .logLogo{
        width: 40%;
        height: auto;
    }
    .signup-header{
        font-size: 24px;
    }
    /* form con */
    .form-con{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
        /* logo wall */
        .logo-wall{
            display: none;
        }

    /* -------------------------- */

    /* sign up/login screen */

    /* logo section */
    .logLogo{
        width: 0%;
    }
    .signup-header{
        font-size: 26px;
    }
    /* logo wall */
    .logo-wall{
        width: 35%;
        height: auto;
        display: flex;
    }

}

@media(min-width:768px){
    h1{
        font-size: 22px;
    }


    /* splash screen */
    /* -------------------------- */
    .splash-logo{
        width: 25%;
        height: auto;
    }

    .button-log{
        width: 80%;
        margin-left: 10%;
    }

    /* -------------------------- */
    /* sign up page */
    /* logo wall */
    .logo-wall{
        width: 35%;
        height: auto;
        display: flex;
    }
    .signup-header{
        font-size: 32px;
    }
     
}


@media(min-width:991px){
    /* Splash screen */
    .splash-logo{
        width: 20%;
        height: auto;
    }


    /* ------------------------------------ */
    /* sign up/login screen */

    /* logo section */
    .logLogo{
        width: 20%;
        height: auto;
    }
    .signup-header{
        font-size: 40px;
    }

    /* form con */
    .form-con{
        display: block;
    }
    .signup-form{
        width: 80%;
        margin-left: 10%;
        border: 2px solid #F18442;
        border-radius: 15px;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    /* logo wall */
    .logo-wall{
        display: none;
    }

    /* footer */
    footer .row{
        display: table;
        text-align: center;
    }
    .footer-socials{
        display: table-cell;
        text-align: center;
    }
    .footer-brand{
        display: table-cell;
        text-align: center;
    }
    .footer-api{
        display: table-cell;
        text-align: center;
    }

}


@media(min-width:1200px){
    h1{
        font-size: 36px;
    }

    
    /* splash screen */
    /* -------------------------- */
    .logo-con{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .splash-logo{
        width: 20%;
        height: auto;
    }

    .button-log{
        width: 70%;
        margin-left: 15%;
    }


    /* sign up / login section */
    .signup-header{
        font-size: 48px;
    }
    .signup-form{
        width: 80%;
        margin-left: 10%;
        border: 2px solid #F18442;
        border-radius: 15px;
        padding-left: 15%;
        padding-right: 15%;
        padding-top: 5%;
        padding-bottom: 5%;
    }

}





/* ============================================================================ */
/* Nav Bar */

/* change the background colour of the navbar as a whole and add the border to create distinction */
.navbar{
    background-color: #2b2b2b !important;
    border-bottom: 3px solid #F18442;
}

.logo_title{
    font-family: 'Monoton', cursive;
    color: #F18442;
    font-size: 24px;
    vertical-align: middle;
}

.active{
    color: #F18442 !important;
    font-weight: 800;
    border-bottom: 2px solid #F18442;
}

.nav-item{
    display: flex;
    align-self: center;
    width: 25vh;
}


.nav-link{
    color: white;
}


.nav-link:hover{
    color: #F18442 !important;
    font-weight: 800;
}

.navbar-nav{
    margin-left: 15%;
}

/* ============================================================================ */
/* Homepage */

/* Carousel */

/* Carousel Image */

.carousel-image{
    margin-top: -12vh;
    object-position: top;
    object-fit: cover;
    max-height: 95vh;
    width: 50vw;
}
/* Carousel Heading */
.carousel-heading{
    font-family: 'Monoton', sans-serif;
    text-align: center;
    color: coral;
}
.carousel-heading h1{
    font-size: 60px;
}

/* Carousel Text */
.carousel-text{
    font-family: 'Dosis', sans-serif, bold;
    text-align: center;
    color: white;
}
#orange{
    object-position: center !important;
}


.btn-primary{
    background-color: coral !important;
    color: rgb(0, 0, 0) !important;
    border-radius: 10px;
    width: 15rem;
    height: 3rem;
    font-family: 'Dosis', sans-serif;
    font-size: 22px;
}
.btn-primary:hover{
    cursor: pointer;
    background-color: rgb(255, 255, 255) !important;
    border: 3px solid coral !important;
}

/* Carousel Controls */
.carousel-control-prev, .carousel-control-next {

    left: 20%;
    top: 75%;
    right: auto;
    bottom: 20%;
    width: 3rem;
    height: 3rem;
    border: 3px solid #000000;
    background-color: #EBF4FC;
    border-radius: 50%
}

.carousel-control-next{
    left: 33%;
}

/* Media Queries for Carousel*/

@media(min-width: 300px){

    .carousel-heading h1{
     font-size: 30px;   
    }
    .carousel-text h4{
      font-size: 18px;  
    }

}
@media(min-width: 576px){
    .carousel-heading h1{
     font-size: 40px;   
    }
    .carousel-text h4{
        font-size: 20px; 
    }

}

@media(min-width: 768px){
    .carousel-heading h1{
     font-size: 50px;   
    }

    .carousel-image{
        margin-top: -15vh;
        object-position: top;
        object-fit: cover;
        max-height: 95vh;
        width: 50vw;
    }
}
@media(min-width: 991px){
    .carousel-heading h1{
     font-size: 60px;   
    }
    .carousel-text h4{
        font-size: 22px; 
    }

    .carousel-image{
        margin-top: -12vh;
        object-position: top;
        object-fit: cover;
        max-height: 95vh;
        width: 50vw;
    }
}
@media(min-width: 1200px){

    .carousel-text h4{
        font-size: 24px; 
    }

    .carousel-image{
        margin-top: -12vh;
        object-position: top;
        object-fit: cover;
        max-height: 95vh;
        width: 50vw;
    }
}

/* ============================================================================ */
/* Splash Screen */

.Welcome-splash, .Welcome-splash2{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.Welcome-splash h2{
    color: white;
}
.Welcome-splash2 h1{
    font-size: 32px;
}

.border-under-welcome{
    width: 70%;
    margin-left: 15%;
    border-radius: 5%;
    border-bottom: 1px solid white;
}

/* ============================================================================ */
/* Sign Up form */

/* override logo div display */
.logo-con,  .title-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Overriding bootstrap primary button style */
.btn-primary{
    width: 70%;
    margin-left: 15%;
    border-radius: 15px;
    background-color: #F18442;
    border: none;
}

/* Overriding bootstrap primary button style hover effect */
.btn-primary:hover{
    background-color: white;
    color: #F18442;
}

/* Cards */

/*============================================================================================= */

/* Media Queries */
@media(min-width: 300px){

    h1{
        font-size: 16px;
    }

/* Homepage */
.movie-card{
    width: 50%;
}

.row-con{
    height: 300vh;
    margin-bottom: 300vh;
}

.movie-col{
    height: 45%;
}

.lib-card{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.lib-body{
    height: 45%;
    align-items: flex-end;
    display: flex;
    justify-content: center;
}

.play-logo{
    width: 30%;
    margin-left: 33%;
    padding-top: 50%;
}

.overlay{
    width: 100%;    
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
}
.overlay:hover{
    cursor: pointer;
    opacity: 1;
}

    
    
        /* footer */
        .footer-socials{
            text-align: center;
        }
        .footer-brand{
            text-align: center;
        }
        .footer-api{
            text-align: center;
        }

}

/* 576px */
/* ------------------------------------------------------------------------------- */

@media(min-width:576px){

 .movie-card{
    width: 25%;
}

.row-con{
    height: 110vh;
    margin-bottom: 110vh;
}

.lib-card{
    width: 100%;
    height: 100%;
    background-image: url("../assets/Ao\ to\ Orenji.jpg");
    background-position: center;
    background-size: cover;
}

.lib-body{
    height: 45%;
    align-items: flex-end;
    display: flex;
    justify-content: center;
}

.play-logo{
    width: 30%;
    margin-left: 33%;
    padding-top: 50%;
}

.overlay{
    width: 100%;    
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
}
.overlay:hover{
    cursor: pointer;
    opacity: 1;
}


}

/* 768px */
/* ------------------------------------------------------------------------------- */

@media(min-width:768px){
    h1{
        font-size: 22px;
    }
     
 /* Homepage */
 .movie-card{
    width: 25%;
}

.row-con{
    height: 100vh;
}

.lib-card{
    width: 100%;
    height: 100%;
    background-image: url("../assets/Ao\ to\ Orenji.jpg");
    background-position: center;
    background-size: cover;
}

.lib-body{
    height: 45%;
    align-items: flex-end;
    display: flex;
    justify-content: center;
}

.play-logo{
    width: 30%;
    margin-left: 33%;
    padding-top: 50%;
}

.overlay{
    width: 100%;    
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
}
.overlay:hover{
    cursor: pointer;
    opacity: 1;
}

}

/* 991px */
/* ------------------------------------------------------------------------------- */

@media(min-width:991px){
 /* Homepage */
 .movie-card{
    width: 25%;
}

.row-con{
    height: 50vh;
    margin-bottom: 60vh;
}

.movie-col{
    height: 90%;
}

.lib-card{
    width: 100%;
    height: 100%;
    background-image: url("../assets/Ao\ to\ Orenji.jpg");
    background-position: center;
    background-size: cover;
}

.lib-body{
    height: 45%;
    align-items: flex-end;
    display: flex;
    justify-content: center;
}

.play-logo{
    width: 30%;
    margin-left: 33%;
    padding-top: 50%;
}

.overlay{
    width: 100%;    
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
}
.overlay:hover{
    cursor: pointer;
    opacity: 1;
}

.movie-title{
    font-size: 18px;
}

    /* footer */
    footer .row{
        display: table;
        text-align: center;
    }
    .footer-socials{
        display: table-cell;
        text-align: center;
    }
    .footer-brand{
        display: table-cell;
        text-align: center;
    }
    .footer-api{
        display: table-cell;
        text-align: center;
    }

}

/* 12000px */
/* ------------------------------------------------------------------------------- */

@media(min-width:1200px){
    h1{
        font-size: 36px;
    }

    /* Homepage */
    .movie-card{
        width: 25%;
    }

    .row-con{
        height: 60vh;
    }
    
    .movie-col{
        height: 90%;
    }

    .lib-card{
        width: 100%;
        height: 100%;
        background-image: url("../assets/Ao\ to\ Orenji.jpg");
        background-position: center;
        background-size: cover;
    }

    .lib-body{
        height: 35%;
        align-items: flex-end;
        display: flex;
        justify-content: center;
    }

    .play-logo{
        width: 30%;
        margin-left: 33%;
        padding-top: 50%;
    }

    .overlay{
        width: 100%;    
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        opacity: 0;
    }
    .overlay:hover{
        cursor: pointer;
        opacity: 1;
    }

}

/* ============================================================================ */
/* footer */
.footer-con{
    width: 100%;
    height: 30vh;
}

footer i {
    margin-left: 15px;
    margin-right: 15px  ;
}

.footer-api-img{
    margin-top: 7px;
}


/* ============================================================================ */
/* Single Movie Section */
.single-film-title{
    color: white;
}

.badge{
    vertical-align: top;
}

.info-circle{
    float: right;
}


.trailer-img{
    height: 80vh;
    width: 60%;
    background-image: url("../assets/Ao\ to\ Orenji.jpg");
    background-position: center;
    background-size: cover;
}
.play-trailer{
    width: 80px;
}

.video-player{
    width: 80%;
    height: 75vh;
}

.mini-poster{
    height: auto;
    width: 100%;
}
.filter-btn:hover, .filter-opt-con p:hover{
    cursor: pointer;
}


.add-icon{
    float: right;
    margin-top: -11%;
}

.add-icon:hover{
    cursor: pointer;
}

/* ============================================== */
/* about us */
.about-us {
    background-color: #f8f9fa;
    padding: 50px 0;
}


/* Media Queries for About Us*/

@media(min-width: 300px){

    .about-us h1{
     font-size: 22px;  
     text-align: center; 
    }
    .about-us p{
      font-size: 18px;  
      text-align: center;
      color: #333;
    }
    

}
@media(min-width: 576px){
    .about-us h1{
     font-size: 25px;  
     text-align: center; 
    }
    .about-us p{
        font-size: 20px; 
        text-align: center;
    }

}

@media(min-width: 768px){
    .about-us h1{
     font-size: 30px;   
     text-align: center;
    }
}
@media(min-width: 991px){
    .about-us h1{
     font-size: 35px;   
     text-align: center;
    }
    .about-us p{
        font-size: 22px; 
        text-align: center;
    }

}
@media(min-width: 1200px){

    .about-us p{
        font-size: 24px; 
        text-align: center;
    }
}