.color-picker-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px;background-color:var(--bg-color);transition:background-color .3s,color .3s;color:var(--text-color);width:100%}.color-picker-ad1{margin-top:40px}.color-picker-container h1{font-size:min(6vw,40px)}.sketch-and-circle-container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;width:100%;border:5px solid var(--text-color);border-radius:5px;padding:20px 0}[data-theme=dark] .sketch-and-circle-container{background-color:var(--color-lightBlack)}.sketch-picker{width:100%!important;max-width:400px}[data-theme=dark] .sketch-picker{background-color:var(--color-lightBlack)!important;transition:background-color .3s,color .3s}.circle-picker{width:100%!important;max-width:300px;padding:10px;background-color:#fff;border-radius:5px}.swatches-picker{width:100%!important}.color-picker-explanation{max-width:1000px;margin:40px auto;padding:0 20px}.color-picker-explanation h2{text-align:center;margin-bottom:30px;font-size:2rem;color:var(--text-color)}.explanation-grid{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:40px}.explanation-card{flex:1 1 300px;padding:25px;border-radius:8px;box-shadow:0 4px 6px #0000001a}.explanation-card h3{color:var(--primary-color);margin-bottom:15px;font-size:1.3rem}.explanation-card p{line-height:1.6;color:var(--text-color)}.features-list{padding:25px;border-radius:8px}.features-list h3{color:var(--primary-color);margin-bottom:15px;font-size:1.3rem}.features-list li{padding-left:15px;margin-bottom:10px}[data-theme=dark] .explanation-card,[data-theme=dark] .features-list,[data-theme=dark] .circle-picker{background:var(--color-lightBlack);box-shadow:0 4px 6px #0000004d;transition:background-color .3s,color .3s}@media (max-width: 768px){.sketch-picker{width:100%!important;max-width:275px}}@media (max-width: 320px){.sketch-picker{max-width:250px}}