#toggle-container{padding:20px;margin:10px auto;border-radius:10px;width:calc(100% - 20px);max-width:760px;text-align:center;background:#fff;box-shadow:0 0 10px #0000001a}#toggle-button{cursor:pointer;color:#fff;border:none;width:fit-content;padding:10px 20px;border-radius:5px;background:#007bff;transition:background .3s ease}#toggle-button:hover{background:#0056b3}#message{margin-top:20px;font-size:1.125rem;color:#333}#color-picker-container{display:flex;justify-content:flex-start;align-items:center;flex-direction:column;height:50vh;width:calc(100% - 20px);max-width:760px;margin:10px auto;border-radius:10px;background-color:#fff}#color-picker-container input[type=color]{position:absolute;margin-top:50px;height:40px}#search-container{text-align:center;background:#fff;padding:20px;border-radius:10px;width:calc(100% - 20px);max-width:760px;margin:10px auto;box-shadow:0 0 10px #0000001a}#search-container #search-input{padding:10px;width:80%;border:1px solid #ccc;border-radius:5px;margin-bottom:10px}#search-container #results{text-align:left;max-height:150px;overflow-y:auto}#search-container .result-item{padding:5px;border-bottom:1px solid #ddd}.otp-generator-container{padding:20px;margin:10px auto;border-radius:10px;width:calc(100% - 20px);max-width:760px;text-align:center;color:#030712;background:#fff;box-shadow:0 0 10px #0000001a}.otp-generator-container #otp-title{color:#020618}.otp-generator-container #otp-display{color:#364153}.otp-generator-container #otp-timer{color:#4a5565}.otp-generator-container button{color:#fff;width:fit-content;background-color:#101828}.otp-generator-container button:hover{background-color:#364153}body{background:linear-gradient(30deg,#f99 50%,#69f 50%)}.form-wrap{padding:20px;margin:10px auto;width:calc(100% - 20px);max-width:760px;border-radius:10px;background-color:#fff;box-shadow:5px 5px 10px #000}.form-wrap h2,.form-wrap p{text-align:center}.form-wrap p{position:relative;top:-18px}.form-wrap form{display:flex;flex-direction:column;align-items:center}.form-wrap .section{display:flex;margin-bottom:30px;flex-wrap:wrap;gap:10px}.form-wrap .column{flex-direction:column;width:100%;max-width:560px}.form-wrap .submit-wrap{text-align:center}.form-wrap .submit-btn{display:block;margin:0 auto;width:fit-content;padding:.4rem .5rem;border:1px solid black}.form-wrap .submit-btn:hover{cursor:pointer;background-color:#f3f3f3}.form-wrap .submit-btn:disabled{cursor:not-allowed}.form-container{background-color:#fff;width:calc(100% - 20px);max-width:760px;padding:20px;margin:10px auto;border-radius:10px;box-shadow:5px 5px 10px #000}.form-container h2,.form-container p{text-align:center}.form-container input{display:block;padding:10px;width:calc(100% - 22px);border:1px solid #ccc;border-radius:5px;margin-bottom:10px;background-color:#f5f5f5;font-size:1em}.form-container input[type=checkbox]{display:inline-block;margin-left:10px;width:auto}.form-container .results-title{color:#535bf2}.form-container .results p{font-weight:700}.form-container .results span{font-weight:500}.form-container button{display:block;cursor:pointer;color:#fff;width:100%;margin-top:20px;padding:.6em 1.2em;border-radius:8px;border:1px solid transparent;font-size:1em;font-weight:500;font-family:inherit;background-color:#646cff;transition:border-color .25s}.form-container button:hover{border-color:#646cff;background-color:#535bf2}.form-container button:focus,.form-container button:focus-visible{outline:4px auto #ffd230}:root{--dark-grey: #1b1b32;--light-grey: #f5f6f7;--dark-orange: #f89808;--yellow: #f1be32;--golden-yellow: #feac32}.shopping-list-container{padding:20px;margin:10px auto;width:calc(100% - 20px);max-width:760px;border-radius:10px;background-color:var(--light-grey)}.shopping-list-container h1{color:var(--dark-grey)}.shopping-list-container form{text-align:center}.shopping-list-container button{cursor:pointer}button{cursor:pointer;width:100px;margin:3px;color:var(--dark-grey);background-color:var(--golden-yellow);background-image:linear-gradient(#fecc4c,#ffac33);border-color:var(--golden-yellow);border-width:3px}button:hover{background-image:linear-gradient(#ffcc4c,#f89808)}input{color:var(--dark-grey);margin-left:5px;padding:3px}li{text-align:left;margin:10px 0}.selected-item{font-weight:700}@media(min-width:425px){.container{width:400px}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#242424;color:#ffffffde;background-color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.sidebar{padding:25px;border-radius:10px;margin:10px auto;width:calc(100% - 20px);max-width:760px;background:#f5f5f580}.layout{width:100vw}ul{list-style:none}*,*:before,*:after{box-sizing:border-box}body{font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;background-color:#f4f4f4;min-height:100vh;color:#1b1b32;background-color:#1b1b32}h1{width:calc(100% - 20px);max-width:760px;margin:auto}