*{padding:0;margin:0;box-sizing:border-box}:root{--bg-Light:linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);--bg-Dark:linear-gradient(180deg, #040918 0%, #091540 100%);--Neutral-200: hsl(217, 61%, 90%);--Neutral-100: hsl(0, 0%, 93%);--Neutral-900: hsl(227, 75%, 14%);--Neutral-800: hsl(226, 25%, 17%);--Neutral-700: hsl(225, 23%, 24%);--Neutral-600: hsl(226, 11%, 37%);--Neutral-300: hsl(0, 0%, 78%);--Red-400: hsl(3, 86%, 64%);--Red-500: hsl(3, 71%, 56%);--Neutral-0: hsl(200, 60%, 99%);--Red-700: hsl(3, 77%, 44%);--weight-l:700;--weight-m:500;--weight-s:400 }@font-face{font-family:Noto Sans;src:url(/assets/NotoSans-Regular-D96CXwz4.ttf) format("truetype");font-weight:400;font-display:swap}@font-face{font-family:Noto Sans;src:url(/assets/NotoSans-Medium-BX6xEgvr.ttf) format("truetype");font-weight:500;font-display:swap}@font-face{font-family:Noto Sans;src:url(/assets/NotoSans-Bold-BTRCuqCj.ttf) format("truetype");font-weight:700;font-display:swap}body{font-family:Noto Sans,sans-serif}.container{width:100%;max-width:120rem;min-height:100vh;background:var(--bg-Dark);display:flex;justify-content:center;align-items:center}.main-container{margin-top:1.5rem;width:90%;min-height:100vh}button{font-family:Noto Sans,sans-serif;background-color:var(--Neutral-700);color:var(--Neutral-0);border:none;border:1px solid var(--Neutral-600);padding:.5rem 1rem;border-radius:1rem;cursor:pointer;font-weight:var(--weight-m)}button.active{background-color:var(--Red-400);color:var(--Neutral-900);font-size:.9rem}button.active:hover{background-color:var(--Red-400)}button:active{background-color:var(--Red-500)}button:focus,.mode-box:focus,span:focus{outline:none;border:1px solid var(--Red-500)}button:hover,.mode-box:hover{background-color:var(--Neutral-600)}header{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.header-content{width:100%;background-color:var(--Neutral-800);display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:1rem}.header-content .mode-box{cursor:pointer;background-color:var(--Neutral-700);padding:.5rem;border-radius:.8rem;display:flex;gap:1rem}.header-content .mode-box img{width:1.5rem;height:1.5rem}.header-title{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}.header-title h1{color:var(--Neutral-0);font-size:2rem}.header-title div{display:flex;gap:1rem}ul{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1rem;margin-top:1rem;padding-bottom:1rem;list-style:none}ul li{width:100%;background-color:var(--Neutral-800);padding:1rem;border-radius:1rem;border:1px solid var(--Neutral-600);display:flex;flex-direction:column;gap:2rem}ul li .info{display:flex;gap:1.5rem}ul li .info img{width:3.5rem;height:3.5rem}ul li .info div{display:flex;flex-direction:column;gap:.5rem}ul li .info div h2{text-align:left;font-size:1.2rem;color:var(--Neutral-0)}ul li .info div p{font-size:.9rem;text-align:left;color:var(--Neutral-300)}ul li .remove-box{display:flex;justify-content:space-between}ul li .remove-box .slider{background-color:var(--Neutral-600);border-radius:100px;padding:1px;margin:10px;cursor:pointer;transition:box-shadow .2s cubic-bezier(.4,0,.2,1) 0s;align-items:center;position:relative;display:block;width:50px;height:25px;box-shadow:#0000009e 0 0 5px inset,#00000036 0 0 0 24px inset,var(--Red-500) 0 0 0 0 inset,#e0e0e073 0 1px}ul li .remove-box .slider:after{content:"";display:flex;left:2px;width:25px;height:25px;background-color:#e3e3e3;border-radius:200px;position:absolute;box-shadow:transparent 0 0 0 2px,#0000004d 0 6px 6px;transition:left .3s cubic-bezier(.4,0,.2,1) 0s,background-color .3s cubic-bezier(.4,0,.2,1) 0s;will-change:left,background-color}ul li .remove-box .switch input[type=checkbox]:checked+.slider{box-shadow:#0000009e 0 0 5px inset,var(--Red-500) 0 0 0 2px inset,var(--Red-500) 0 0 0 24px inset,#e0e0e073 0 1px}ul li .remove-box .switch input[type=checkbox]:checked+.slider:after{left:24px}ul li .remove-box .switch input[type=checkbox],.hidden{display:none}.light-mode{background:var(--bg-Light);display:flex;justify-content:center}.light-mode .header-content{background-color:var(--Neutral-0)}.light-mode .header-content .mode-box{background-color:var(--Neutral-300)}.light-mode .header-content .mode-box:hover{background-color:var(--Neutral-200)}.light-mode .header-title h1{color:var(--Neutral-900)}.light-mode .card-box li{background-color:var(--Neutral-0);border:1px solid var(--Neutral-200)}.light-mode .card-box li div h2{color:var(--Neutral-900)}.light-mode .card-box li div p{color:var(--Neutral-600)}.light-mode button{color:var(--Neutral-900);background-color:var(--Neutral-0);border:1px solid var(--Neutral-300)}.light-mode button:hover{background-color:var(--Neutral-300)}.light-mode button:focus{border:1px solid var(--Red-700)}.light-mode button.active{background-color:var(--Red-700);color:var(--Neutral-0)}.light-mode button .slider:focus{border:2px solid var(--Red-400)}@media (max-width:76.8rem){.header-title{flex-direction:column;gap:1rem}ul{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}