*{-webkit-user-select:none;user-select:none;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{width:100%}.app{background-color:#ecf5fc;height:auto;padding-bottom:4rem}.app.dark{background:linear-gradient(#050a1e,#0a1540)}.app-wrap{width:70%;margin:auto;padding-top:50px}@media (max-width:480px){body{width:100%}.app{height:auto}.app-wrap{width:70%;margin:auto}}header{width:100%;height:100px}.header-wrap{background-color:#d3d3d34d;border-radius:20px;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.icons{cursor:pointer;justify-content:center;align-items:center;font-size:1.5rem;display:flex}.FaSun{color:#f0f8ff}@media (max-width:480px){header{width:100%}.logo img{width:8rem}}.section-1{color:#fff;justify-content:space-between;align-items:center;width:100%;display:flex}.section-1 h3{font-size:1.5rem}.s-h3.on{color:#000}.section-1 button{color:#fff;cursor:pointer;background-color:#d3d3d34d;border:none;border-radius:1rem;padding:.7rem;transition:all .5s}.section-1 button:hover{background-color:tomato}.section-1 .buttons{justify-content:center;align-items:center;column-gap:.6rem;display:flex}.btn.on{color:#000}@media (max-width:480px){.section-1{flex-direction:column;justify-content:center;align-items:center;row-gap:2rem;display:flex}}.container{grid-template-columns:1fr 1fr 1fr;display:grid}.main{width:100%;margin-top:2rem}.card{background-color:#575c69;border-radius:20px;flex-direction:column;row-gap:3rem;width:22.5rem;height:10rem;padding:1rem;display:flex}.card.on{background-color:#fff}.card-content{align-items:center;column-gap:.8rem;height:4.5rem;display:flex}.generic{justify-content:space-between;align-items:center;display:flex}.generic button{color:#fff;cursor:pointer;background-color:#0000;border:1px solid #d3d3d3;border-radius:10px;padding:8px 12px}.btn-1{transition:all .5s}.btn-1:hover{background-color:tomato}.btn-1.on{color:#000}.toggle{cursor:pointer;background-color:#ccc;border-radius:20px;width:50px;height:24px;transition:all .5s;position:relative}.toggle.on{background-color:tomato}.knob{background-color:#fff;border-radius:50%;width:20px;height:20px;transition:left .5s;position:absolute;top:2px;left:2px}.toggle.on .knob{left:28px}@media (max-width:480px){.container{grid-template-columns:1fr}.card{width:14rem;height:10rem}}