@import url('https://fonts.googleapis.com/css2?family=Hind+Mysuru:wght@300;400;500;600;700&display=swap');
::-webkit-scrollbar { display: none; }
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-size: 1rem;
  scroll-behavior: smooth;
  scroll-padding-top: 56px;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
}

body {
  box-sizing: border-box;
  font-family: sans-serif;
  line-height: 1;
  background-color: #DDD;
  color: #111;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
small {
  font-size: inherit;
  font-weight: normal;
  line-height: 1;
}

button,
input,
textarea,
a {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: none;
  text-decoration: none;
  outline: 0;
}

input, textarea{
  background-color: #DDD;
  color: #111;
}

button {
  cursor: pointer;
}

img,
svg {
  max-width: 100%;
  display: block;
  height: auto;
  object-fit: cover;
}

ul,
ol,
li {
  list-style: none;
}

.debug { border: solid 3px red; }

.images {
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
}

.svg-bord{filter: drop-shadow( 0 4px 2px currentColor )}

.col-160{columns: 160px;}
.col-240{columns: 240px;}
.col-320{columns: 320px;}
.col-unset{columns: unset}

.df { display: flex; }
.db { display: block; }
.di { display: inline; }
.dg { display: grid; }
.dib { display: inline-block; }
.dn { display: none; }

.abs { position: absolute; }
.fix { position: fixed; }
.static { position: static; }
.rel { position: relative; }

.zi-0 { z-index: 0; }
.zi-1 { z-index: 9; }
.zi-2 { z-index: 99; }
.zi-3 { z-index: 999; }
.zi-4 { z-index: 9999; }

.rgt-0{ right:0; }
.lft-0{ left:0; }
.top-0{ top:0; }
.btm-0{ bottom:0; }

.btm-5{ bottom:5; }
.btm-10{ bottom:10; }

.gap-0 { gap:0; }
.gap-05 { gap:0.5rem; }
.gap-75 { gap:0.75rem; }
.gap-1 { gap:1rem; }
.gap-2 { gap:2rem; }
.gap-3 { gap:3rem; }
.gap-4 { gap:4rem; }
.gap-5 { gap:5rem; }
.gap-6 { gap:6rem; }
.gap-7 { gap:7rem; }
.gap-8 { gap:8rem; }

.gap-16 { gap:16rem; }

.fdc { flex-direction: column; }
.fdcr { flex-direction: column-reverse; }
.fdr { flex-direction: row; }
.flex{flex-grow:1;flex-shrink:1;flex-basis:0;}

.fw { flex-wrap: wrap; }
.fnw { flex-wrap: nowrap; }

.jcc { justify-content: center; }
.jcs { justify-content: flex-start; }
.jce { justify-content: flex-end; }
.jcsb { justify-content: space-between; }
.jcsa { justify-content: space-around; }
.jcse { justify-content: space-evenly; }
.acc { align-content: center; }
.acs { align-content: start; }
.ace { align-content: end; }

.pcc { place-content: center }

.aic { align-items: center; }
.ais { align-items: flex-start; }
.aie { align-items: flex-end; }
.asc { align-self: center; }
.ass { align-self: start; }
.ase { align-self: end; }

.ovh { overflow: hidden; }
.ovv { overflow: visible; }
.ovs { overflow: scroll; }

.tc { text-align: center; }
.tl { text-align: left; }
.tr { text-align: right; }
.tj { text-align: justify; }

.hyp { hyphens: auto; }
.hyp-0 { hyphens: unset; }

.lh-0 { line-height: 0; }
.lh-1 { line-height: 1; }
.lh-2 { line-height: 1.1; }
.lh-3 { line-height: 1.2; }
.lh-4 { line-height: 1.3; }
.lh-5 { line-height: 1.4; }
.lh-6 { line-height: 1.5; }

.ttu { text-transform:uppercase; }

.tdn { text-decoration: none; }
.ccr { color: currentColor; }

.cup { cursor: pointer; } 

.fs-1 { font-size: 0.5rem; }
.fs-2 { font-size: 0.75rem; }
.fs-3 { font-size: 1rem; }
.fs-4 { font-size: 1.125rem; }
.fs-5 { font-size: 1.3rem; }
.fs-6 { font-size: 1.5rem; }
.fs-7 { font-size: 2rem; }
.fs-8 { font-size: 3rem; }
.fs-9 { font-size: 4rem; }
.fs-10 { font-size: 5rem; }

.fw-1 { font-weight: 300; }
.fw-2 { font-weight: 400; }
.fw-3 { font-weight: 500; }
.fw-4 { font-weight: 600; }
.fw-5 { font-weight: 700; }
.fw-6 { font-weight: 800; }
.fw-7 { font-weight: 900; }

.tr-0 { translate: 0; }
.tr-t-1 { translate: 0 -1rem; }
.tr-t-2 { translate: 0 -2rem; }
.tr-t-3 { translate: 0 -3rem; }
.tr-t-4 { translate: 0 -4rem; }
.tr-t-5 { translate: 0 -5rem; }

.tr-b-1 { translate: 0 1rem; }
.tr-b-2 { translate: 0 2rem; }
.tr-b-3 { translate: 0 3rem; }
.tr-b-4 { translate: 0 4rem; }
.tr-b-5 { translate: 0 5rem; }

.tr-r-1 { translate: 1rem 0; }
.tr-r-2 { translate: 2rem 0; }
.tr-r-3 { translate: 3rem 0; }
.tr-r-4 { translate: 4rem 0; }
.tr-r-5 { translate: 5rem 0; }

.tr-l-1 { translate: -1rem 0; }
.tr-l-2 { translate: -2rem 0; }
.tr-l-3 { translate: -3rem 0; }
.tr-l-4 { translate: -4rem 0; }
.tr-l-5 { translate: -5rem 0; }

.m-auto { margin: auto }

.m-0 { margin: 0; }
.m-05 { margin: .5rem; }
.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }
.m-4 { margin: 4rem; }
.m-5 { margin: 5rem; }
.m-6 { margin: 6rem; }
.m-7 { margin: 7rem; }
.m-8 { margin: 8rem; }
.m-9 { margin: 9rem; }

