@import url(https://fonts.googleapis.com/css?family=Russo+One);body,html{margin:0;padding:0;font-family:Russo one}#drum-machine{background-image:url(https://images.unsplash.com/photo-1568153354382-6bcd1d46568b?auto=format&fit=crop&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&q=80&w=1189);background-size:cover;background-position:50% 70%;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column}#display{font-size:40px;color:#000;width:325px;text-align:center;margin-bottom:10px}#display,#drumPadContainer{background-color:#bebebe;border-radius:20px}#drumPadContainer{display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px}.drum-pad{flex:0 1 32%;height:50px;width:30px;margin:2px;border-radius:20px;background-color:#400566;color:#f5f5f5;box-shadow:2px 2px #000;border:1px solid #400566;font-size:30px;font-family:Russo one;text-shadow:2px 2px grey}.drum-pad:hover{background-color:#f5f5f5;color:#400566;border:1px solid #f5f5f5}@media screen and (max-width:400px){.drum-pad{width:30px;height:40px;font-size:25px}}#instructions{color:#f5f5f5;font-size:30px;font-family:Russo one;margin-top:20px}@media screen and (max-width:400px){#instructions{font-size:20px;text-align:center}}.fade-in{animation:fadeIn 5s ease;-webkit-animation:fadeIn 5s ease;-moz-animation:fadeIn ease 5s;-o-animation:fadeIn ease 5s;-ms-animation:fadeIn ease 5s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-out{animation:fadeOut 3s ease;-webkit-animation:fadeOut 3s ease;-moz-animation:fadeOut ease 3s;-o-animation:fadeOut ease 3s;-ms-animation:fadeOut ease 3s}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}.gone{opacity:0}
/*# sourceMappingURL=main.a8bfee62.chunk.css.map */