@import"https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap";:root{line-height:1.5;--primary-color: #ffffff;--secondary-color: #e3d5ca;--text-color:#000000;--text-secondary:#fff;--logo-color:#0066ff;--primary-border: #333;--font-primary: "Oswald", serif;font-optical-sizing:auto;--border-radius:50%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-width:100%;min-height:100%}body{display:flex;flex-direction:column;background-color:var(--primary-color);box-sizing:border-box;margin:0;padding:0;color:var(--text-color);font-family:var(--font-primary);font-weight:400}*{font-family:inherit;overflow-x:hidden}.app-header{background-color:var(--primary-color);box-shadow:1px 0 0 2px gray;position:sticky;top:0}.app-header .app-nav{display:flex;align-items:center;height:80px;justify-content:space-between;padding-inline:1.2rem}.app-nav .nav-logo{font-family:inherit;font-weight:400;line-height:15px;font-size:20px;font-weight:800;line-height:30px;color:var(--logo-color)}.app-container{display:flex}.rectangle-feature-container{display:flex;width:50%;flex-direction:column;gap:.3rem}.rotating-rectangle-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:390px;padding:2rem 0 0rem;z-index:999}.rotating-rectangle-wrapper .rectangle{width:250px;height:250px;border:3px solid gray;transition:transform .4s cubic-bezier(.25,.1,.25,1)}.rectangle-input-container{display:flex;justify-content:center;align-items:center}.rectangle-input-wrapper{min-width:700px;padding:1.2rem;display:flex;flex-direction:column;justify-content:center;align-content:center;flex-wrap:wrap;gap:.4rem}.rectangle-input-wrapper .rectangle-colors{display:grid;grid-template-columns:repeat(5,50px);gap:.2rem;justify-content:center}.rectangle-input-wrapper .rectangle-colors>button{border-radius:10%;height:50px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;box-shadow:.4px .8px .12px #000;cursor:pointer}.color-picker{visibility:none;opacity:0}.picker-button{all:unset;margin-top:1.2rem;height:45px;border-radius:.5rem;width:100%;text-align:center;background-color:var(--logo-color);color:var(--text-secondary);text-transform:uppercase}.angle-slider-wrapper{--slider-width: 100%;--slider-height: 12px;--slider-bg: rgb(82, 82, 82);--slider-border-radius: 999px;--level-color: var(--logo-color);--level-transition-duration: .1s;--icon-margin: 15px;--icon-color: var(--slider-bg);--icon-size: 25px;font-family:Nunito,serif}.angle-slider-wrapper{display:flex;align-items:center;gap:.5rem;cursor:pointer}.angle-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--slider-width);height:var(--slider-height);background:var(--slider-bg);overflow:hidden;border-radius:var(--slider-border-radius);-webkit-transition:height var(--level-transition-duration);-o-transition:height var(--level-transition-duration);transition:height var(--level-transition-duration);cursor:inherit}.angle-slider::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;-webkit-box-shadow:-200px 0 0 200px var(--level-color);box-shadow:-200px 0 0 200px var(--level-color)}.circle-feature{display:flex;padding:1.2rem 0;gap:1.2rem;justify-content:space-between;border:2px solid red}.circle-feature-container{width:800px;display:flex;justify-content:center;align-items:center}.rectangle-outside-cirle{width:500px;height:500px;border:2px solid green;display:flex;justify-content:center;align-items:center}.circle{width:200px;height:200px;border:3px solid gray;border-radius:50%;transition:transform .4s cubic-bezier(.25,.1,.25,1)}@media (max-width: 60em){.app-container{margin-inline:3px;justify-content:center;flex-direction:column}.rotating-rectangle-wrapper{width:100%;padding:1rem;justify-content:center}.rectangle-feature-container{flex-direction:column;align-items:center;padding-inline:.5rem;width:100%}.rectangle-input-wrapper{min-width:100%;padding:1rem;margin-top:1.2rem}.circle-feature-container{width:100%}.rectangle-outside-cirle{width:400px}}