[data-v-028a3b4e]::-webkit-scrollbar{width:var(--scrollbar-width)}[data-v-028a3b4e]::-webkit-scrollbar-track{background:var(--track-color);border-radius:var(--scrollbar-border-radius)}[data-v-028a3b4e]::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:var(--scrollbar-border-radius);border:var(--scrollbar-thumb-border-width) solid var(--scrollbar-thumb-border-color)}ul[data-v-028a3b4e]{margin:1rem 1rem 1rem 0}.highlight[data-v-028a3b4e]{background-color:#232e33;padding:.1rem .2rem;border-radius:5px;color:#ffffffc4;transition:color .2s,background-color .5s}.link[data-v-028a3b4e]{text-decoration:none}.link:hover .highlight[data-v-028a3b4e]{background-color:#6baf8d}.container[data-v-028a3b4e]{height:60vh;overflow-y:scroll;scrollbar-color:var(--thumb-color) var(--track-color);scrollbar-width:thin;padding:1rem;background-color:var(--color-preview-background);transition:color .2s,background-color .5s;border:1px solid var(--color-preview-border);border-radius:6px}.githubStarBtn[data-v-028a3b4e]{color:gray;display:inline-flex;margin:0 .2rem}.githubStarBtn[data-v-028a3b4e]:hover{color:#fff}.githubStarBtn.light[data-v-028a3b4e]:hover{color:#2c3e50}.previewHeader[data-v-028a3b4e]{color:#ffffffe3}.previewHeader.light[data-v-028a3b4e]{color:#000}.githubSpan[data-v-028a3b4e]{display:flex;align-items:center;flex-direction:columns;width:fit-content;border-radius:5px;margin:auto;padding:.5rem 1rem;text-decoration:none;margin-bottom:3rem}svg[data-v-028a3b4e]{stroke:var(--color-text)}.githubSpan:hover svg[data-v-028a3b4e]{stroke:#6caf8c;fill:#6caf8c}li[data-v-028a3b4e]{line-height:2rem}h1[data-v-028a3b4e]{font-weight:500;font-size:2.6rem;top:-10px}h3[data-v-028a3b4e]{font-size:1.2rem}p[data-v-028a3b4e]{margin:1rem 1rem 1rem 0;line-height:1.7}.last[data-v-028a3b4e]{margin-bottom:7rem}@media (min-width: 1024px){.greetings h1[data-v-028a3b4e],.greetings h3[data-v-028a3b4e]{text-align:left}}.colorPickerContainer[data-v-136754db]{position:absolute;z-index:1}.vc-chrome-alpha-wrap[data-v-136754db]{display:none!important}.vc-checkerboard[data-v-136754db]{display:none}.vc-chrome-controls[data-v-136754db]{display:flex!important;align-items:center!important}.vc-chrome-fields-wrap[data-v-136754db]{display:none}.numberInputContainer[data-v-5d909b60]{display:inline-flex;justify-content:space-between;min-width:78px;align-items:center}.btn[data-v-5d909b60]{background-color:transparent;border:none;outline:none;color:#fff;cursor:pointer}.btn.light[data-v-5d909b60]{color:#2c3e50}.toggle-container[data-v-d18460a0]{display:flex;justify-content:left;align-items:center;padding:10px 10px 0 0;cursor:pointer}.theme-btn[data-v-d18460a0]:hover{background-color:var(--color-highlight);color:var(--color-text-strong)}.theme-btn span[data-v-d18460a0]{margin-left:.5rem}.theme-btn span[data-v-d18460a0]::selection{background-color:transparent}.theme-btn[data-v-d18460a0]{display:flex;justify-content:center;padding:.5rem 1rem;align-items:center;border-radius:7px}.mainContainer[data-v-a61c0070]{display:grid;grid-template-columns:1fr 2fr;grid-column-gap:100px;width:45%;margin:1rem auto}.colorBox[data-v-a61c0070]{height:20px;width:20px;display:block;border-radius:7px;position:relative}.colorBox[data-v-a61c0070]:hover{cursor:pointer}.alert[data-v-a61c0070]{color:#ce5c5c;display:flex;align-items:center}.isFirefoxMsg[data-v-a61c0070]{margin-top:1rem}.alertMsg[data-v-a61c0070]{margin-left:1rem}.colorPickerContainer[data-v-a61c0070],.scrollBarSettingContiner[data-v-a61c0070]{display:flex;flex-direction:row;justify-content:space-between;margin:1rem 0}.toggleBtn[data-v-a61c0070]{display:flex;align-items:center;justify-content:center}code[data-v-a61c0070]{height:500px;overflow-y:scroll;background:#232e3363;background:var(--color-preview-background);border-radius:5px;border:1px solid var(--color-preview-border);padding:2rem;display:block;margin-top:1rem}@supports not selector(::-webkit-scrollbar){code[data-v-a61c0070]{scrollbar-color:var(--thumb-color) var(--track-color);scrollbar-width:auto}}code[data-v-a61c0070]::-webkit-scrollbar{width:var(--scrollbar-width)}code[data-v-a61c0070]::-webkit-scrollbar-track{background:var(--track-color);border-radius:var(--scrollbar-border-radius)}code[data-v-a61c0070]::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:var(--scrollbar-border-radius);border:var(--scrollbar-thumb-border-width) solid var(--scrollbar-thumb-border-color)}header[data-v-a61c0070]{display:flex;flex-direction:row;margin:3rem auto;width:fit-content}h2[data-v-a61c0070]{color:#ffffffe3}h2.light[data-v-a61c0070]{color:#000}h3[data-v-a61c0070]{color:#ffffffe3}h3.light[data-v-a61c0070]{color:#000}.btn[data-v-a61c0070]{display:block;border:none;outline:none;background-image:linear-gradient(90deg,#6baf8d,#6b8d8d,#6baf8d);border-radius:10px;cursor:pointer;width:170px;margin-top:20px;padding:15px 45px;text-align:center;text-transform:uppercase;transition:.5s;background-size:200% auto;color:#fff}.btn[data-v-a61c0070]:hover{background-position:right center;color:#fff;text-decoration:none}.logo[data-v-a61c0070]{width:50px}.title[data-v-a61c0070]{margin-left:1rem}.githubBtnContainer[data-v-a61c0070]{margin:4rem auto;cursor:pointer}.firefoxMsgContainer[data-v-a61c0070]{background:#000000;padding:1rem;border-radius:10px}.githubBtn[data-v-a61c0070]:hover{color:#ffffffe3}.githubBtn[data-v-a61c0070]{display:flex;align-items:center;margin:0 auto;width:fit-content;color:#ebebeba3;text-decoration:none}.githubBtn.light[data-v-a61c0070]{color:#000}.highlight[data-v-a61c0070]{background-color:var(--color-highlight-dark);padding:.1rem .2rem;border-radius:5px;color:#ffffffc4}.githubBtn img[data-v-a61c0070]{margin-right:1rem}.githubLogo[data-v-a61c0070]{width:32px}@media screen and (max-width: 2240px){.mainContainer[data-v-a61c0070]{width:60%}}@media screen and (max-width: 1570px){.mainContainer[data-v-a61c0070]{width:70%}}@media screen and (max-width: 1260px){.mainContainer[data-v-a61c0070]{width:80%}}@media screen and (max-width: 1100px){.mainContainer[data-v-a61c0070]{grid-template-areas:"settings settings settings" "settings settings settings" "code code code";grid-template-rows:auto}.githubBtnContainer[data-v-a61c0070]{display:none}.settingsContainer[data-v-a61c0070]{grid-area:settings}.codeOutputContainer[data-v-a61c0070]{grid-area:code}.scrollPreviewContainer[data-v-a61c0070]{grid-area:preview}}@media screen and (max-width: 770px){.mainContainer[data-v-a61c0070]{grid-template-areas:"settings settings settings" "preview preview preview" "code code code";grid-template-rows:auto}}:root{--vt-c-white: #fbfbfb;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-preview-background: #fff;--vt-c-black: #0d1117;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .91);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}:root{--color-background: var(--vt-c-black);--color-background-light: var(--vt-c-white);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2);--color-text-light: var(--vt-c-text-light-2);--color-preview-background: #232e3363;--color-preview-border: #ffffff0d;--color-highlight-dark: var(--vt-c-black);--color-highlight: #232e3363;--color-highlight-light: #ececec;--color-text-strong: var(--vt-c-white);--section-gap: 160px}*,*:before,*:after{box-sizing:border-box;margin:0;position:relative;font-weight:400}body{color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.light-mode{color:var(--color-text-light);background:var(--color-background-light);--color-preview-background: var(--vt-c-preview-background);--color-preview-border: rgba(0, 0, 0, .095);--color-highlight: var(--color-highlight-light);--color-text-strong: #000;--color-text: var(--vt-c-text-light-2)}body.light-mode .highlight{background:var(--color-highlight);color:#0d1117}.vc-chrome-alpha-wrap{display:none!important}.vc-checkerboard{display:none}.vc-chrome-controls{display:flex!important;align-items:center!important}.vc-chrome-fields-wrap{display:none}::selection{background:rgba(107,175,141,.1)}