*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body[data-theme=dark]{--primary: rgb(234 233 255);--secondary: rgb(70 70 71);--form-bg: rgb(56 84 106);--lighting: rgb(142, 155, 178);--color-marker: rgb(94, 255, 209);--warning: #ffaa49}body[data-theme=light]{--primary: rgb(73 67 104);--secondary: rgb(250 250 250);--form-bg: rgb(150 222 255);--lighting: rgb(214 249 255);--color-marker: rgb(40 87 255);--warning: rgb(240 255 237);--warning: #ffea00}body{font-size:26px;background-color:var(--secondary);color:var(--primary)}.app{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 15px}.app__content{display:grid;grid-template-columns:1fr 2fr;align-items:start;gap:35px}@media (max-width: 768px){.app__content{grid-template-columns:auto}}.app__info+*{margin-top:50px}.app__info-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}@media screen and (max-width: 564px){.app__info-list{grid-template-columns:auto}}.app__info-list li{font-size:20px;display:flex;align-items:center;gap:5px}.app__info-list li h2{font-size:clamp(18px,3.3vw,28px)}.app__info-list li span{color:var(--color-marker);font-size:26px}.container{margin:0 auto;max-width:1440px}.icon{color:inherit;width:25px;height:25px}.relative{position:relative;z-index:1}:root{--info: white;--info-bg: lightslategray;--main-radius: 8px;--main-padding: 8px}.btn{border-radius:var(--main-radius);padding:4px 2px;background-color:var(--lighting);color:inherit;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:clamp(18px,3vw,24px);border:none;transition:.2s ease-in}.btn:hover,.btn:focus{color:var(--secondary);background-color:var(--primary);box-shadow:0 0 5px 4px var(--color-marker)}.btn--theme{padding:var(--main-padding);font-size:clamp(16px,3vw,18px)}.btn__animate{animation:completedCopy .3s ease-in-out}@keyframes completedCopy{0%{transform:translateY(10px) scale(.1)}to{transform:translateY(-10) scale(1)}}.header{width:100%;display:flex;flex-direction:column;align-items:center;padding:var(--main-padding);padding-top:24px}.header+*{margin-top:50px}.header__panel{width:100%;display:flex;justify-content:space-between;align-items:center;gap:30px}.header__logo a{display:flex;align-items:center;justify-content:center}.header__logo img{max-width:46px;max-width:clamp(20px,3.69vw,46px)}.header__title{font-size:clamp(25px,3.2vw,34px)}.header__title+*{margin-top:30px}.header__description{font-size:clamp(22px,3vw,25px)}.form{background-color:var(--form-bg);border-radius:var(--main-radius);padding:var(--main-padding);display:grid;gap:20px;position:relative}@media (max-width: 768px){.form+*{margin-top:20px}}.form__item{display:grid}.form__label{font-size:clamp(22px,3vw,25px)}.form__label+input{margin-top:10px}.form__input{border-radius:var(--main-radius);padding:var(--main-padding);background-color:var(--secondary);font-size:clamp(20px,3.2vw,30px);color:var(--color-marker);border:none;transition:.2s ease-in}.form__input:hover,.form__input:focus{box-shadow:0 0 5px 4px var(--color-marker)}.result{max-width:800px;margin-bottom:30px}.result__list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 10px;list-style:none;counter-reset:list-counter}@media screen and (max-width: 1234px){.result__list{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width: 1024px){.result__list{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 940px){.result__list{grid-template-columns:auto}}.result__item{display:grid;grid-template-columns:4fr 1fr;gap:10px;align-items:center;counter-increment:list-counter;position:relative;margin-left:30px}.result__item:before{content:counter(list-counter);position:absolute;display:flex;justify-content:end;width:20px;height:auto;color:var(--primary);font-size:20px;left:-25px}.result__item code{pointer-events:none}.result__item--disabled{opacity:.4;text-decoration:line-through}.result__item--disabled:has(code:hover){text-decoration:none}.result__item--disabled code{cursor:pointer;pointer-events:all}.result__item--disabled button{pointer-events:none}.result__content{border-radius:var(--main-radius);background-color:var(--lighting);padding:var(--main-padding);color:var(--color-marker);font-size:clamp(15px,3.2vw,20px)}.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;justify-content:center;align-items:center;display:flex;gap:15px;text-wrap:balance}.modal__content{background-color:var(--info-bg);color:var(--info);padding:var(--main-padding);border-radius:var(--main-radius)}.modal__btn{background-color:var(--info-bg);color:var(--info)}.modal--warning{color:var(--warning)}.modal--animate{animation:animateModal 1.5s ease}.modal--animate-warning{animation:animateWarning .3s ease}.modal--animate-warning-reverse{animation:animateWarningReverse .3s ease}@keyframes animateModal{0%{transform:translate(-150%) rotate(3deg)}25%{transform:translate(-50%) rotate(0)}50%{transform:translate(-50%) rotate(0)}75%{transform:translate(-50%) rotate(0)}to{transform:translate(-350%) rotate(3deg)}}@keyframes animateWarning{0%{transform:translate(-150%) rotate(3deg)}to{transform:translate(-50%,-50.7%) rotate(0)}}@keyframes animateWarningReverse{0%{transform:translate(-50%,-50.7%) rotate(0)}to{transform:translate(-150%) rotate(3deg)}}