#horizontal{
	display:inline;
	white-space: nowrap;
}
#play-button {
    background-color: #32a32f;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjZweCIgaGVpZ2h0PSIzM3B4IiB2aWV3Qm94PSIwIDAgMjYgMzMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CgoJPGcgaWQ9IkJ1dHRvbi0vLVBsYXktQnV0dG9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDEuMDAwMDAwLCAtMzMuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CgkJPGcgaWQ9ImljX3BsYXlfYXJyb3ciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzLjAwMDAwMCwgMjIuMDAwMDAwKSI+CgkJCTxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIxOC4zMzMzMzMzIDExLjQ1ODMzMzMgMTguMzMzMzMzMyA0My41NDE2NjY3IDQzLjU0MTY2NjcgMjcuNSI+PC9wb2x5Z29uPgoJCTwvZz4KCTwvZz4KPC9zdmc+Cg==);
   
    background-size: 1%;
    text-align: center;
    text-transform: uppercase;
	

    
    
margin: auto;
    
    width: 8vmin;
    height: 8vmin;
    

    content: "\a";
   
    background-position: center;
    background-repeat: no-repeat;
    
    border-radius: 50%;
    background-size: 40%;
}
#play-button:hover {
	background-color: #4ecf4a;
}
#grid-button {
    background-color: #32a32f;
    background-image: url(grid.svg);
   
    
    text-align: center;
    text-transform: uppercase;
	

    
    
margin: auto;
    
    width: 8vmin;
    height: 8vmin;
    

    content: "\a";
   
    background-position: center;
    background-repeat: no-repeat;
    
    border-radius: 50%;
    background-size: 110%;
}
#grid-button:hover {
	background-color: #4ecf4a;
}
#tempo-slider input.input-number, #tempo-slider, #reset-button, #play-button, #bottom .clear-button, #bottom .button {
    /* background-color: #252426; */
    font-family: "Poppins",sans-serif;
    letter-spacing: .1ex;
}
body button, html button {
    cursor: pointer;
    border: none;
    font-family: "Quicksand",sans-serif;
}
user agent stylesheet
button {
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-weight: ;
    font-stretch: ;
    font-size: 200px;
    font-family: ;
    font-optical-sizing: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: center;
    cursor: default;
    writing-mode: horizontal-tb !important;
}
#bottom {
    border-top: 4px solid #12151e;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 10%;
    font-size: 12px;
    text-align: center;
    background: #12151e;
}
body, html {
	display:inline;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    /* overflow: hidden; */
    /* line-height: 1.89; */
    font-family: "Quicksand",sans-serif;
	font-size:50px;
}
:root {
  color-scheme: dark;
}