@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
  
body {
  background-color: #e4eaf6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:3em;
  
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  
}

button {
  width: 100%;
  white-space:nowrap;
  margin-bottom:1rem;
  display:flex !important;
  flex-direction:row;
  align-items:center;
  border:none;
  outline:none;
  border-color:none;
  color:#ffffff;
}

button::before{
  content:" ";
  width:60px;
  height:60px;
  margin-right:20px;
  display:block;
}

button:nth-child(1){
  background-image: url(https://www.juliandramirez.com/lynn/images/stop-01.jpg);
background-repeat: no-repeat;
background-position: 0 0;
  background-size:contain;
  background-color:#748bf1;
}

button:nth-child(2){
  background-image: url(https://www.juliandramirez.com/lynn/images/bye-01.jpg);
background-repeat: no-repeat;
background-position: 0 0;
  background-size:contain;
  background-color:#ef6d79;
}

button:nth-child(3){
  background-image: url(https://www.juliandramirez.com/lynn/images/cut-it-out-01.jpg);
background-repeat: no-repeat;
background-position: 0 0;
  background-size:contain;
  background-color:#0dbfef;
}

button:nth-child(4){
  background-image: url(https://www.juliandramirez.com/lynn/images/warning-01.jpg);
background-repeat: no-repeat;
background-position: 0 0;
  background-size:contain;
  background-color:#fca933;
}

#drum-machine {
  width: 100%;
    display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

}