:root{--background: #F3F6FA;--accent: #C6EE80;--secondary: #233647}body{margin:0 0 50px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background)}button{all:unset;cursor:pointer}input{all:unset}a{all:unset;cursor:pointer}.header{height:100px;display:flex;position:sticky;top:0;gap:60px;justify-content:space-between;padding:0 50px;background-color:var(--secondary);color:#fff;z-index:50}@media (max-width: 700px){.header{height:60px;padding:0 30px}}.mainLogo{display:flex;flex-direction:column;justify-content:center}.mainLogo h3{font-size:48px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;margin:0}@media (max-width: 700px){.mainLogo h3{font-size:30px}}.mainLogo h4{margin:0;font-weight:400}@media (max-width: 700px){.mainLogo h4{display:none}}nav{display:flex;gap:10px;height:full;width:100%;align-items:end}@media (max-width: 700px){nav{display:none}}.navItem{border-bottom:4px solid transparent;height:fit-content;padding:10px;transition:ease .1s}.navItem:hover{border-bottom:4px solid var(--accent)}.selected{border-bottom:4px solid var(--accent);font-weight:700}.mainLogo{padding:0 20px}.user{display:block}@media (max-width: 700px){.user{display:none}}.menu{display:none}@media (max-width: 700px){.menu{display:block}}.hero{min-height:367px;position:relative;color:#fff;display:flex;padding:100px;gap:30px;justify-content:end;flex-direction:column}@media (max-width: 700px){.hero{padding:30px}}.hero .background{position:absolute;filter:brightness(90%);z-index:-10;top:0;left:0;height:100%;width:100%;object-fit:cover}.hero img{width:341px;max-width:100%}@media (max-width: 700px){.hero img{margin:auto}}.hero .starIcon{width:20px}.hero .buttonContainer{display:flex;gap:15px;align-items:center}@media (max-width: 700px){.hero .buttonContainer{flex-direction:column}}.hero .buttonContainer .divider{display:block}@media (max-width: 700px){.hero .buttonContainer .divider{display:none}}.hero button{border-radius:100px;width:312px;height:48px;display:flex;justify-content:center;font-weight:700;align-items:center;font-size:15px;gap:8px}.hero button img{width:15px}.hero .primary{color:#000;background-color:#fff}.hero .secondary{border:white 2px solid}.hero .link{width:100px}.ratingContainer{display:flex;flex-direction:column;gap:5px}.ratingContainer p{margin:0}.ratingContainer .rating{display:flex;gap:5px}.search{height:100px;padding:10px 100px;display:flex;align-items:center}@media (max-width: 700px){.search{padding:10px 30px}}.searchBar{height:60px;background-color:#fff;width:371px;color:#000;border-radius:100px;position:relative}.searchBar input{height:100%;width:80%;border-radius:100px;padding:0 30px}.searchBar button{height:60px;width:60px;background-color:#a6b2c4;border-radius:100px;position:absolute;right:0;top:0;display:flex;justify-content:center}@media (max-width: 700px){.searchBar button{display:none}}.searchBar button img{width:25px}.main{padding:0 100px;width:full;display:flex;flex-direction:column;gap:20px}@media (max-width: 700px){.main{padding:0 30px}}.main .moviesList{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}.main .item{height:200px;width:140px;display:inline-block;position:relative;cursor:pointer}.main .item .cover{position:absolute;z-index:-10;height:100%;width:100%;filter:brightness(80%)}@media (max-width: 800px){.main .item{height:150px;width:100px}}.saveMovie{z-index:10;position:absolute;top:5px;right:5px;height:24px;width:24px;border-radius:100px;background-color:var(--secondary);display:flex;align-items:center;justify-content:center}.saveMovie img{width:10px}.greattingSection{padding:30px 70px;display:flex;justify-content:space-between}.greattingSection .logOut{display:flex;align-items:center;gap:10px}@media (max-width: 700px){.greattingSection{padding:15px}}.userDataSection{width:calc(100% - 140px);padding:0 70px}@media (max-width: 700px){.userDataSection{padding:0;width:100%}.userDataSection .personalData{padding-left:10px}}.userDataContainer{background-color:#fff;padding:36px;width:fit-content;border-radius:20px;display:flex;flex-direction:column;gap:20px;max-width:calc(100% - 72px)}.userDataContainer .dataContainer{width:572px;max-width:100%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid black;padding:20px 10px}.userDataContainer .dataContainer .dataText{width:100%;overflow:hidden;font-weight:700;margin:0 0 0 20px}