@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap";header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--color-secondary);padding:1.5em 3em}header .logo{max-width:200px}header nav ul{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2em;padding:0;list-style:""}header nav ul a{position:relative;text-decoration:none;text-transform:uppercase;font-weight:700;color:var(--color-body)}header nav ul a:hover{text-decoration:none;font-weight:700;color:var(--color-light)}header nav ul a.active,header nav ul a.active:hover{color:var(--color-lighter);cursor:default}header nav ul a:after{content:"";width:0;height:1px;position:absolute;bottom:-2px;left:100%;background-color:var(--color-primary);transition:left .5s ease,width .5s ease}header nav ul a:hover:after{width:100%;left:0;transition:width .5s ease}header nav ul a.active:after,header nav ul a.active:hover:after{background-color:var(--color-active);transition:none;left:0;width:100%}@media only screen and (max-width: 480px){header{flex-direction:column;align-items:center;padding:1.2em 0 .5em}header .logo{max-width:70%}}footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--color-secondary);padding:1.5em 3em;color:var(--color-body)}footer nav ul{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2em;padding:0;list-style:""}footer nav ul a{position:relative;text-decoration:none;color:var(--color-body)}footer nav ul a:after{content:"";width:0;height:1px;position:absolute;bottom:-2px;left:100%;background-color:var(--color-primary);transition:left .5s ease,width .5s ease}footer nav ul a:hover:after{width:100%;left:0;transition:width .5s ease}.movie-card{background-color:var(--color-secondary);border-radius:8px;border:none;overflow:hidden;padding-bottom:1em;max-width:200px}.movie-card .content{padding:.2em 1em}.movie-card .content p{margin:0}.movie-card .content .title{font-size:.9em;font-weight:700;color:var(--color-body);text-decoration:none}.movie-card:hover .content .title{transition:color .8s ease;color:var(--color-light)}.movie-card:hover .poster{transition:.3s;filter:brightness(120%)}@media only screen and (max-width: 480px){.movie-card{max-width:100%;margin-bottom:2em}.movie-card .content{text-align:center}.movie-card .content .title{font-size:1.1em;color:var(--color-light)}}.move-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));grid-gap:1rem;margin-top:3em}.search-by-title-container{position:relative;width:320px;padding:1.1em 0}.search-by-title-container input{width:100%;background:#0000004d;border:1px solid var(--color-body);border-radius:1.5em;padding:.5em 2.5em .5em 1em;font-size:1.2em;color:var(--color-light)}.search-by-title-container input::-webkit-input-placeholder,.search-by-title-container input::-moz-placeholder,.search-by-title-container input::-ms-input-placeholder{color:var(--color-body)}.search-by-title-container:after{content:"";position:absolute;top:1.73em;right:.9em;width:24px;height:24px;background-image:url(data:image/svg+xml;utf8;base64,IDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0E2LjQ3MSA2LjQ3MSAwIDAgMCAxNiA5LjVBNi41IDYuNSAwIDEgMCA5LjUgMTZjMS42MSAwIDMuMDktLjU5IDQuMjMtMS41N2wuMjcuMjh2Ljc5bDUgNC45OUwyMC40OSAxOWwtNC45OS01em0tNiAwQzcuMDEgMTQgNSAxMS45OSA1IDkuNVM3LjAxIDUgOS41IDVTMTQgNy4wMSAxNCA5LjVTMTEuOTkgMTQgOS41IDE0eiIgZmlsbD0id2hpdGUiLz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9InJnYmEoMCwwLDAsMCkiLz48L3N2Zz4=)}.genre-filter-list{display:flex;align-items:center}.genre-filter-list nav ul{display:flex;flex-wrap:wrap;gap:.3em;list-style:"";padding-inline-start:.3em}.genre-filter-list .title{color:var(--color-light);font-weight:700}@media only screen and (max-width: 480px){.genre-filter-list{flex-direction:column;text-align:center}.genre-filter-list p{margin:1em 0 0}.genre-filter-list nav ul{justify-content:center;margin:.7em 0}}.pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;color:var(--color-light);margin-top:3em}.pagination .items-per-page-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:.5em}.items-per-page-wrapper .select{display:grid;grid-template-areas:"select";align-items:center;position:relative;min-width:3.3em;border:1px solid var(--color-primary);border-radius:2em;padding:.13em .6em .13em .25em;cursor:pointer;transition:all 1s}.items-per-page-wrapper select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;padding:0 1em;margin:0;width:100%;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;color:var(--color-primary);outline:none;transition:color 1s}.items-per-page-wrapper select option{background-color:var(--color-secondary);color:var(--color-primary)}.items-per-page-wrapper select,.items-per-page-wrapper .select:after{grid-area:select}.items-per-page-wrapper .select:after{content:"";justify-self:end;width:.8em;height:.5em;background-color:var(--color-primary);clip-path:polygon(100% 0%,0 0%,50% 100%);transition:background-color 1s}.items-per-page-wrapper .select:hover{border-color:var(--color-light);color:var(--color-light);padding:.13em 1.1em .13em .75em}.items-per-page-wrapper select:hover{color:var(--color-light)}.items-per-page-wrapper .select:hover:after{background-color:var(--color-light)}@media only screen and (max-width: 480px){.pagination{margin-top:0}}.home-section .content-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}@media only screen and (max-width: 480px){.home-section .content-top{flex-direction:column;text-align:center}.home-section .content-top h1{margin:.3em}}.about-container{display:flex;flex-wrap:wrap;gap:2em}.about-container figure{max-width:390px}.about-container .content{max-width:700px}.about-container .btn{margin:1em 0}@media only screen and (max-width: 480px){footer{justify-content:center}}.hero-section{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:center top;position:relative;text-align:center;padding:15em 0 0;margin:-2em -3em 4em;z-index:1}.hero-section .hero-content:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;background:linear-gradient(180deg,transparent,var(--color-body-bg))}.hero-section .hero-content h1{font-size:4em;font-weight:700;margin:0}.movie-info-container{display:flex;flex-wrap:wrap;gap:2em}.movie-info-container .poster{flex-basis:390px;flex-shrink:0;flex-grow:0}.movie-info-container .content{flex-basis:390px;flex-shrink:1;flex-grow:1}.movie-info-container .content h2{margin-top:0}.movie-info-container .content .btn{margin-top:.5em}@media only screen and (max-width: 480px){.hero-section{padding:8em 0 0;margin:-1em -1em 0}.hero-section .hero-content h1{font-size:2em;font-weight:400}.movie-info-container .content ul{list-style:""}}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}html{scroll-behavior:smooth}:root{--color-primary: #ae45ff;--color-secondary: #1e1427;--color-active: #c231a1;--color-disabled: #595959;--color-body: #6f6f6f;--color-body-bg: #0e0e0f;--color-light: #eee;--color-lighter: #ced0d4;--color-lightest: #f0f2f5;--color-error: #fd2727}body{font-family:Poppins,sans-serif;font-size:16px;line-height:1.5;color:var(--color-body);background-color:var(--color-body-bg)}section{display:block}figure{margin:0}img{max-width:100%;height:auto;border:0}.audible{clip:rect(0,0,0,0);height:0;line-height:0;min-height:0;overflow:hidden;padding:0;position:absolute;width:1px}.error{color:var(--color-error)}.main-wrapper{padding:2em 3em;min-height:calc(100vh - 220px)}.btn{display:inline-block;color:var(--color-primary);background-color:transparent;padding:.5em 1em;border:1px solid var(--color-primary);border-radius:2em;text-decoration:none;cursor:pointer;transition:all 1s}.btn:hover{border-color:var(--color-light);color:var(--color-light);padding:.5em 1.5em}.btn.active,.btn.active:hover{border-color:var(--color-active);color:var(--color-active);padding:.5em 1em;cursor:default}.btn[disabled],.btn[disabled]:hover{border-color:var(--color-disabled);color:var(--color-disabled);padding:.5em 1em;cursor:default}h1,h2,h3{color:var(--color-light);font-weight:400}@media only screen and (max-width: 480px){.main-wrapper{padding:1em;text-align:center}.audible-sm{clip:rect(0,0,0,0);height:0;line-height:0;min-height:0;overflow:hidden;padding:0;position:absolute;width:1px}}