*{box-sizing:border-box}body{background:#1f202e}.drum_machine_wrapper{background:#33354d;padding:10px;margin:50px auto;border:3px solid}.power{box-shadow:0 1px 15px #f8f8ff}.highlight_off{background:#a9a9a9}.highlight_off>p{visibility:hidden}.show_info{background:#f0f8ff;font-family:Teko,sans-serif;font-size:24px}.show_info>p{margin:0;padding:5px 10px}p:nth-of-type(1){margin-top:0}p:nth-of-type(3){margin-bottom:0}.display{height:113px;box-shadow:inset 0 0 5px 1px}.volume_controls{width:151px;margin:10px 0 0;border:none}.volume_label{text-align:center;color:#708090;font-family:Titillium Web,serif;font-weight:300}#controls{display:flex;justify-content:space-between;align-items:end}.button_shadow{box-shadow:inset 0 0 2px #000}.slate{background:#33354d;border:none}.ctrl_button{background:#33354d;box-shadow:inset 0 0 2px #000;padding:10px;height:45px;color:#a9a9a9;border:none;font-family:Titillium Web,serif;font-weight:300}.ctrl_button:nth-of-type(1){position:relative;right:15px}.pad{height:100px;border:1px solid grey}.pads_wrapper{margin-top:10px;padding:5px;border:1px solid black;box-shadow:inset 0 0 2px}svg{width:60px;height:35px}@media screen and (min-width: 450px){.drum_machine_wrapper{width:400px}.pads_wrapper{display:flex;flex-wrap:wrap;width:100%}.pad{width:30%;margin:1.6667%}}@media screen and (min-width: 900px){.drum_machine_wrapper{width:875px}.pad{width:10%;margin:.55%}}