@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Rubik:wght@700;900&display=swap";.App{background-color:#282c34;min-height:100vh;display:flex;width:100vw}h1{margin:0}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}:root{--main: #f9f9ec;--secondary: #0b074d;--ac-blue: #836fee;--ac-pink: #f456dc;--ac-green: #61f4ce;--ac-yellow: #f7d276}section{position:relative;display:flex;width:100%}.createPalette{position:relative;width:100%;display:flex}div.error{width:100vw;height:100vh;display:flex;flex-direction:column;gap:2rem;justify-content:center;align-items:center}span{font-weight:700}h1{font-size:3rem}.palette{display:flex;width:100%;height:100vh}.color{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;margin:0;position:relative}.tagContainer{display:flex;flex-direction:column;justify-content:center;align-items:center;transition-property:background;transition-duration:.3s}.tagContainer p{font-weight:700;margin:0;opacity:.6}.span{font-weight:600;opacity:.9}.tag{position:absolute;top:6rem;opacity:.5;margin:0;font-weight:700;rotate:270deg;font-size:3.5rem;padding:.5rem;border-radius:1rem}.isDark{color:#000}.isLigth{color:#fff}.color:hover>.colorActionBar{opacity:1}.colorActionBar{display:grid;grid-template-columns:repeat(2,fit-content);grid-template-rows:repeat(fill,fit-content);gap:8px;opacity:0;transition-property:opacity;transition-duration:.3s}.isDark{background:#00000029}.isLigth{background:#ffffff26}.actionButton{border:none;outline:none;display:flex;justify-content:center;align-items:center;width:38px;height:38px;color:#fff;border-radius:8px;font-weight:700;transition-property:background;transition-duration:.3s;position:relative}.copyButton,.moreButton{grid-column-end:span 2;width:100%}.actionButton.isDark:hover{background:#00000040}.actionButton.isLigth:hover{background:#ffffff40}.closeZone{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.modalBack{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:20;width:fit-content;height:fit-content}.rcp-root{position:absolute;width:250px}.rcp-body{background-color:#180b24;border-radius:0 0 10px 10px}.colorInfo{box-sizing:border-box;display:flex;flex-direction:column;padding:0 1rem;justify-content:flex-start;align-items:flex-start;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:20;width:100%;height:fit-content}.colorInfo article{box-sizing:border-box;display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;padding:.75rem 0;width:100%}.colorInfo article:last-child{border-bottom:none}.colorInfo article div{display:flex;justify-content:space-between;align-items:center;width:100%}.colorInfo article div h3{font-size:1rem;line-height:1.1rem;margin:0}.colorInfo article div .copyButton{height:28px;width:28px}.colorInfo article div .copyButton .copyIcon{height:20px;width:20px}.colorInfo article span{opacity:.65;font-weight:400;font-size:.7rem}.icon{height:24px}.actionIcon{fill:#fff}.hashIcon{width:91px;opacity:.2}.configIcon,.saveIcon{margin:0;padding:0;fill:currentColor}.rcp-root{--rcp-background-color: #121212;--rcp-field-input-color: #ffffff;--rcp-field-input-border-color: #242424;--rcp-field-label-color: #808080}.rcp{display:flex;flex-direction:column;background-color:var(--rcp-background-color);border-radius:10px}.rcp-body{display:flex;flex-direction:column;gap:20px;padding:20px 10px}.rcp-section{display:flex;flex-direction:column;gap:10px}.rcp-interactive{width:100%;height:100%;-webkit-user-select:none;user-select:none;touch-action:none}.rcp-saturation{cursor:all-scroll;width:100%;position:relative;background-image:linear-gradient(to bottom,transparent,black),linear-gradient(to right,white,transparent);border-radius:10px 10px 0 0}.rcp-saturation-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-10px)}.rcp-hue{cursor:ew-resize;position:relative;width:100%;height:12px;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:10px}.rcp-hue-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-alpha{cursor:ew-resize;position:relative;width:100%;height:12px;border-radius:10px}.rcp-alpha-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-fields{display:flex;flex-direction:column;gap:10px}.rcp-fields-floor{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.rcp-field{display:flex;flex-direction:column;width:100%}.rcp-field-input{width:100%;font-family:inherit;font-size:14px;text-align:center;color:var(--rcp-field-input-color);background-color:transparent;border:2px solid var(--rcp-field-input-border-color);border-radius:5px;outline:none;padding:5px 0}.rcp-field-label{font-size:14px;text-align:center;color:var(--rcp-field-label-color)}.buttonsContainer{margin:0;position:absolute;bottom:30px;left:30px;right:30px;display:flex;gap:15px;z-index:100}.button{border:none;background:#fff;color:#000;font-size:24px;padding:15px 30px;font-weight:700;border-radius:25px;cursor:pointer;transition-property:background,color;transition-duration:.3s;display:flex;justify-content:center;align-items:center;gap:15px;box-shadow:0 20px #180b2444}.button:hover{background:#000;color:#fff}.generateBtn{flex-grow:1;padding:6px 7px;border-radius:25px;border:none;cursor:pointer;width:100%;height:100%;position:relative;background-color:#ffea00;overflow:hidden}.deg{box-sizing:border-box;width:100%;height:100vw;position:absolute;bottom:0;top:0;left:0;right:0;z-index:0;margin:auto;border-radius:inherit;background-image:radial-gradient(circle at right,var(--ac-pink) 25%,transparent 45%),radial-gradient(circle at top,var(--ac-blue) 35%,transparent 55%),radial-gradient(circle at bottom,var(--ac-green) 45%,transparent 65%),radial-gradient(circle at left,var(--ac-yellow) 55%,transparent 75%);animation-name:spin;animation-duration:15s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.generateBtn span{position:relative;z-index:1;font-size:24px;font-weight:700;background:#180b24;color:#fff;opacity:1;display:flex;justify-content:center;align-items:center;border-radius:19px;padding:11px 25px;transition-property:background color;transition-duration:.3s}.generateBtn:hover span{background:transparent}.sideMenu{display:none;flex-direction:column;height:calc(100vh - 60px);background-color:#fff;margin:0;padding:30px;gap:30px;width:fit-content}.header{display:flex;justify-content:space-between;align-items:center}.toggleMenu{rotate:180deg}.menuItem{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:10px 20px;color:#000;fill:currentColor;border-radius:16px;margin:0;gap:20px;text-decoration:none;transition-property:background;transition-duration:.3s}.menuItem:hover{background:#0001}.menuItem span{opacity:.7;white-space:nowrap;font-size:14px}.menuItem h2{font-size:20px}h2,span{margin:0;padding:0}.sideMenuIcon{height:30px}.tools,.appUtils{display:flex;flex-direction:column;gap:15px}.tools{flex-grow:1}.toggleMenuBtn{padding:10px;border:none;border-radius:16px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background .3s}.toggleMenuBtn:hover{background:#0002}.logo{height:70px;display:flex;justify-content:center;align-items:center}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;font-size:16px}.root{width:100vw}