.mt-0 { margin-top: 0; }
.mt-05 { margin-top: .5rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.mt-5 { margin-top: 5rem; }
.mt-6 { margin-top: 6rem; }
.mt-7 { margin-top: 7rem; }
.mt-8 { margin-top: 8rem; }
.mt-9 { margin-top: 9rem; }

.mb-0 { margin-bottom: 0; }
.mb-05 { margin-bottom: .5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }
.mb-5 { margin-bottom: 5rem; }
.mb-6 { margin-bottom: 6rem; }
.mb-7 { margin-bottom: 7rem; }
.mb-8 { margin-bottom: 8rem; }
.mb-9 { margin-bottom: 9rem; }

.ml-0 { margin-left: 0; }
.ml-05 { margin-left: .5rem; }
.ml-1 { margin-left: 1rem; }
.ml-2 { margin-left: 2rem; }
.ml-3 { margin-left: 3rem; }
.ml-4 { margin-left: 4rem; }
.ml-5 { margin-left: 5rem; }
.ml-6 { margin-left: 6rem; }
.ml-7 { margin-left: 7rem; }
.ml-8 { margin-left: 8rem; }
.ml-9 { margin-left: 9rem; }

.mr-0 { margin-right: 0; }
.mr-05 { margin-right: .5rem; }
.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }
.mr-3 { margin-right: 3rem; }
.mr-4 { margin-right: 4rem; }
.mr-5 { margin-right: 5rem; }
.mr-6 { margin-right: 6rem; }
.mr-7 { margin-right: 7rem; }
.mr-8 { margin-right: 8rem; }
.mr-9 { margin-right: 9rem; }

.my-0 { margin-bottom: 0;margin-top: 0; }
.my-05 { margin-bottom: .5rem;margin-top: .5rem }
.my-1 { margin-bottom: 1rem;margin-top: 1rem; }
.my-2 { margin-bottom: 2rem;margin-top: 2rem; }
.my-3 { margin-bottom: 3rem;margin-top: 3rem; }
.my-4 { margin-bottom: 4rem;margin-top: 4rem; }
.my-5 { margin-bottom: 5rem;margin-top: 5rem; }
.my-6 { margin-bottom: 6rem;margin-top: 6rem; }
.my-7 { margin-bottom: 7rem;margin-top: 7rem; }
.my-8 { margin-bottom: 8rem;margin-top: 8rem; }
.my-9 { margin-bottom: 9rem;margin-top: 9rem; }

.mx-0 { margin-left: 0;margin-right: 0; }
.mx-05 { margin-left: .5rem;margin-right: .5rem }
.mx-1 { margin-left: 1rem;margin-right: 1rem; }
.mx-2 { margin-left: 2rem;margin-right: 2rem; }
.mx-3 { margin-left: 3rem;margin-right: 3rem; }
.mx-4 { margin-left: 4rem;margin-right: 4rem; }
.mx-5 { margin-left: 5rem;margin-right: 5rem; }
.mx-6 { margin-left: 6rem;margin-right: 6rem; }
.mx-7 { margin-left: 7rem;margin-right: 7rem; }
.mx-8 { margin-left: 8rem;margin-right: 8rem; }
.mx-9 { margin-left: 9rem;margin-right: 9rem; }


