body{font-family:Roboto,sans-serif}.App{display:grid;grid-template-rows:15% 85%;height:100vh;width:100vw}.shades{display:grid;grid-template-columns:repeat(auto-fill,10%);grid-template-rows:repeat(auto-fill,10%);height:100%;width:100%}.shadeinput{align-items:center;display:flex;justify-content:space-between;padding:16px 50px}.emojis{font-size:3rem}.input{background-color:#e9e9e9;border:none;border-radius:27px;padding:1rem 1.5rem}.input:focus{outline:none}.shade{align-items:center;color:#fff;cursor:pointer;display:flex;justify-content:center}.copied{-webkit-animation:copied;animation:copied;-webkit-animation-duration:.3s;animation-duration:.3s;cursor:pointer}@-webkit-keyframes copied{0%{font-size:0;opacity:0}to{font-size:1rem;opacity:1}}@keyframes copied{0%{font-size:0;opacity:0}to{font-size:1rem;opacity:1}}@media screen and (max-width:767px){.shades{grid-template-columns:repeat(4,25%);grid-template-rows:repeat(100,20%)}.emojis{font-size:20px}.input{padding:1rem 2rem}}@media screen and (max-width:660px){.shades{grid-template-columns:repeat(2,50%);grid-template-rows:repeat(100,20%)}.emojis{font-size:10px}.input{padding:1rem}}
/*# sourceMappingURL=main.6875b16d.css.map*/