*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}html{font-size:62.5%}:root{--color-background-red: #ff0000;--color-violet: #410445;--color-purple: #a5158c;--color-cyan-light: #60daff45;--color-pink: #ff2df1;--color-yellow: #f6dc43;--color-text-black: #242424;--color-text-white: #fff;--font-system-ui: system-ui, Avenir, Helvetica, Arial, sans-serif}body{height:100dvh;font-family:var(--font-system-ui);display:flex;justify-content:center;align-items:center}textarea{resize:none;border-radius:5px;padding:4px}@media screen and (max-width: 1440px){body{height:auto;padding:5rem}}.app{text-align:center;font-family:var(--font-system-ui);font-weight:600;font-size:1.6rem;color:var(--color-text-black)}.app__title{font-size:6rem;line-height:1;margin-bottom:5rem;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.app__title-span-1,.app__title-span-3{position:relative;padding:0 2rem;color:var(--color-purple);text-shadow:0 0 2px var(--color-text-white),0 0 5px var(--color-purple),0 0 4px var(--color-purple)}.app__title-span-1:before,.app__title-span-1:after,.app__title-span-3:before,.app__title-span-3:after{color:var(--color-purple);content:"";position:absolute;right:0;left:0;height:calc(40% - 5px);border:4px solid var(--color-purple)}.app__title-span-1:before,.app__title-span-3:before{border-bottom-width:0}.app__title-span-1:after,.app__title-span-3:after{bottom:0;border-top-width:0}.app__title-span-2{padding:0 2rem;background-color:var(--color-background-red);color:var(--color-text-white);border-radius:19px}.workbench{display:flex;gap:3rem;width:100%}.workbench__controls{display:flex;flex-direction:column;gap:.5rem;text-align:right;width:25rem}.workbench__preview,.workbench__controls{border:1px solid #ccc;padding:1rem;border-radius:5px;box-shadow:0 0 16px #0000004d}.workbench__textarea{padding:.5rem;border-radius:5px;border:1px solid #ccc;font-family:var(--font-system-ui)}.workbench__input-font-weight,.workbench__input-border,.workbench__input-box-shadow-x,.workbench__input-box-shadow-y,.workbench__input-box-shadow-blur,.workbench__input-box-shadow-spread{width:5rem;height:3rem;border-radius:5px}.workbench__button-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100px}.workbench__button{cursor:pointer}.workbench__code-area-wrapper{position:relative}.workbench__copy-button{position:absolute;bottom:10px;right:16px;border:none;background:none;color:#ccc;padding:.3rem;cursor:pointer}.workbench__icon-copy{fill:#727d8c;transition:fill .1s ease-in-out}.workbench__icon-copy:hover{fill:#464646}.workbench__input-color,.workbench__box-shadow-color{display:flex;justify-content:space-between}.workbench__font-color-preview,.workbench__background-color-preview,.workbench__border-color-preview,.workbench__box-shadow-color-preview{font-size:1.4rem;border:1px solid #ccc;padding:.5rem;border-radius:5px}input[type=color]{width:3rem;border-radius:5px;border:1px solid #ccc}.footer{margin-top:2rem}.footer__text{display:flex;justify-content:center;align-items:center;gap:2rem}.footer__tooltip{position:relative;fill:var(--color-text-black)}.footer__tooltip:hover{transform:scale(1.1)}.footer__tooltip:after{content:"GitHub";position:absolute;top:50%;left:50%;transform:translate(-50%,50%);opacity:0;color:var(--color-text-white);background-color:var(--color-text-black);border-radius:5px;pointer-events:none;transition:all .1s ease-in-out}.footer__tooltip:hover:after{opacity:1;pointer-events:none;padding:0 .5rem;transform:translate(-50%,100%)}.label{border:1px solid #ccc;padding:0 .5rem;border-radius:5px;width:fit-content;background-color:var(--color-cyan-light);margin:.5rem 0}.workbench__padding-y,.workbench__padding-x{width:60px}.workbench__input-radius-span{width:35px}.workbench__input-font-size-wrapper,.workbench__input-font-weight-wrapper,.workbench__text-padding-y,.workbench__text-padding-x,.workbench__input-radius-wrapper,.workbench__input-border-wrapper,.workbench__box-shadow-x,.workbench__box-shadow-y,.workbench__box-shadow-blur,.workbench__box-shadow-spread{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.workbench__input-font-size,.workbench__input-font-weight,.workbench__input-border,.workbench__input-box-shadow-x,.workbench__input-box-shadow-y,.workbench__input-box-shadow-blur,.workbench__input-box-shadow-spread,.workbench__input-padding-x,.workbench__input-padding-y,.workbench__input-radius{flex-grow:1;margin-right:1rem}.workbench__input-font-size-span,.workbench__input-font-weight-span,.workbench__input-border-span{width:35px}.workbench__shadow-x,.workbench__shadow-y,.workbench__box-shadow-blur-span,.workbench__box-shadow-spread-span{width:66px}.workbench__box-shadow-blur-span{width:80px}.workbench__box-shadow-spread-span{width:100px}