@keyframes color-transition{0%{-webkit-transform:scale(1.02,1.1);transform:scale(1.02,1.1)}30%{-webkit-transform:scale(1.02,10);transform:scale(1.02,10)}to{-webkit-transform:scale(100,10);transform:scale(100,10)}}@-webkit-keyframes color-transition{0%{-webkit-transform:scale(1.02,1.1);transform:scale(1.02,1.1)}30%{-webkit-transform:scale(1.02,10);transform:scale(1.02,10)}to{-webkit-transform:scale(100,10);transform:scale(100,10)}}.pallette-thumbnail{display:flex;margin:0}.pallette-thumbnail .color{font-size:small;z-index:1;cursor:pointer}.pallette-thumbnail .color .color-value{text-align:center;color:#000;opacity:.3;margin:.5rem 0}.pallette-thumbnail .color .color-value.hex-value{margin-top:2rem}@media only screen and (min-width:768px){.pallette-thumbnail .color .color-value.hex-value{margin-top:2rem}}.pallette-thumbnail .color .background-color-container{position:relative;width:100%;height:8rem}@media only screen and (min-width:768px){.pallette-thumbnail .color .background-color-container{height:16rem}}.pallette-thumbnail .color .background-color-container .background-color{position:absolute;bottom:0;top:0;left:0;right:0}.pallette-thumbnail .color.highlight{z-index:2000}.pallette-thumbnail .color.highlight .background-color{border:10px solid #00f}.pallette-thumbnail .color.transition{z-index:10000}.pallette-thumbnail .color.transition .background-color .background-color,.pallette-thumbnail .color.transition .background-color:hover.background-color{-webkit-animation:color-transition .65s linear both;animation:color-transition .65s linear both}.pallette-thumbnail .color:hover .color-value{opacity:1}.pallette-thumbnail .color:not(.transition):hover .background-color{transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s;-webkit-transform:scale(1.02,1.1);transform:scale(1.02,1.1)}.home-container{overflow-y:auto;background-color:#f3f3f3}.home-container .home-content{overflow:hidden}.home-container .home-content h1{font-size:4rem;margin:6rem 0 3rem;font-weight:700;text-align:center}@media only screen and (min-width:768px){.home-container .home-content h1{font-size:10rem;margin:4rem 0 2rem}}@media only screen and (min-width:1200px){.home-container .home-content h1{font-size:14rem;margin:6rem 0 4rem}}@media only screen and (min-width:1600px){.home-container .home-content h1{font-size:18rem;margin:8rem 0 6rem}}.converter-container .pallette-thumbnail-container,.home-container .pallette-thumbnail-container{max-width:95%;display:flex;flex-wrap:wrap;justify-content:space-between;margin:4rem auto auto}.converter-container .pallette-thumbnail-container .pallette-thumbnail,.home-container .pallette-thumbnail-container .pallette-thumbnail{flex:1 1 400px;margin:1rem 0;padding:.5rem}@media only screen and (min-width:768px){.converter-container .pallette-thumbnail-container .pallette-thumbnail,.home-container .pallette-thumbnail-container .pallette-thumbnail{margin:2rem 0;padding:2rem}}.converter-container .pallette-thumbnail-container .pallette-thumbnail .background-color-container,.home-container .pallette-thumbnail-container .pallette-thumbnail .background-color-container{box-shadow:10px 20px 50px rgba(0,0,0,.1)}.button{cursor:pointer;height:4rem;width:4rem;border-radius:50%;position:relative;transition:all .15s}.button.add .icon.add,.button.close .icon.close{position:absolute;right:1rem;top:1rem;width:2rem;height:2rem;transition:all .15s}.button.add .icon.add:after,.button.add .icon.add:before,.button.close .icon.close:after,.button.close .icon.close:before{transition:all .15s;position:absolute;left:15px;content:" ";height:33px;width:2px;background-color:#fff}.button.icon-light.close .icon.close:after,.button.icon-light.close .icon.close:before{background-color:#fff}.button.icon-dark.close .icon.close:after,.button.icon-dark.close .icon.close:before{background-color:#333}.button.close .icon.close:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.button.close .icon.close:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.button.add .icon.add:before{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.button.add .icon.add:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.button.edit .icon,.button.edit .icon:after,.button.edit .icon:before{transition:all .15s}.button:hover.close .icon.close{opacity:.5}.button:hover.close .icon.close:after,.button:hover.close .icon.close:before{width:1.5px}.button:hover.edit .icon{margin:1.625rem 1rem 1.625rem 1.875rem;border-color:#ccc}.color-palette{position:relative}.color-palette .button.add{position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.color-palette .palette.color{transition:all .25s ease-in}.color-palette .palette.color .bottom-ui-container{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:20%}.color-palette .palette.color .bottom-ui-container .button{position:absolute;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.color-palette .palette.color .bottom-ui-container .button.close{top:0}.color-palette .palette.color .bottom-ui-container .button.edit{top:6rem}.pallettes{background-color:#000}.color-palette{width:100%;right:0;overflow:hidden}.color-palette,.color-palette .color{position:absolute;height:100%;top:0;bottom:0;left:0}.color-palette .color{width:0;transition:all .25s ease-in}.text-area.key textarea,.text-area.rgb textarea{resize:none;outline:none;background:transparent;overflow:hidden;font-family:"Lato",sans-serif}.text-area.key{width:100%}.text-area.key textarea{font-size:4rem;width:100%;text-align:center;background:transparent;border:none}@media only screen and (min-width:768px){.text-area.key textarea{font-size:5rem}}@media only screen and (min-width:1200px){.text-area.key textarea{font-size:6rem}}.text-area.rgb{height:5rem}.text-area.rgb textarea{box-sizing:border-box;font-size:1rem;line-height:2rem;width:5rem;height:2.5rem;text-align:center;border-radius:.5rem;transition:color .5s ease-in;transition:text-shadow .5s ease-in;transition:border-color .5s ease-in}@media only screen and (min-width:768px){.text-area.rgb textarea{font-size:1.5rem;line-height:3rem;width:7rem;height:3.5rem}}.text-area.rgb.alert textarea{color:#ff6464!important}.converter{display:inline-block;width:100%;height:100%;padding:0;overflow:hidden;background-color:#333;min-height:100rem;transition:background-color .25s ease-in 25ms}.converter .converter-container .alert-text,.converter .converter-container .rgb-container,.converter .converter-container .text-area.key{margin:auto}.converter .converter-container .text-area.key{padding-top:5rem;height:9rem}@media only screen and (min-width:768px){.converter .converter-container .text-area.key{padding-top:10rem;height:12rem}}.converter .converter-container .text-area.key,.converter .converter-container .text-area.rgb{opacity:0;transition:opacity .25s ease-in .5s}.converter .converter-container .text-area.key.visible,.converter .converter-container .text-area.rgb.visible{opacity:1}.converter .converter-container .rgb-container .values{margin:auto;display:flex;justify-content:space-between;width:18rem}@media only screen and (min-width:768px){.converter .converter-container .rgb-container .values{width:24rem}}.converter .converter-container .alert-text{display:table;margin:auto;color:#fff;background-color:rgba(85,85,85,.2);transition:color .5s ease-in .5s;transition:background-color .5s ease-in .5s;padding:.75rem;border-radius:.5rem;text-align:center}.converter .pallette-thumbnail-container{margin-top:2rem}@media only screen and (min-width:768px){.converter .pallette-thumbnail-container{margin-top:6rem}}body,html{margin:0;font-family:"Lato",sans-serif;background-color:#666}.long-arrow-left,.long-arrow-right{display:block;margin:1.5rem 1rem 1.5rem 1.7rem;width:1rem;height:1rem;border-top:2px solid #fff;border-left:2px solid #fff}.long-arrow-right{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.long-arrow-left{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.long-arrow-left:after,.long-arrow-right:after{content:"";display:block;width:2px;height:1.8rem;background-color:#fff;-webkit-transform:rotate(-45deg) translate(.585rem,.2rem);transform:rotate(-45deg) translate(.585rem,.2rem);left:0;top:0}
/*# sourceMappingURL=main.c3cf4ab1.chunk.css.map */