*{padding:0;margin:0;box-sizing:border-box}body{background-image:linear-gradient(90deg,#ebf2fc,#eef8f9);font-family:Noto Sans,sans-serif;font-size:16px}body.dark-mood{background-image:linear-gradient(90deg,#040918,#091540)}.external-continer{margin:0 auto;padding:3em 10em}nav{display:flex;justify-content:space-between;background-color:#fbfdfe;padding:1em;border-radius:20px;margin-bottom:3em}body.dark-mood nav{background-color:#ffffffb2}nav button{padding:.4em;border-radius:15px;border:none;cursor:pointer}nav button img{padding:.5em}nav button:focus{outline:2px solid hsl(3,77%,44%)}body.dark-mood nav button:hover{background-color:#09153e}nav button:hover{background-color:#c7c7c7}.menu{display:flex;justify-content:space-between}body.dark-mood .menu h1{color:#fff}.menu h1{color:#09153e;font-weight:900}.btn-states{width:100%;max-width:300px;max-height:100px;display:flex;justify-content:space-between;align-items:center}body.dark-mood .btn-states button{color:#fff;background-color:#2f364b}.btn-states button{padding:1em 1.5em;border-radius:25px;border:1px solid hsla(226,11%,37%,.4);cursor:pointer;color:#212636;background-color:#fbfdfe;font-weight:500;font-size:1.1em}body.dark-mood .btn-states button:focus{color:#212636;background-color:#de473f}.btn-states button:focus{background-color:#de473f;color:#fbfdfe}.main-div{display:flex;flex-wrap:wrap;width:100%}body.dark-mood .individual-card{background-color:#212636;box-shadow:none;border:.5px solid hsl(226,11%,37%)}.individual-card{background-color:#fbfdfe;margin:1em;padding:1em;width:100%;max-width:calc((100% - 1em)/3.22);border-radius:15px;box-shadow:1px 1px 10px #c7c7c7;border:.5px solid hsl(217,61%,90%)}body.dark-mood .individual-card div:first-of-type{color:#fff}.individual-card div:first-of-type{display:flex;align-items:flex-start;color:#09153e}.individual-card div:first-of-type img{margin-right:15px}body.dark-mood .individual-card div:first-of-type p{color:#c7c7c7a1}.individual-card div:first-of-type p{color:#545969;margin-top:5px}.active-remove-btn{display:flex;justify-content:space-between;align-items:center;margin-top:2em}body.dark-mood .active-remove-btn button{color:#fff;background-color:#212636;border:1px solid hsl(226,11%,37%)}.active-remove-btn button{padding:10px 20px;border:2px solid hsl(0,0%,78%);color:#09153e;background-color:#fff;border-radius:20px;cursor:pointer;font-weight:500}body.dark-mood .active-remove-btn button:focus{background-color:#c7221a;color:#09153e;outline:none}.active-remove-btn button:focus{outline:2px solid hsl(3,77%,44%);background-color:#c7c7c766;color:#09153e}.active-remove-btn button:hover{background-color:#c7221a;color:#fff}body.dark-mood .checkBox{background-color:#545969}.checkBox{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:46px;height:24px;background-color:#c7c7c7;border-radius:34px;position:relative;outline:none;cursor:pointer}.checkBox:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background-color:#fff;border-radius:50%;transition:transform .3s}.checkBox:checked,body.dark-mood .checkBox:checked{background-color:#c7221a}.checkBox:focus{outline:2px solid hsl(3,77%,44%)}.checkBox:checked:before{transform:translate(22px)}@media screen and (max-width: 480px){.external-continer{padding:1rem 2rem}nav{width:100%;max-width:90%;margin:0 auto 1.5em}.menu{margin:0 auto 1em;flex-direction:column;align-items:center}.btn-states{width:100%;max-width:350px;max-height:40px;display:flex;justify-content:space-around;align-items:center;margin-top:1.2em}.main-div{flex-direction:column;align-items:center}.individual-card{width:100%;max-width:calc(100% - 3rem)}}@media screen and (min-width: 481px) and (max-width: 600px){.external-continer{padding:1rem 2rem}nav{width:100%;max-width:95%;margin:0 auto 1em}.menu{margin:0 auto 1em;flex-direction:column;align-items:center}.btn-states{max-width:350px;max-height:40px;display:flex;justify-content:space-around;align-items:center;margin-top:1.2em}.main-div{flex-direction:column;align-items:center}.individual-card{width:100%;max-width:calc(100% - 5rem)}}@media screen and (min-width: 601px) and (max-width: 768px){.external-continer{padding:1.5em}nav{width:100%;max-width:95%;margin:0 auto 1.5em}.menu{margin:0 auto 2em;align-items:center}.menu h1{font-size:1.7em}.btn-states{width:100%;max-width:350px;max-height:50px;margin-top:.5em;justify-content:space-evenly}.individual-card{width:100%;max-width:calc((100% - 4rem)/2)}}@media screen and (min-width: 769px) and (max-width: 992px){.external-continer{padding:1.5em 2em}nav{width:100%;max-width:95%;margin:0 auto 1.5em}.menu{margin:0 auto 2em;align-items:center}.btn-states{width:100%;max-width:350px;max-height:50px;margin-top:.5em}.individual-card{width:100%;max-width:calc((100% - 4rem)/2)}}@media screen and (min-width: 993px){.external-continer{padding:1.5em 2em}nav{width:100%;max-width:95%;margin:0 auto 1.5em}.menu{margin:0 auto 2em;align-items:center}.btn-states{width:100%;max-width:350px;max-height:50px;margin-top:.5em}.individual-card{width:100%;max-width:calc((100% - 6rem) / 3)}}