@import"https://fonts.googleapis.com/css2?family=Liter&display=swap";:root{--color-box-width: 52px;--color-box-height: 104px}*{font-family:Liter,sans-serif;margin:0}*:not(a,button,select,option){color:#efd9ce}body{background:#112;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;font-size:15px}.generator{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}.optionContainer{display:flex;justify-content:center;gap:10px}.buttonContainer{display:flex;flex-direction:row;gap:5px}.button{padding:6px 2.5em;font-size:15px;transition:all .1s ease-in-out;transform:scale(1) skewY(30);width:auto;height:3em}.button:hover{transform:scale(1.05) skewY(0)}.button:active{transform:scale(.99)}.palette{border-radius:8px;border:3px dashed #EFD9CE22;display:flex;flex-direction:row;height:max(auto,var(--color-box-height));width:80vw;flex-wrap:wrap;padding:8px;transition:border-color .2s linear}.palette:not(:has(*)){border:0 dashed transparent}.color-box{margin:1px;padding:3px;cursor:pointer;display:flex;width:40px;height:10px;border-radius:8px;animation:color-box-appear .3s cubic-bezier(.17,.67,.39,1);animation-fill-mode:forwards;justify-content:center;align-items:center;text-align:center;font-weight:700;color:#fff;opacity:0;flex-grow:1;flex-shrink:1;--text-outline-color: black;text-shadow:2px 2px 0 var(--text-outline-color),2px -2px 0 var(--text-outline-color),-2px 2px 0 var(--text-outline-color),-2px -2px 0 var(--text-outline-color),2px 0px 0 var(--text-outline-color),0px 2px 0 var(--text-outline-color),-2px 0px 0 var(--text-outline-color),0px -2px 0 var(--text-outline-color)}.color-box:hover{outline:2px solid white}.color-box>p{font-size:0}.color-box:hover>p{font-size:17px}@keyframes color-box-appear{0%{opacity:0;width:0}to{width:max(var(--color-box-width),auto);height:var(--color-box-height);opacity:1;animation-iteration-count:0}}@media(prefers-reduced-motion:reduce){.color-box{animation:none;opacity:1;width:var(--color-box-width);height:var(--color-box-height)}}a{color:#24a0ff;font-weight:700;text-decoration:none;position:relative;background-color:#24a0ff1a;border-radius:8px;padding:0 6px}a:before{content:"";position:absolute;width:80%;height:2px;border-radius:4px;background-color:#24a0ff;bottom:1px;left:10%;transform-origin:left;transform:scaleX(1);transition:transform .25s cubic-bezier(0,.47,.14,1.02)}a:hover:before{transform-origin:right;transform:scaleX(0)}h1{text-shadow:0px 3px 0px rgba(79,53,53,.7);font-size:2.7em;text-align:center;margin-bottom:5px}p{text-align:center;font-size:17px}button{border-radius:8px;padding:5px;font-weight:700}button,select{cursor:pointer}input[type=range]{cursor:grab}input[type=range]:active{cursor:grabbing}input#seed{width:100px}input[type=number]{color:#000}