@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";html{scroll-behavior:smooth}*{font-family:Lato,sans-serif;text-decoration:none;border:none;outline:none;font-size:1rem;font-weight:400;margin:0;padding:0;box-sizing:border-box}button,a,input[type=checkbox]{cursor:pointer}body{color:#444;background-color:#fff;transition:all .2s ease-in-out}body.dark{color:#eee;background-color:#1d2a35}.container{max-width:1100px;margin:0 auto;padding:0 20px}.main-header{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:4;justify-content:end}.main-header button{display:grid;place-items:center;background-color:transparent;width:32px;aspect-ratio:1/1;border:1px solid #a3a3a3;border-radius:6px;color:#333}.main-header button:focus{border:1.5px solid #3b82f6}body.dark .main-header button{color:#eee}main.container{display:grid;align-items:stretch;gap:4;align-items:center;grid-template-columns:1fr 1fr;max-width:900px;gap:40px;padding-top:20px;padding-bottom:40px}main.container .inputs{border:1px solid #a3a3a3;border-radius:6px;overflow:hidden}.inputs .input-field{display:flex;align-items:center;justify-content:space-between;gap:4;gap:4px;padding-block:16px;padding-inline:14px;border-bottom:1px dotted #a3a3a3}.inputs .input-field:last-child{border:none}.inputs .input-field div{display:flex;align-items:center;gap:4px}.inputs .input-field div input[type=text]{border:1px solid #a3a3a3;width:40px;padding:2px 4px;font-size:.875rem;background:transparent;color:#737373;border-radius:6px}.inputs .input-field div input[type=text].input-lg{width:70px}.inputs .input-field div input[type=color]{width:50px;height:22px;border:1px solid #a3a3a3;border-radius:6px}.inputs .input-field div input[type=checkbox]{transform:scale(1.6);accent-color:#16a34a;color:#fff;box-shadow:0 0 #a3a3a3}.box-elem{padding-block:50px;padding-inline:14px;display:grid;place-items:center;border:1px solid #a3a3a3;border-radius:6px;margin-bottom:20px}.box-elem button{background-color:#2563eb;padding:6px 10px;width:200px;height:100px;padding-block:12px;color:#fff}.code-box{padding-block:30px;padding-top:40px;padding-inline:14px;display:grid;place-items:center;border:1px solid #a3a3a3;border-radius:6px;position:relative}.code-box code p{font-size:.875rem;line-height:1.8}.code-box .copy-btn{display:flex;align-items:center;gap:4px;position:absolute;top:10px;right:14px;cursor:pointer}.code-box .copy-btn span{font-size:.75rem}@media screen and (max-width: 670px){main.container{grid-template-columns:1fr}}