html,body{width:100%;height:100%;margin:0;padding:0;font-family:Noto Sans,sans-serif;font-style:normal;font-optical-sizing:auto}body{background-color:#d6e2f5;min-height:100vh}body.dark-theme{background-color:#040918}#root{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center}header{width:95%;max-width:1400px;margin:40px auto 25px;padding:10px 15px;box-sizing:border-box;background-color:#fbfdfe;display:flex;justify-content:space-between;flex-direction:row;border-radius:8px;box-shadow:3px 3px 15px #2c2e503d}body.dark-theme header{background-color:#212636}body.dark-theme header button{background-color:#2f364b}body.dark-theme header #start-logo{color:#fbfdfe}header button{border:0;border-radius:5px}header button:hover{background-color:#c7c7c7}#sun-moon{padding:5px}nav{width:95%;max-width:1400px;margin:0 auto 25px;padding:0 15px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center}h1{font-weight:700;font-size:30px;margin:0 0 10px;color:#09153e}body.dark-theme h1{color:#fbfdfe}nav button{border-radius:20px;padding:8px 15px;font-size:16px;font-weight:500;margin:0 5px}.redButt{background-color:#c7221a;color:#fbfdfe;border:0}.redButt:hover{background-color:#de473f}.whiteButt{background-color:#fbfdfe;color:#09153e;border:1px solid hsl(0,0%,78%)}.whiteButt:hover{background-color:#fbfdfe5a;color:#09153e81}body.dark-theme .whiteButt{background-color:#3e5374;color:#fbfdfe;border:1px solid hsl(217,30%,45%)}body.dark-theme .whiteButt:hover{background-color:#475f85}header button:focus,nav button:focus{outline:2px solid hsl(3,86%,64%);outline-offset:2px}.cards-layout{width:95%;max-width:1400px;margin:0 auto;padding:0;display:flex;flex-direction:column;align-items:center;gap:20px}@media only screen and (min-width: 600px){.cards-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,380px));gap:20px;justify-content:center}nav{flex-direction:row;justify-content:space-between}}article{background-color:#fbfdfe;padding:15px;border-radius:15px;min-width:260px;width:100%;max-width:380px;box-shadow:3px 3px 15px #2c2e503d;box-sizing:border-box}body.dark-theme article{background-color:#2d3b53;box-shadow:3px 3px 15px #0006}#content{display:flex;flex-direction:row;align-items:flex-start}h2{margin-top:0;margin-bottom:0;margin-left:15px;font-size:20px;font-weight:700;color:#09153e}body.dark-theme h2{color:#fbfdfe}p{margin-left:15px;margin-top:5px;font-size:16px;color:#545969}body.dark-theme p{color:#aaaebb}#buttons{display:flex;justify-content:space-between;align-items:center}#remove{background-color:#fbfdfe;border-radius:20px;padding:8px 15px;font-size:16px;font-weight:400;color:#09153e;border:1px solid hsl(0,0%,78%);margin-left:5px;margin-right:5px}#remove:hover{background-color:#c7221a;color:#fbfdfe}#remove:focus{background-color:#c7c7c7;color:#09153e;border:1px solid hsl(3,77%,44%)}body.dark-theme #remove{background-color:#2d3b53;color:#fbfdfe;border:1px solid hsl(217,30%,45%)}body.dark-theme #remove:hover{background-color:#c7221a;color:#fbfdfe}.toggle-btn{display:flex;align-items:center;border:none;padding:0;margin-right:10px;width:45px;height:23px;border-radius:20px;background-color:#c7c7c7;position:relative;overflow:hidden}.toggle-btn.active{background-color:#c7221a}.toggle-btn.active:hover{background-color:#de473f}.knob{position:absolute;top:1.5px;left:2px;width:20px;height:20px;background-color:#fbfdfe;border-radius:50%;box-shadow:1px 1px 2px #140d3f39;transition:left .3s ease}.toggle-btn.active .knob{left:22px}.knob-animate{animation:knobMove .3s ease}@keyframes knobMove{0%{transform:scale(1)}30%{transform:scale(1.2)}to{transform:scale(1)}}