*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;background-color:var(--background-color);color:#26273a;color:var(--color-black)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace;background-color:#ada9a1;background-color:var(--color-grey);padding:.5rem;padding:var(--size-s)}h1{color:#6056eb;color:var(--color-nitor-blue);font-size:3rem}a{color:#ada9a1;color:var(--color-grey)}.button{display:flex;align-items:center;justify-content:center;background-color:#fff;background-color:var(--color-white);border:1px solid #26273a;border:1px solid var(--border-color);border-radius:6px;border-radius:var(--border-radius-small);cursor:pointer;font-size:.75rem;font-size:var(--font-size-small)}:root{--color-grey:#ada9a1;--color-white:#fff;--color-black:#26273a;--color-nitor-blue:#6056eb;--color-light-blue:#6dc4e2;--color-pink:#ffd1c1;--border-color:var(--color-black);--background-color:var(--color-white);--size-xs:.25rem;--size-s:.5rem;--size-m:1rem;--size-l:1.5rem;--size-xl:2rem;--size-2-xl:2.5rem;--border-radius-small:6px;--border-radius-large:20px;--font-size-small:.75rem;--font-size-normal:1rem;--z-index-top:2;--z-index-mid:1;--transition-quick:100ms;--transition-slow:300ms;--ease-function:ease-in-out;--transition-list-width:10rem}.app{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:calc(var(--size-2-xl)*2)}.app .mobile-error-message{display:none;margin:var(--size-s)}@media only screen and (max-width:799px){.app .mobile-error-message{display:block}}.header-block{flex-direction:column}.header-block,.main{display:flex;align-items:center;width:90%;max-width:90rem}.main{justify-content:flex-end;position:relative}@media only screen and (min-width:1200px){.main{height:35rem;margin-top:var(--size-l)}}@media only screen and (max-width:799px){.main{display:none}}.content-container{width:calc(100% - var(--transition-list-width));padding:3rem 2rem 5rem;box-shadow:5px 5px 32px 3px var(--color-grey);background-color:var(--color-white);border-radius:var(--border-radius-large);z-index:var(--z-index-mid)}.content{display:flex;height:100%}@media only screen and (min-width:800px) and (max-width:1199px){.content{flex-direction:column}}.selectors{padding-right:var(--size-2-xl)}@media only screen and (min-width:1200px){.selectors{margin-right:var(--size-2-xl);border-right:1px solid var(--color-grey)}}.selectors .property-selector{margin-bottom:var(--size-xl)}.transition-preview-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;margin-top:var(--size-xl)}@media only screen and (min-width:1200px){.transition-preview-container{margin-top:3.5rem}}.transition-preview{display:flex;align-items:flex-start;justify-content:center;cursor:default;padding:var(--size-m);width:15rem;height:var(--size-m);background-color:var(--color-nitor-blue);color:var(--color-white);box-sizing:content-box}.transition-preview.background-color:hover{background-color:var(--color-light-blue)}.transition-preview.color:hover{color:var(--color-black)}.transition-preview.border{border:1px solid var(--color-black)}.transition-preview.border:hover{border:4px solid var(--color-pink)}.transition-preview.border-radius{border:1px solid var(--color-black)}.transition-preview.border-radius:hover{border-radius:var(--border-radius-large)}.transition-preview.width:hover{width:18rem}.transition-preview.height:hover{height:4rem}.transition-preview.opacity:hover{opacity:.3!important}.transition-preview.font-size:hover{font-size:calc(var(--font-size-small)*1.6)}.transition-preview.font-weight:hover{font-weight:700}.transition-preview.margin:hover{margin:var(--size-s)}.transition-preview.padding:hover{padding:var(--size-l)}.transition-preview.transform:hover{transform:translate3d(0,var(--size-l),0) scale(1.25) rotate(10deg)!important}.transition-preview.box-shadow{box-shadow:0 12px 20px 0 var(--color-grey)}.transition-preview.box-shadow:hover{box-shadow:5px 5px 13px 5px var(--color-nitor-blue)}.transition-preview.text-shadow{text-shadow:-1px -1px 1px var(--color-black),1px 1px 1px var(--color-black)}.transition-preview.text-shadow:hover{text-shadow:1px 3px 0 var(--color-black),1px 10px 5px var(--color-black)}.transition-preview.filter:hover{-webkit-filter:blur(2px) grayscale(60%);filter:blur(2px) grayscale(60%)}.code-preview{display:flex;flex-direction:column;align-items:center}@media only screen and (min-width:800px) and (max-width:1199px){.code-preview{margin-top:var(--size-2-xl)}}.code-preview-code-block{display:flex;align-items:flex-start;margin-bottom:var(--size-s)}.code-preview-code-block code{width:30rem;max-width:40vw;white-space:nowrap;overflow-y:auto}.code-preview-code-block input{position:absolute;left:-100000000px}.code-preview-code-block .button{height:var(--size-xl);width:var(--size-xl);margin-left:var(--size-s)}.copy-notice{height:0}.property-selector{display:flex;flex-direction:column;position:relative;width:14rem}.property-selector button{background-color:var(--color-white);color:var(--color-black);border:1px solid var(--border-color);padding:var(--size-s) var(--size-xl);border-radius:var(--border-radius-large)}.property-selector button svg{margin-left:auto}.property-selector-name{font-size:var(--font-size-small);margin-bottom:var(--size-s)}.property-list{display:flex;flex-direction:column;height:auto;width:14rem;overflow:hidden;background-color:var(--color-nitor-blue);color:var(--color-white);position:absolute;top:2.2rem;border:1px solid var(--border-color);border-top:none;z-index:var(--z-index-top);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.property-list li{cursor:pointer;padding-top:var(--size-s);padding-bottom:var(--size-s);padding-left:var(--size-m);transition:background-color var(--transition-quick) var(--ease-function)}.property-list li:hover{background-color:var(--color-light-blue)}.value-slider{display:flex;flex-direction:column;margin-bottom:var(--size-xl)}.value-slider span{font-size:var(--font-size-small)}.value-slider-name{margin-bottom:var(--size-m)}.value-slider-range{-webkit-appearance:none;width:100%;height:var(--size-xs);border-radius:var(--border-radius-large);background:var(--color-black);outline:none}.value-slider-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--size-l);height:var(--size-l);border-radius:50%;background:var(--color-nitor-blue);cursor:pointer}.value-slider-range::-moz-range-thumb{width:var(--size-l);height:var(--size-l);border-radius:50%;background:var(--color-nitor-blue);cursor:pointer}.value-slider-input-field-container{margin-top:var(--size-m)}.footer{display:flex;margin-top:var(--size-xl);font-size:var(--font-size-small);color:var(--color-grey)}.footer .divider,.footer a{margin-left:var(--size-xs)}@media only screen and (max-width:799px){.footer{display:none}}.transitions-list{display:flex;flex-direction:column;width:var(--transition-list-width)}.transitions-list .transition-items{display:flex;flex-direction:column;background-color:var(--color-white);border:1px solid var(--color-grey);border-radius:var(--border-radius-small);box-shadow:2px 2px 5px 0 var(--color-grey);height:32rem;width:15rem}.transitions-list .transition-items .reset-transition-button{margin-top:auto;margin-bottom:var(--size-s);border:none;justify-content:flex-start;align-items:center;color:#f56868}.transitions-list .transition-items .reset-transition-button svg{margin-left:var(--size-xs)}.transitions-list .transition-item{display:flex;align-items:center;justify-content:space-between;padding-left:var(--size-s);padding-right:var(--size-s);height:var(--size-l);cursor:pointer;font-size:var(--font-size-small)}.transitions-list .transition-item.selected{background-color:var(--color-pink)}.transitions-list .transition-item .delete-transition-button{margin-right:var(--size-2-xl);opacity:0;border:none;background-color:transparent;height:1.2rem;width:1.2rem;border-radius:100%}.transitions-list .transition-item .delete-transition-button:hover{background-color:var(--color-nitor-blue);color:var(--color-white)}.transitions-list .transition-item:hover{background-color:var(--color-pink)}.transitions-list .transition-item:hover .delete-transition-button{opacity:1}.transitions-list-header{margin-bottom:var(--size-s);margin-left:var(--size-s);font-size:var(--font-size-small)}.add-new-transition{border:none;font-size:var(--font-size-normal);margin-top:4rem;padding:0;font-weight:700}.add-new-transition svg{margin-right:var(--size-s)}.bezier-editor{display:flex;flex-direction:column;justify-content:space-between;margin-bottom:var(--size-l);margin-top:calc(var(--size-m)*-1)}.bezier-editor .inputs{display:flex;align-items:center}.bezier-editor a{font-size:var(--font-size-small);margin-top:var(--size-xs)}.bezier-editor .input-block{display:flex;flex-direction:column}.bezier-editor .input-block label{font-size:var(--font-size-small);margin-bottom:var(--size-xs)}.bezier-editor .input-block input{width:3.3rem;margin-right:var(--size-xs)}.help-text{margin-left:auto;margin-right:var(--size-l);position:relative}.help-text:hover .info-block{display:flex}.help-text .hover-block{display:flex;align-items:center;cursor:help;margin-bottom:var(--size-l)}@media only screen and (min-width:1200px){.help-text .hover-block{margin-bottom:0}}.help-text .info-block{flex-direction:column;display:none;position:absolute;z-index:var(--z-index-top);background-color:var(--color-nitor-blue);color:var(--color-white);border:1px solid var(--color-pink);padding:var(--size-m);width:80vw;right:0}.help-text span{font-size:var(--font-size-small);margin-right:var(--size-s)}.help-text svg{color:var(--color-grey)}
/*# sourceMappingURL=main.5e5804e4.chunk.css.map */