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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center;height:100vh}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}header{background-color:#282c34;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.header .mobile-menu{display:none}.header .color-list{height:50px;width:50px;max-width:50px;position:relative}.header .inner-color-list{position:absolute;top:0;left:0;height:600%;width:50px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-direction:column;background-color:#f4f4f2;border-radius:25px;max-height:50px;transition:max-height .5s;will-change:max-height;max-width:50px;padding:9px;box-sizing:border-box}.header .inner-color-list:hover{max-height:254px}.header .inner-color-list:hover .color-btn{max-height:32px;margin-bottom:8px;max-width:32px;transition:max-height 1s,max-width 1s}.header .inner-color-list:hover .color-btn:last-of-type{margin-bottom:0}.header .color-btn{height:32px;width:32px;border-radius:50%;font-size:0;padding:0;min-width:0;max-width:0;max-height:0;transition:max-height .5s,max-width .5s;will-change:max-height,max-width}.header .color-btn.active{max-height:32px;max-width:32px;margin-bottom:0;border:2px solid #000}.header .color-btn.turq-btn{background-color:#0ff}.header .color-btn.purple-btn{background-color:#f0f}.header .color-btn.blue-btn{background-color:#00f}.header .color-btn.green-btn{background-color:#0f0}.header .color-btn.red-btn{background-color:red}.header .color-btn.yellow-btn{background-color:#ff0}@media (max-width:992px){.header .random-button-container,.header .sorting-button-container{display:none}.header .mobile-menu{display:block}.header .color-list{height:32px;width:32px;max-width:32px}.header .inner-color-list{height:600%;width:32px;border-radius:16px;max-height:32px;max-width:32px;padding:4px}.header .inner-color-list:hover{max-height:176px}.header .color-btn{height:24px;width:24px}.header .color-btn.active{max-height:24px;max-width:24px}.header .inner-color-list:hover .color-btn{max-height:24px;margin-bottom:4px;max-width:24px}}main{box-sizing:border-box;height:calc(100% - 64px);width:100%;display:flex;padding:20px}.item{height:100%;width:.39063%}@media (max-width:992px){main{flex-direction:column}.item{width:100%}}
/*# sourceMappingURL=main.2a2e803a.chunk.css.map */