@charset "UTF-8";html{font-size:62.5%;background-color:var(--background-color)}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}.header{height:10rem;display:flex;flex-direction:column;padding-top:2rem;gap:1.5rem;align-items:center;justify-content:center;background-color:var(--background-color);border-bottom:1px solid rgb(200,194,194)}@media only screen and (max-width: 286px){.header{height:15rem}}@media (min-width: 720px){.header{display:flex;height:15rem;align-items:flex-start}}.logo{text-decoration:none}.logo>h1{color:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:clamp(3.2rem,3vw,4rem);flex-wrap:wrap}@media only screen and (max-width: 286px){.logo{width:7rem;padding:0;margin:0;font-size:clamp(2.8rem,3vw,4rem)}}@media (min-width: 720px){.logo{margin:0 0 0 1rem}}.search{display:flex;position:relative;background-color:#fff;align-items:center;border-radius:.5rem;height:5rem;border:1px solid var(--button-background-primary);margin-bottom:2rem}.search :first-child{width:5rem;fill:var(--button-background-primary)}.search input{border:none;width:100%;outline:none;height:2rem;padding:1.5rem}.search .reset-button{position:absolute;font-size:2.5rem;right:8px;top:57%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer}@media (min-width: 720px){.search{margin:0 auto;height:3.5rem;align-items:center}.search>input{width:50vw}}.nav{display:flex;justify-content:space-around;gap:1.5rem;position:fixed;bottom:0;width:100%;z-index:1;padding:1.5rem;border-top:1px solid rgb(200,194,194);background-color:var(--background-color)}.nav>a{text-decoration:none;color:var(--primary-color)}.nav>a>li{font-size:1.6rem;display:flex;align-items:center;justify-content:center;list-style:none;flex-direction:column}.nav>a>li>svg{font-size:2rem}.nav>a>li>span{font-size:clamp(1.2rem,1.5vw,2.5rem)}@media (min-width: 720px){.nav{position:absolute;height:5rem;top:4%;left:35%;max-width:clamp(35rem,55vw,55rem);background-color:transparent;border:none}.nav>a>li>svg{display:none}.nav>a>li>span{font-size:clamp(2rem,2vw,3rem)}}.btn__container{display:flex;align-items:center;margin:1.5rem}.btn__container .btn__create{background-color:transparent;color:transparent;border:none;cursor:pointer;display:flex;align-items:center}.btn__container .btn__create>svg{color:var(--primary-color);font-size:clamp(3rem,4vw,5rem);font-weight:700}.btn__container .modal__content{background-color:var(--background-color);box-shadow:0 5px 20px #acabab}.btn__container .form{width:90%;max-width:40rem;padding:3rem;border-radius:5px}.btn__container .form>button.btn-submit{width:100%;padding:1rem;background-color:var(--primary-color);font-weight:800;border:none;border-radius:5rem}.btn__container .form__group{display:flex;margin:.5rem 0;flex-direction:column}.btn__container .form__group--hidden{display:none}.btn__container .form__group>label{color:var(--text-color);font-weight:700;font-size:clamp(1.6rem,1.6vw,2.5rem)}.btn__container .form__group>small{margin-left:.3rem}.btn__container .form__group>input,.btn__container .form__group>select,.btn__container .form__group>textarea{display:block;width:100%;margin-bottom:1rem;padding:.5rem;border:none;border-radius:.5rem;font-size:clamp(1.6rem,1.6vw,2.5rem);color:var(--text-color);background-color:var(--background-color);border:1px solid}.btn__container .form__group>input::placeholder,.btn__container .form__group>select::placeholder,.btn__container .form__group>textarea::placeholder{color:var(--text-color)}.btn__container .form .btn-submit{cursor:pointer}@media (min-width: 720px){.btn__container .form{width:100%;min-width:50rem}}.modal{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.605);justify-content:center;align-items:center;z-index:9999}.modal__content{background:var(--background-color);color:var(--text-color);border-radius:5px;box-shadow:0 2px 4px #0000004d;padding:20px;max-width:90%;max-height:90%;overflow-y:auto;position:relative}.modal__close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-color)}.form-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:var(--background-color)}.form-container .form{width:90%;max-width:400px;padding:30px;background-color:var(--background-color);border-radius:5px;box-shadow:0 5px 20px #acabab}.form-container .form__group{display:flex;margin:.5rem 0;flex-direction:column}.form-container .form__group>label{color:var(--text-color);font-weight:700;font-size:clamp(1.6rem,1.6vw,2.5rem)}.form-container .form__group>input{display:block;width:100%;margin-bottom:1rem;padding:.5rem;border:none;border-radius:.5rem;font-size:clamp(1.6rem,1.6vw,2.5rem);color:var(--text-color);background-color:var(--background-color);border:1px solid}.form-container .form__group>input::placeholder{color:var(--text-color)}.form-container .form__or .divider{margin:10px 0;text-align:center;position:relative}.form-container .form__or .divider span{padding:0 10px;color:gray}.form-container .form__or .divider:before,.form-container .form__or .divider:after{content:"";position:absolute;top:50%;width:40%;height:1px;background-color:gray}.form-container .form__or .divider:before{left:0}.form-container .form__or .divider:after{right:0}.form-container .form__or #signInDiv{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:.8rem;padding:.8rem}.form-container .form__error{display:block;color:var(--text-color);font-weight:700;text-decoration:underline red}.form-container .form__swap{color:var(--text-color);font-weight:600}.form-container .form__swap a{color:var(--text-color)}.form-container .form__button{display:block;width:100%;padding:10px;margin-bottom:.8rem;border:none;border-radius:5px;font-size:18px;font-weight:700;color:var(--text-color-dark);background-color:var(--button-background-primary);cursor:pointer;transition:background-color .3s ease-in-out}.form-container .form__button:hover{background-color:var(--button-hover-background-primary)}.home{color:var(--text-color);margin-bottom:7rem}.home .cards{display:flex;flex-wrap:wrap;justify-content:center;max-width:1200rem}.home .cards .card{width:35rem;text-align:center;margin:1rem;border:solid 1px var(--text-color);border-radius:2rem;padding:0;position:relative}.home .cards .card>a{text-decoration:none}.home .cards .card__image>img{width:100%;object-fit:cover;height:52.2rem;border-radius:2rem 2rem 0 0}.home .cards .card__title{color:var(--text-color);font-size:clamp(2rem,1.5vw,2.5rem);margin:2rem 1rem}.home .cards .card__favorite{background:transparent;border:none;cursor:pointer;font-size:24px;transition:color .3s ease;color:#fff;position:absolute;top:.8rem;right:.8rem}.home .cards .card__favorite>svg{font-size:3.5rem}.home .cards .card__favorite>svg>path{stroke:#000;stroke-width:5rem}.home .cards .card__favorite.favorited{color:red}@media (min-width: 720px){.home .cards{justify-content:flex-start}}.loader{width:50px;height:50px;display:grid;margin:15.5rem auto}.loader:before,.loader:after{content:"";grid-area:1/1;--c: radial-gradient(farthest-side,#766DF4 92%,#0000);background:var(--c) 50% 0,var(--c) 50% 100%,var(--c) 100% 50%,var(--c) 0 50%;background-size:12px 12px;background-repeat:no-repeat;animation:s2 1s infinite}.loader:before{margin:4px;filter:hue-rotate(45deg);background-size:8px 8px;animation-timing-function:linear}@keyframes s2{to{transform:rotate(.5turn)}}.favorites{color:var(--text-color);margin-bottom:7rem}.favorites.no-favorites{text-align:center;color:var(--text-color);font-size:clamp(1.8rem,1.8vw,3rem)}.favorites .cards{display:flex;flex-wrap:wrap;justify-content:center;max-width:1200rem}.favorites .cards .card{width:35rem;text-align:center;margin:1rem;border:solid 1px var(--text-color);border-radius:2rem;padding:0 0 2rem;position:relative}.favorites .cards .card>a{text-decoration:none}.favorites .cards .card__image>img{width:100%;object-fit:cover;height:52.2rem;border-radius:2rem 2rem 0 0}.favorites .cards .card__title{color:var(--text-color);font-size:clamp(2rem,2vw,3.2rem);margin:2rem 0}.favorites .cards .card__remove{background:transparent;border:none;cursor:pointer;font-size:24px;transition:color .3s ease;color:red;position:absolute;top:.5rem;right:.5rem}.favorites .cards .card__remove>svg{font-size:4rem}@media (min-width: 720px){.favorites .cards{justify-content:flex-start}}.gender-selection{display:flex;margin-bottom:10px}.gender-selection label{display:flex;align-items:center;margin-right:10px}.gender-selection label input[type=radio]{margin-right:5px}.account-container{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-color);background-color:var(--background-color);padding:20px}.account-container>h2{margin-bottom:.7rem}.account-container .account-profile{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.account-container .account-profile .account-avatar{width:100px;height:100px;border-radius:50%}.account-container .account-profile .account-username{margin-top:10px;font-size:18px}.account-container .account-logout{background-color:var(--secondary-color);color:#fff;border:none;padding:10px 20px;font-size:16px;border-radius:5px;cursor:pointer}.account-container .account-logout:hover{filter:brightness(80%)}.account-container button{margin-top:10px;background-color:var(--secondary-color);color:#fff;border:none;padding:10px 20px;font-size:16px;border-radius:5px;cursor:pointer}.account-container button:hover{filter:brightness(80%)}@media screen and (min-width: 768px){.account-container{max-width:500px;margin:0 auto}}[data-theme=light]{--font-family: “Roboto”, sans-serif;--background-color: #f0f0f0;--text-color: #333333;--button-background-primary: #9ab3f5;--button-hover-background-primary: #7f99e6;--button-background-secondary: #f0f0f0;--button-hover-background-secondary: #e0e0e0;--primary-color: #9ab3f5;--primary-color-light: #b4c6fa;--secondary-color: #ff9a9a;--tertiary-color: #ffe29a}[data-theme=dark]{--font-family: “Roboto”, sans-serif;--background-color: #10002b;--text-color: #f9f9f9;--button-background-primary: #9ab3f5;--button-hover-background-primary: #7f99e6;--button-background-secondary: #10002b;--button-hover-background-secondary: #1c0d3a;--primary-color: #9ab3f5;--primary-color-light: #b4c6fa;--secondary-color: #ff7d7d;--terciary-color: #ffc77d}.details{color:var(--text-color)}.details__image{width:clamp(32rem,100vw,90rem)}.details__image>img{width:100%;height:clamp(20rem,100%,45rem);object-fit:cover;filter:brightness(68%)}@media (max-width: 314px){.details__image{position:relative}.details__image+.details__addFavorites{position:fixed;right:0}.details__image+.details__addFavorites>button{border:none;background-color:transparent}}@media (min-width: 720px){.details__image{width:clamp(32rem,100vw,100%)}.details__image>img{width:100%;height:55rem;object-fit:cover;filter:brightness(68%)}}.details__back>svg{font-size:3.2rem;position:absolute;top:0;color:var(--primary-color);z-index:1;cursor:pointer}.details__addFavorites{position:relative}.details__addFavorites>button{border:none;position:absolute;bottom:0;right:0;background-color:transparent;margin-right:.7rem;cursor:pointer}.details__addFavorites>button>svg{font-size:3.5rem;color:var(--primary-color)}.details__title{text-align:center}.details__title>h1{font-size:clamp(2rem,3vw,3.4rem);margin:.7rem 0;text-align:center}.details__genres{display:flex;gap:1rem;margin:0 .8rem .8rem}@media (min-width: 720px){.details__genres{font-size:clamp(1.2rem,1.8vw,2.2rem)}}.details__duration{margin:0 .8rem .8rem}@media (min-width: 720px){.details__duration{font-size:clamp(1.2rem,1.8vw,2.2rem)}}.details__overview{margin:1.5rem .8rem}.details__overview>h2{font-size:clamp(1.8rem,2.6vw,3.1rem);color:var(--primary-color)}.details__overview>p{font-size:clamp(1.4rem,2.4vw,3rem);display:inline}.details__overview>button{background-color:transparent;border:none;color:var(--primary-color);margin-left:.7rem}@media (min-width: 720px){.details__overview{margin-bottom:2rem}.details__overview>h2{font-size:clamp(1.8rem,2.7vw,3.7rem);margin-bottom:.7rem}.details__overview>p{font-size:clamp(1.4rem,2.2vw,3.3rem)}}.details__watched>div{display:flex;align-items:center;gap:.5rem;margin:0 .8rem 1rem;position:relative}.details__watched>div>input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:none;border:none;cursor:pointer;height:20px;width:20px;border-radius:4px;background-color:var(--background-color);transition:background-color .3s,border-color .3s}.details__watched>div>input[type=checkbox]:not(:checked){background-color:#fff}.details__watched>div>input[type=checkbox]:checked{background-color:var(--primary-color);border-color:var(--background-color)}.details__watched>div>input[type=checkbox]>label{margin-left:8px}@media (min-width: 720px){.details__watched>div>label{font-size:clamp(1.5rem,2vw,3rem)}}.toggle{display:flex;align-items:center;position:absolute;right:1.5rem;top:.8rem}.toggle-btn{background-color:transparent;border:none;cursor:pointer;display:flex;align-items:center;font-size:clamp(1.8rem,3vw,3rem);color:#000;padding:.7rem;border:1px solid var(--background-color);border-radius:20%;box-shadow:0 .5rem 2rem #acabab}.toggle-btn:focus{outline:none}.toggle .fa-sun,.toggle .fa-moon{transition:color .3s}.toggle .fa-sun{color:#f9c74f}.toggle .fa-moon{color:#4d4d4d}.toggle.dark .fa-sun{color:#f9c74f}.toggle.light .fa-moon{color:#4d4d4d}