@import "https://fonts.bunny.net/css?family=poppins:100,200,300,400,600,700,800,900";:root{--color1:#5f4cb4}*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body{background-color:#224363}.container{color:#fff;background-color:#333;border-radius:10px;width:80vmin;padding:4em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 40px #022a534d}.result{padding:2.5em 0 5em}.preview{background-color:var(--color1);border-radius:50px;width:200px;height:200px;margin:auto;position:relative;box-shadow:-6px 15px 30px 6px #00000080}.settings{grid-template-columns:6fr 6fr;gap:10px;margin-bottom:1.5em;display:grid}.range-wrapper,.color-wrapper{flex-direction:column;justify-content:space-between;display:flex}input[type=range]{cursor:pointer;width:100%}input[type=color]{cursor:pointer;border:1px solid #ccc;width:25px;height:25px}input[type=checkbox]{cursor:pointer}label{font-size:.92rem}.code-container{grid-template-columns:6fr 2fr;gap:10px;display:grid}.button{background-color:var(--color1);color:#fff;cursor:pointer;border:none;border-radius:5px;padding:1em}textarea{resize:none;border:1px solid gray;border-radius:5px;width:100%;padding:10px;font-family:Courier New,Courier,monospace;font-size:12px}.color-wrapper{justify-content:row;flex-direction:row;align-items:center;gap:5px;display:flex}.input-wrapper{flex-direction:row;justify-content:flex-start;align-items:center;gap:5px;display:flex}