#root{margin:0 auto;max-width:1280px;position:relative;padding:2rem}.navbar{display:flex;align-items:center;justify-content:space-between;background-color:var(--slate-700);padding:1rem;border-radius:1rem;margin-bottom:1rem}.navbar__logo{color:var(--slate-300);font-weight:700}.navbar__result{color:var(--slate-400)}.navbar .heart{position:relative;color:var(--rose-500)}.navbar .heart .icon{width:2rem;height:2rem}.navbar .heart .badge{font-size:.9rem;position:absolute;top:0;right:-6px;display:inline-block;background-color:var(--rose-500);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:1px 4px}.main{display:flex;justify-content:space-between;width:100%;gap:2rem}.characters-list{width:40%}.box h2{color:var(--slate-400);font-size:1.2rem;margin-bottom:1rem}.list__item:not(:last-child){margin-bottom:1.5rem}.list__item{display:grid;column-gap:1rem;grid-template-columns:4rem 1fr 2rem;grid-template-rows:1fr 1fr;background-color:var(--slate-800);border-radius:1rem;padding:.8rem;cursor:pointer;transition:all .2s ease-out}.list__item:hover{background-color:var(--slate-700)}.list__item img{grid-column:1/3;grid-row:1/3;width:4rem;height:4rem;border-radius:1rem}.list__item h3{grid-column:2/3;grid-row:1/2}.list__item .list-item__info{grid-column:2/3;grid-row:2/3;align-self:center}.list__item .icon{grid-column:3/4;grid-row:1/3;align-self:center}.icon.red{color:var(--rose-500)}.name,.info{color:var(--slate-200)}.status{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background-color:var(--green-600)}.status.red{background-color:var(--rose-600)}.character-detail{display:flex;flex-direction:column;background-color:var(--slate-800);overflow:hidden;border-radius:.5rem;margin-bottom:2rem}.character-detail__img{width:100%;height:auto;max-height:15rem;object-fit:cover;object-position:center}.character-detail__info{padding:1rem}.character-detail__info .name{font-size:1.3rem;margin-bottom:.2rem}.character-detail__info .info{font-size:.9rem;margin-bottom:1rem}.character-detail__info .location{color:var(--slate-500);margin-bottom:1rem}.character-detail__info .location :last-child{margin-top:.2rem;color:var(--slate-300);font-weight:700}.character-detail__info .actions{display:flex;flex-direction:column;gap:1rem}.character-detail__info .actions p{color:var(--slate-400)}.character-episodes{background-color:var(--slate-800);border-radius:1rem;padding:1rem}.character-episodes .title{display:flex;align-items:center;justify-content:space-between}.character-episodes .title .icon{transition:all .3s ease-in-out;color:var(--slate-300);display:flex;align-items:center;justify-content:center}.character-episodes h2{color:var(--slate-400);margin-bottom:.6rem}.character-episodes li{display:flex;align-items:center;justify-content:space-between;color:var(--slate-200);padding:.5rem 0}@media (min-width: 768px){.character-detail{flex-direction:row}.character-detail__img{width:40%}.character-detail__info .actions{flex-direction:row}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;--slate-900: #0f172a;--slate-800: #1e293b;--slate-700: #334155;--slate-600: #475569;--slate-500: rgb(100, 116, 139);--slate-400: #94a3b8;--slate-300: #cbd5e1;--slate-200: #e2e8f0;--slate-100: #f1f5f9;--slate-50: #f8fafc;--rose-600: #e11d48;--rose-500: #f43f5e;--green-600: #22c55e}body{width:100vw;min-height:100vh;background-color:var(--slate-900)}button{background-color:transparent;cursor:pointer}*{padding:0;margin:0;box-sizing:border-box;list-style:none;border:none;outline:none}.text-field{padding:.7rem 1rem;border-radius:.5rem;color:var(--slate-100);background-color:var(--slate-500);font-size:1.1rem}.text-field::placeholder{color:var(--slate-400)}.btn{padding:.8rem 1rem;border-radius:1rem}.btn--primary{background-color:var(--slate-500);color:var(--slate-100);font-weight:700}.btn--secondary{border:1px solid var(--slate-100);color:var(--slate-100);font-weight:700}.badge{white-space:nowrap;padding:.3rem 1rem;border-radius:1rem;font-size:.8rem;font-weight:700}.badge--secondary{background-color:var(--slate-600)}.modal{width:98%;min-height:250px;position:absolute;top:100%;left:50%;transform:translate(-50%,-50%);background-color:var(--slate-900);padding:1rem;border-radius:1rem;box-shadow:1px 1px 50px var(--slate-600)}.modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--slate-600)}.icon{width:1.6rem;height:1.6rem}.modal__header .close{color:var(--rose-500)}.modal__header .title{color:var(--slate-200)}@media (min-width: 768px){.modal{max-width:30rem}}.backdrop{width:100vw;height:100vh;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#3f454ccc}