.p-0 { padding: 0; }
.p-05 { padding: .5rem; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
.p-4 { padding: 4rem; }
.p-5 { padding: 5rem; }
.p-6 { padding: 6rem; }
.p-7 { padding: 7rem; }
.p-8 { padding: 8rem; }
.p-9 { padding: 9rem; }

.pt-0 { padding-top: 0; }
.pt-05 { padding-top: .5rem; }
.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pt-3 { padding-top: 3rem; }
.pt-4 { padding-top: 4rem; }
.pt-5 { padding-top: 5rem; }
.pt-6 { padding-top: 6rem; }
.pt-7 { padding-top: 7rem; }
.pt-8 { padding-top: 8rem; }
.pt-9 { padding-top: 9rem; }

.pb-0 { padding-bottom: 0; }
.pb-05 { padding-bottom: .5rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-3 { padding-bottom: 3rem; }
.pb-4 { padding-bottom: 4rem; }
.pb-5 { padding-bottom: 5rem; }
.pb-6 { padding-bottom: 6rem; }
.pb-7 { padding-bottom: 7rem; }
.pb-8 { padding-bottom: 8rem; }
.pb-9 { padding-bottom: 9rem; }

.pl-0 { padding-left: 0; }
.pl-05 { padding-left: .5rem; }
.pl-1 { padding-left: 1rem; }
.pl-2 { padding-left: 2rem; }
.pl-3 { padding-left: 3rem; }
.pl-4 { padding-left: 4rem; }
.pl-5 { padding-left: 5rem; }
.pl-6 { padding-left: 6rem; }
.pl-7 { padding-left: 7rem; }
.pl-8 { padding-left: 8rem; }
.pl-9 { padding-left: 9rem; }

.pr-0 { padding-right: 0; }
.pr-05 { padding-right: .5rem; }
.pr-1 { padding-right: 1rem; }
.pr-2 { padding-right: 2rem; }
.pr-3 { padding-right: 3rem; }
.pr-4 { padding-right: 4rem; }
.pr-5 { padding-right: 5rem; }
.pr-6 { padding-right: 6rem; }
.pr-7 { padding-right: 7rem; }
.pr-8 { padding-right: 8rem; }
.pr-9 { padding-right: 9rem; }

.py-0 { padding-bottom: 0;padding-top: 0; }
.py-05 { padding-bottom: .5rem;padding-top: .5rem }
.py-1 { padding-bottom: 1rem;padding-top: 1rem; }
.py-2 { padding-bottom: 2rem;padding-top: 2rem; }
.py-3 { padding-bottom: 3rem;padding-top: 3rem; }
.py-4 { padding-bottom: 4rem;padding-top: 4rem; }
.py-5 { padding-bottom: 5rem;padding-top: 5rem; }
.py-6 { padding-bottom: 6rem;padding-top: 6rem; }
.py-7 { padding-bottom: 7rem;padding-top: 7rem; }
.py-8 { padding-bottom: 8rem;padding-top: 8rem; }
.py-9 { padding-bottom: 9rem;padding-top: 9rem; }

.px-0 { padding-left: 0;padding-right: 0; }
.px-05 { padding-left: .5rem;padding-right: .5rem }
.px-1 { padding-left: 1rem;padding-right: 1rem; }
.px-2 { padding-left: 2rem;padding-right: 2rem; }
.px-3 { padding-left: 3rem;padding-right: 3rem; }
.px-4 { padding-left: 4rem;padding-right: 4rem; }
.px-5 { padding-left: 5rem;padding-right: 5rem; }
.px-6 { padding-left: 6rem;padding-right: 6rem; }
.px-7 { padding-left: 7rem;padding-right: 7rem; }
.px-8 { padding-left: 8rem;padding-right: 8rem; }
.px-9 { padding-left: 9rem;padding-right: 9rem; }


.w-quarter { width: 25%; }
.w-third { width: 33%; }
.w-half { width: 50%; }
.w-full { width: 100%; }

.h-full { height: 100%; }

.w-auto { width: auto; }
.h-auto { height: auto; }

.h-100 { height: 100dvh; }
.min-h-100 { min-height: 100dvh; }

.h-90 { height: 90dvh; }
.h-80 { height: 80dvh; }
.h-70 { height: 70dvh; }

.h-60 { height: 60dvh; }
.min-h-60 { min-height: 60dvh; }

.h-4 { height: 4rem; }
.h-24 { height: 24rem; }
.h-28 { height: 28rem; }
.h-32 { height: 32rem; }

.h-max { height: max-content; }

.w-16 { width: 16rem; }
.w-20 { width: 20rem; }
.w-24 { width: 24rem; }
.w-28 { width: 28rem; }
.w-32 { width: 32rem; }
.w-40 { width: 40rem; }
.w-48 { width: 48rem; }
.w-56 { width: 56rem; }
.w-64 { width: 64rem; }
.w-72 { width: 72rem; }

.w-1200 { width: 1200px; }

.w-max{width:max-content;}
.w-fit{width:fit-content;}

.b-0 { border: 0; }
.b-1 { border: .25rem solid currentColor; }
.b-2 { border: .5rem solid currentColor; }
.b-3 { border: .75rem solid currentColor; }
.b-4 { border: 1rem solid currentColor; }
.b-5 { border: 1.25rem solid currentColor; }

.bt-0 { border-top: 0; }
.bt-1 { border-top: .25rem solid currentColor; }
.bt-2 { border-top: .5rem solid currentColor; }
.bt-3 { border-top: .75rem solid currentColor; }
.bt-4 { border-top: 1rem solid currentColor; }
.bt-5 { border-top: 1.25rem solid currentColor; }

.bb-0 { border-bottom: 0; }
.bb-1 { border-bottom: .25rem solid currentColor; }
.bb-2 { border-bottom: .5rem solid currentColor; }
.bb-3 { border-bottom: .75rem solid currentColor; }
.bb-4 { border-bottom: 1rem solid currentColor; }
.bb-5 { border-bottom: 1.25rem solid currentColor; }

.rad-0 { border-radius: 0; }
.rad-1 { border-radius: 0.5rem; }
.rad-2 { border-radius: 1rem; }
.rad-3 { border-radius: 2rem; }
.rad-4 { border-radius: 3rem; }
.rad-5 { border-radius: 4rem; }
.rad-full { border-radius: 9999px; }

.cl-blue { color: #0077b6; }
.cl-beige { color: #fdf0d5; }
.cl-green { color: #a7c957; }
.cl-red { color: #DC3500; }
.cl-yellow { color: #ffd74a; }
.cl-purple { color: #8338ec; }
.cl-white { color: #FFF; }
.cl-dark { color: #000; }
.cl-unset { color: unset; }

.bg-blue { background-color: #0077b6; }
.bg-beige { background-color: #fdf0d5; }
.bg-green { background-color: #a7c957; }
.bg-red { background-color: #DC3500; }
.bg-yellow { background-color: #ffd74a; }
.bg-purple { background-color: #8338ec; }
.bg-white { background-color: #FFF; }
.bg-dark { background-color: #000; }
.bg-unset { background-color: unset; }

.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15); }
.shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2); }

.opac-1 { opacity: 0.25; }
.opac-2 { opacity: 0.5; }
.opac-3 { opacity: 0.75; }
.opac-4 { opacity: 1; }

body {
    font-family: "Hind Mysuru", sans-serif;
    background-color: #003049;
    color: #dad7cd;
}

h1{ color: #118ab2;font-weight: bold;text-transform: uppercase;font-size: 4rem;}

#search-bar {
    width: 320px;
    padding: .7rem;
    font-size: 1.2rem;
    height: fit-content;
}

.movie {
    background-color: #e58691;
    width: 320px;
    margin-bottom: 1rem;
    line-height: 0;
    color: black;
    position: relative;
}

.movie-poster {
    width: 130px;
    object-fit: contain;
}

.movie-title {
    font-size: 1.3rem;
    padding: 1.5rem 1rem 0;
    line-height: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.movie-year{
    position: absolute;
    top: 60px;
    right: 0;
    padding: .7rem;
    background-color: #adc178;
}

.movie-casting {
    position: absolute;
    top: 110px;
    right: 0;
    padding: .7rem;
    width: 50%;
    background-color: #ffffff99;
    line-height: 1.3;
}
 
.movie-synopsis {
    font-size: 1.07rem;
    line-height: 1.2;
    font-weight: 400;
    padding: 0 1rem 1rem;
    text-align: justify;
    hyphens: auto;
}

.open-button{
    padding: 1rem;
    text-transform: uppercase;
    background-color: #fcbf49;
    font-weight: 600;
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
}

.close-button { background-color: red;width: max-content;font-size: 2.5rem;margin-top: 1rem;padding: 1rem; padding-bottom: 0;}

.open-button:hover, .close-button:hover, .close-movie:hover {
    background-color: #CCC;color: black;
}

.trailer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.trailer-content {
    position: relative;
    background: black;
    padding: 2em;
    display: flex;flex-direction: column-reverse;
    color: black;
}

.movie-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.close-movie {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    padding: 1rem;
    background-color: black;
}

iframe {
    aspect-ratio: 16/9;
    width: 880px;
}

@media (max-width: 1199px) { html{ background-color: black; } body { display: none; } }