:root{--color-header: #233647;--color-letra: white;--color-backgrond: #f3f6fa;--color-card: #A6B2C4;--color-greeny: #c8ee80;--font-vina: "Vina Sans";--font-inter: "Inter"}body{width:1441px;height:1653px;background-color:var(--color-backgrond);margin:0}.header{display:flex;background-color:var(--color-header);height:100px;color:var(--color-letra);text-align:left;padding-left:60px;padding-right:60px}.header .title{width:144px;margin-top:6px}.header .titleHead{text-align:center;font-family:var(--font-vina);line-height:58.32px;font-size:48px;font-weight:400;height:45px;margin:0}.header .subTitle{line-height:14.52px;font-weight:300;font-family:var(--font-inter);margin:15px 0 0;font-size:11.5px}.header .subTitle span{font-weight:500}.header .selectors{display:flex;flex-direction:row;align-items:end;width:300px;margin-left:150px}.header .selectors p{font-family:var(--font-inter);margin:0 30px 0 0;width:130px;text-align:center;height:61px;padding:10px;line-height:80px}.header .selectors p:hover{border-bottom:3px solid var(--color-greeny)}.header .userOptions{display:flex;margin-top:25px;margin-left:55%}.header .userOptions .filter-green{width:40px;height:40px;filter:invert(97%) sepia(9%) saturate(2084%) hue-rotate(21deg) brightness(98%) contrast(90%)}.hero{display:flex;background:linear-gradient(180deg,#23364700,#23364799);height:567px;text-align:left;color:var(--color-letra);font-family:inter}.hero .heroContainer{width:668px;height:399px;padding:5%}.hero .rateHero{width:158px;height:48px;font-size:16px;font-weight:400}.hero .rateHero p:first-child{margin-bottom:8px}.hero .rateHero span{display:flex;align-items:center;gap:5px}.hero .rateHero img{filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(336deg) brightness(104%) contrast(101%)}.hero .titleHero{font-weight:700;font-size:96px;margin:0;width:422px;height:116px}.hero .dateTypeHero{margin-top:0;font-size:24px}.hero .descHero{font-size:20px;font-weight:400;width:668px;height:77px}.hero .heroButtons{display:flex;width:644px;justify-content:space-between}.hero .heroButtons .trailerHeroButton{box-sizing:border-box;width:312px;height:48px;background:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;border:2px solid #FFFFFF;flex:none;order:0;flex-grow:0}.hero .heroButtons .trailerHeroButton:hover{cursor:pointer}.hero .heroButtons .seeLaterHeroButton{box-sizing:border-box;background-color:transparent;color:var(--color-letra);display:flex;flex-direction:row;justify-content:center;align-items:center;padding:12px 25px;gap:10px;width:312px;height:48px;border:2px solid #FFFFFF;border-radius:24px;flex:none;order:1;flex-grow:0}.hero .heroButtons .seeLaterHeroButton img{filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(336deg) brightness(104%) contrast(101%)}.hero .heroButtons .seeLaterHeroButton:hover{cursor:pointer}.search{display:flex;width:515px;color:var(--color-letra);line-height:100px;box-sizing:border-box;padding:2%;font-size:25px;position:relative}.search input{display:flex;flex-direction:row;align-items:center;padding:0 16px;gap:10px;width:447px;height:60px;background:#fff;border-radius:30px;flex:none;order:0;flex-grow:0}.search button{position:absolute;top:1;right:0;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0;gap:10px;width:60px;height:63px;background:#a6b2c4;border-radius:30px;flex:none;order:1;flex-grow:0}.search button:hover{cursor:pointer}.cards .cardList1,.cards .cardList2{display:flex;flex-wrap:wrap;justify-content:space-around;text-align:left;box-sizing:border-box;margin-left:0}.cards .cardItem{display:flex;background-color:var(--color-card)}.cards .movieGenre{font-family:Inter;text-align:start}@media (max-width: 1024px){.cardItem{width:370px;height:255px;margin-bottom:3%}.movieGenre{margin-left:4%}}@media (min-width:1024px){.cardItem{width:182px;height:255px}.movieGenre{margin-left:2%}}