@import"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";:root{--neutral--90: hsl(227, 75%, 14%);--neutral--80: hsl(226, 25%, 17%);--neutral--70: hsl(225, 23%, 24%);--neutral--60: hsl(226, 11%, 37%);--neutral--30: hsl(0, 0%, 78%);--neutral--20: hsl(217, 61%, 90%);--neutral--10: hsl(0, 0%, 93%);--neutral--0: hsl(200, 60%, 99%);--red--400: hsl(3, 86%, 64%);--red--500: hsl(3, 71%, 56%);--red--700: hsl(3, 77%, 44%)}.app{display:flex;justify-content:center;font-family:Noto Sans,sans-serif;width:100%;min-height:100vh;transition:background-color .2s ease,color .3s ease}.app.light{background:linear-gradient(180deg,#ebf2fc,#eef8f9);background-repeat:no-repeat}.app.dark{background:linear-gradient(180deg,#040918,#091540);background-repeat:no-repeat}img{width:100%}main{padding:0rem 1rem 5rem;width:1080px}header{padding:2rem 0rem}nav{background-color:var(--neutral--0);display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem;border-radius:15px;transition:.2s ease}.nav.dark{background-color:var(--neutral--80)}.logo{width:9rem}.theme{display:flex;align-items:center;justify-content:center;background-color:var(--neutral--10);padding:.7rem .8rem;border-radius:10px;border:none;cursor:pointer;transition:background-color .2s ease}.theme:focus{outline-offset:2px;outline:2px solid var(--red--500)}.theme:hover{background-color:var(--neutral--30)}.theme.dark{background-color:var(--neutral--70)}.theme.dark:hover{background-color:var(--neutral--60)}h1,ul{margin:0;padding:0}.status-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%}.status-bar h1{color:var(--neutral--90);transition:.2s ease}.status-title.dark{color:var(--neutral--0)}.status-bar ul{display:flex;flex-wrap:wrap;list-style-type:none;gap:1rem}.button{font-family:Noto Sans,sans-serif;font-size:1.1rem;font-weight:400;border:1px solid var(--neutral--30);padding:.4rem 1rem;border-radius:20px;color:var(--neutral--80);background-color:var(--neutral--0);cursor:pointer;transition:background-color .2s ease,opacity .2s ease,border .2s ease}.button:focus{outline-offset:2px;outline:2px solid var(--red--500);background-color:var(--red--500);color:var(--neutral--0)}.button.light:hover{opacity:.5;border:none}.button.dark{background-color:var(--neutral--70);color:var(--neutral--0);border:.5px solid var(--neutral--0)}.button.dark:focus{background-color:var(--red--500);border:none;color:var(--neutral--90)}.button.dark:hover{background-color:var(--neutral--60);border:none}.button.active{background-color:var(--red--700);color:#fff;border:none}.card{background-color:var(--neutral--0);padding:1rem;border-radius:15px;display:grid;grid-template-columns:60px 10px 10px auto auto;grid-template-rows:30px 70px 30px;transition:.2s ease,opacity .3s,transform .3s;box-shadow:0 0 5px 1px var(--neutral--30)}.card.is-animating{opacity:1}.card.dark{background-color:var(--neutral--80);border:1px solid var(--neutral--0);box-shadow:none}.card-img{width:3.5rem}.title{font-weight:700;font-size:1.2rem;color:var(--neutral--90);grid-column:3 / -1;margin:0;transition:.2s ease}.title.dark{color:var(--neutral--0)}.description{color:var(--neutral--60);font-weight:500;font-size:.8rem;grid-column:3 / -1;grid-row:2 / 3;margin:0;transition:.2s ease}.description.dark{color:var(--neutral--30)}.remove-btn{font-family:Noto Sans,sans-serif;border-radius:40px;grid-row:3 / -1;grid-column:1 / 4;background-color:var(--neutral--0);color:var(--neutral--80);font-weight:400;font-size:.9rem;border:1px solid var(--neutral--30);transition:background-color .2s ease;cursor:pointer}.remove-btn:hover{color:var(--neutral--0);background-color:var(--red--700)}.remove-btn:focus{background-color:var(--neutral--30);outline-offset:2px;border:none;outline:2px solid var(--red--500)}.remove-btn.dark{color:var(--neutral--0);background-color:var(--neutral--80)}.remove-btn.dark:focus{background-color:var(--neutral--60)}.remove-btn.dark:hover{background-color:var(--red--700);color:var(--neutral--80);border:none}.switch{position:relative;display:inline-block;align-self:center;justify-self:end;width:40px;height:20px;grid-column:-2 / -1;grid-row:3 / -1;cursor:pointer}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--neutral--30);transition:background-color .4s ease;border-radius:25px}.slider:before{position:absolute;content:"";height:15px;width:15px;left:3px;bottom:2.5px;background-color:var(--neutral--0);transition:.4s ease;border-radius:50%}input:checked+.slider{background-color:var(--red--700)}input:checked+.slider:hover{background-color:var(--red--400)}input:checked+.slider:before{transform:translate(19px)}input:focus+.slider{border:none;outline-offset:2px;outline:2px solid var(--red--500)}.all-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;margin-top:2rem}@media only screen and (min-width: 768px){.status-bar{justify-content:space-between;flex-direction:row}}:root{margin:0;padding:0;box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body.light{background:linear-gradient(180deg,#ebf2fc,#eef8f9);background-repeat:no-repeat;transition:background-color .2s ease,color .3s ease}body.dark{background:linear-gradient(180deg,#040918,#091540);background-repeat:no-repeat;transition:background-color .2s ease,color .3s ease}