/*
 * BASIC
 */
* {
    font-family: 'Anek Telugu', sans-serif;
    color: #9fadbd;
}
html {
    font-size: 62.5%;
    background-color: #11161d;
}
body {
    background-color: #0b1622;
    font-size: 1.6rem;
    margin: 0;
}
.app {
    margin: 0 auto;
    display: grid;
    gap: 40px;
    min-height: calc(100vh + 10px);
    grid-template-columns: auto 330px 830px auto;
}
.about-me {
    grid-template-areas:
    "topNav topNav topNav topNav"
    "header header header header"
    "... breadcrumb breadcrumb ..."
    "... main aside ..."
    "footer footer footer footer";
    grid-template-columns: auto 830px 330px auto;
    grid-auto-rows: 70px 500px 50px auto auto;
}
.film-input  {
    grid-template-areas:
    "topNav topNav topNav"
    "header header header"
    "... breadcrumb ..."
    "... main ..."
    "footer footer footer";
    grid-auto-rows: 70px 500px 50px auto auto;
    grid-template-columns: auto 1200px;
}
.actor-detail {
    grid-template-areas:
    "topNav topNav topNav topNav"
    "header header header header"
    "... breadcrumb breadcrumb ..."
    "... main aside ..."
    "... container container ..."
    "footer footer footer footer";
    grid-template-columns: auto 830px 330px auto;
    grid-auto-rows: 70px 420px 50px auto auto auto;
}
.movie-details {
    grid-template-areas:
    "topNav topNav topNav topNav"
    "header header header header"
    "... breadcrumb breadcrumb ..."
    "... aside main ..."
    "... container container ..."
    "... review review ..."
    "... reviews reviews ..."
    "footer footer footer footer";
    grid-auto-rows: 70px 500px 50px auto auto auto auto;
}
.home{
    grid-template-areas:
    "topNav topNav topNav"
    "... header ..."
    "... main ..."
    "footer footer footer ";
    grid-template-columns: auto 1200px auto;
    grid-auto-rows: 70px auto auto;
}
h1 {
    font-size: 1.9rem;
}
aside .wrap, main .wrap, .container, section .wrap{
    padding: 40px;
    background-color: #151f2e;
    border-radius: 5px;
}
.TopNav {
    grid-area: topNav;
    background-color: #2B2D42;
    height: 70px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.TopNav a:first-of-type {
    margin-left: 0;
}
.TopNav a {
    width: auto;
    margin-left: 40px;
    color: #CDCFED ;
}
.TopNav a:hover {
    color: white;
}
header {
    max-width: 100vw;
    grid-area: header;
    height: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -40px;
}
.breadcrumb {
    grid-area: breadcrumb;
    background-color: #2B2D42;
    border-radius: 5px;

}
.breadcrumb ol {
    display: flex;
    align-items: center;
    list-style-type: none;
    gap: 10px;
    margin-bottom: auto;
    margin-top: auto;
    padding: 0 0 0 10px;
    height: 100%;
}
.breadcrumb ol li{
    align-self: center;
}
.breadcrumb ol li:before {
    content: "/ ";
}
.breadcrumb ol li:nth-child(1):before {
    content: "";
}
.breadcrumb a{
    color: #007bff;
}
aside {
    grid-area: aside;
}
main {
    grid-area: main;
}
section {
    grid-area: review;
}
.container {
    grid-area: container;
    padding: 40px;
}
footer {
    background-color: #11161d;
    width: 100%;
    min-height: 100px;
    grid-area: footer;
}
footer .wrap {
    width: 1200px;
    margin: 40px auto 0;
    padding-left: 40px;
}
aside ul {
    list-style-type: none;
    padding: 0;
}
aside li:nth-child(even) {
    padding-left: 20px;
}
aside li:nth-child(odd) {
    font-weight: bold;
}
/*
 * STANDARD
 */
a {
    text-decoration: none;
    color: #007bff;
}
a:hover {
    color: #007bff;
}
.svg{
    fill: red;
}
.danger {
    background-color: red;
}
button{
    background-color: #3db4f2;
    border: none;
    border-radius: 2px;
    text-align: center;
    padding: 10px;
    color: white;
}
button > *, button{
    color: white!important;
}
.img-cropper {
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-radius: 50%;
}
.img-cropper img {
    display: block;
    height: 100%;
    width: auto;
}
.hide {
    display: none;
}
/*
 * FORM
 */
.cast {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    text-align: center;
    width: 150px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 5px;
    box-sizing: border-box;
}
.card a {
    gap: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100%;
}
.card img{
    width: 150px;
    height: 225px;
    border-radius: 5px 5px 0 0;
}
.card-name {
    font-weight: bold;
    padding: 0 10px;
}
form ul {
    list-style-type: none;
    padding: 0;
}
form li {
    margin-top: 40px;
}
form li > div {
    border: #9fadbd 2px solid;
    border-radius: 10px;
}
form label {
    position: absolute;
    margin: -10px 0 0 15px;
    background-color: #151f2e;
    padding: 0 5px;
}
form input, form textarea{
    all: unset;
    background-color: transparent;
    padding: 15px 10px;
    width: 100%;
    box-sizing: border-box;
    color: #9fadbd;
    margin: 0;
    height: 100%;
}
form input::placeholder, form textarea::placeholder {
    color: #9fadbd;
}
input, textarea {
    color: black;
}
.submit {
    text-align: right;
}
.btn:hover, button:hover, .btn-rating, input[type="date"]{
    cursor: pointer;
}
/*
 * HOME
 */
.home .wrap {
    margin-top: 40px;
}
section .wrap:nth-child(1), main .wrap:nth-child(1){
    margin-top: 0;
}
.home header {
    margin-top: 0;
}
.movie-carousel {
    padding: 0;
    position: relative;
    width: 100%;
    height: 300px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    overflow: hidden;
    border-radius: 15px;
}
.movie-carousel > div {
    position: absolute;
}
.slide {
    width: 100%;
    height: 300px;
    position: absolute;
    transition: all 0.5s;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.movie-carousel .btn {
    position: absolute;
    width: 40px;
    height: 40px;
    padding: 10px;
    border: none;
    border-radius: 50%;
    z-index: 10;
    background-color: #3DB4F2;
    font-size: 18px;
    color: #FFFFFF;
}
.movie-carousel .btn:active {
    transform: scale(1.1);
}
.movie-carousel .btn-prev {
    top: 45%;
    left: 2%;
}
.movie-carousel .btn-next {
    top: 45%;
    right: 2%;
}
.movie {
    display: flex;
    column-gap: 40px;
    justify-content: center;
}
/*
 * MOVIE DETAILS
 */
.movie-details main .wrap {
    min-height: 208px;
}
.movie-details section form {
    width: 800px;
    padding: 20px;
    margin: 0 auto;
}
.movie-details div.reviews{
    width: 75%;
}
.movie-details aside ul {
    list-style-type: none;
    padding: 0;
}
.movie-details aside li:nth-child(even) {
    padding-left: 20px;
}
.movie-details path {
    fill: white;
}
.movie-details .reviews {
    margin: auto;
    grid-area: reviews;
}
.movie-details .review {
    padding: 40px;
    background-color: rgba(0,0,0,0.1);
    margin-top: 40px;
}
.movie-details .type {
    font-weight: bold;
}
.movie-details .rating-container {
    margin: 20px 0 10px 10px;
}
/*
 * ABOUT ME
 */
.cel-2 {
     display: flex;
    column-gap: 20px;
}
.cel-2 div {
   width: 100%;
}
/*
 * FILM INPUT
 */
.film-input .actors {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 10px;
    column-gap: 10px;
    align-items: stretch;
}
.film-input .actors-result .actor{
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    margin: 20px;
    background-color: #0b1622;
    box-sizing: border-box;
}
.film-input .actors-result .actor:hover {
    cursor: pointer;
}
.film-input .actors-result .actor .actor-name{
    padding: 20px;
    justify-self: flex-end;
}
.film-input .actors .actor  {
    width: 100px;
    border-radius: 0;
    border: 0;
    text-align: center;
}
.film-input .actors .actor, .slide {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.film-input .actors .actor-name {
    padding: 5px 0;
    background-color: #0b1622;
    display: block;
}
.film-input .actor img {
    width: 100px;
    display: block;
}