:root {
  --white: white;
  --gray: #3c3c3c;
  --black: black;
  --auto: #ee3624;
  --type: var(--white);
}

::selection { background: var(--auto); }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 background-color: var(--black);
  color: var(--white);
font-size: 16px;
margin: 20px;
  -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
  margin-bottom: 50px;
}

.logo {
  background-blend-mode: lighten;
width: 400px
}

input[type="file"] {
    display: none;
}
upload {

}

h1 {
  font-size: 50px;
margin: 0;
padding-bottom: 20px;
}

.bhide {
filter: blur(4px);
}

.nodisplay {
display: none!important;
}

#bpm {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
border: none;
color: var(--white);
width: 50px;
  font-size: 16px;
}

#bpm::placeholder { 
  color: var(--gray)
}

.beat {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 5px;
    margin: 3px;
    border: 1px solid var(--gray);
}

.beat:active {
background-color: var(--white);
border: 1px solid var(--white);
}


.creategrid:hover, .upload:hover {
  cursor: pointer;
}

input, .creategrid, .upload, .addkeybinding, .keybindings  {
display: inline-block;
padding: 10px;
margin-bottom: 3px;
}

.creategrid, .upload, #bpm, .addkeybinding, .keybindings {
background-color: var(--black);
border: 1px solid var(--gray);
}

.creategrid {
background-color: var(--white);
  color: var(--black);
}

.keybindings {
  border-radius: 50%;
}

.beats {
  font-size: 0;
}

.active {
pointer-events: all;
background-color: var(--white);
border: 1px solid var(--white);
}

.auto {
pointer-events: all;
background-color: var(--auto);
border: 1px solid var(--auto);
}

.type {
pointer-events: all;
background-color: var(--type);
border: 1px solid var(--type);
}

.options {
  text-align: center;
position: absolute;
  display: inline-block;
right: 50px;
left: 50px;
  top: 30%;
  transition: 2s;
}

.hide {
/* display: none; */
transform: translateY(-1000px);
}

.hideb {
transform: translateY(1000px);
}

@keyframes disable {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.bottomright {
position: fixed;
right: 15px;
bottom: 15px;
   transition: 1s;
}

.add, .minus {
display: inline-block;
width: 10px;
height: 10px;
padding: 10px;
border: 1px solid var(--gray);
text-align: center;
background-color: var(--black);
  line-height: .5;
}

.add, .minus, .randomize {
cursor: pointer;
}

.randomize, .stop {
  display: inline-block;
padding: 10px;
border: 1px solid var(--gray);
text-align: center;
background-color: var(--black);
  user-select: none;
}

.transpose {
position: fixed;
top: 10px;
right: 10px;
  user-select: none;
  transition: 1s;
}


.status {
position: fixed;
top: 15px;
left: 15px;
pointer-events: none;
/* animation: disable 4s;
animation-fill-mode: forwards; */
border: 0;
background-color: var(--black);
color: var(--white);
transition: 1s;
}

.title {
position: fixed;
top: 15px;
left: 15px;
  right: 15px;
pointer-events: none;
border: 0;
background-color: var(--black);
color: var(--white);
transition: 1s;
}

.active {
background-color: var(--white)
}

@media screen and (max-width: 600px) {

  .logo {
width: 100%;
}
  
}