/* ID SELECTORS */

/* CLASS SELECTORS */
.clicked{
  filter:brightness(150%) drop-shadow(0 0 1px white);
}
.drumkit{
  margin-top:30px;
}
.drumpart{
  margin:5px;
  padding:0;
  aspect-ratio: 1/1;
  border-radius:20%;
}
@media (max-width:700px){
  .drumpart{
    height:85px;
  }
}
@media (min-width:701px){
  .drumpart{
    height:150px;
    margin:30px;
  }
}
.emptydiv{
  height:120px;
}
.goback{
  border:1px solid white;
  border-radius:20%;
  padding:5px;
  height:50px;
  margin-left:20px;
  display:inline;
}
.navbar-brand{
  height:100px;
  aspect-ratio: 1/1;
  margin:10px auto;
  position:absolute;
  padding:5px;
  top:10px;
  left:50%;
  transform: translateX(-50%);
  background-color: white;
  border-radius:100%;
  animation-name:color_cycle_shadow;
  animation-duration:1s;
  animation-iteration-count:infinite;
}
/* ELEMENT SELECTORS */
a:hover{
  filter:brightness(0%) contrast(100%)
}
body{
  background-color: black;
  color:white;
  font-family:'Times New Roman', Times, serif;
  text-align: center;
}
button{
  margin:10px;
}
h2{
  display:inline-block;
  position:absolute;
  background-color: rgb(72, 72, 72);
  width:30px;
  border-radius:30%;
  border:1px solid white;
  font-size:25px;
}
@media (max-width:700px){
  h2{
    display:none;
  }
}
nav{
  height:100px;
}