.footer{
  position:absolute;
  bottom:0;
  left:0;
right:0;
text-align: center;
  background-color: black;
  color:white;
  padding:10;
  font-size: 1.5vw;
  font-family: 'Roboto','futura_xblkcn_btextra_black', Arial, sans-serif;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

.logo{
position:relative;
padding: 20px;
height:auto;
width:40vw;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
#numberofnotes{
background-color: rgb(131, 131, 131);
height:3vw;
font-family: 'BEBAS','futura_xblkcn_btextra_black', Arial, sans-serif;
font-size: 1.5vw;
border: 0 solid;
padding-left: 8;
  margin-left: 20px;
}
.notecountfield{
  display:flex;

  height:auto;
  font-family: 'BEBAS','futura_xblkcn_btextra_black', Arial, sans-serif;
  font-size: 1.5vw;
  padding:5px;
  margin:10;
  background-color:#DDD;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;  /* Chrome all / Safari all */
      -moz-user-select: none;     /* Firefox all */
      -ms-user-select: none;      /* IE 10+ */
      user-select: none;          /* Likely future */
}
.subdivision:hover{
  background-color: #02ccff;
}

.longruler{
  position:absolute;
  left:44%;
  top:80%;
  width:.8vw;
  height:15vw;
  border-radius: 25px;
  background-color: black;
  background-image: linear-gradient(white, black);
  z-index: -100;
}
.mediumruler{
  position:relative;
  position:absolute;
  left:46%;
  top:80%;
    width:.5vw;
    height:10vw;
      border-radius: 25px;
    background-color: black;
    background-image: linear-gradient(white, black);
    z-index: -100;
}
.shortruler{
  position:relative;
  position:absolute;
  left:47%;
  top:80%;
    width:.3vw;
    height:5vw;
      border-radius: 25px;
    background-color: black;
    background-image: linear-gradient(white, black);
    z-index: -100;
}


.beatdisplayholder{
display:flex;
position:relative;
width:100%;
background-color: white;
font-family: 'BEBAS','futura_xblkcn_btextra_black', Arial, sans-serif;
}

.beat{
  display:flex;
  position:relative;
  padding:10px;
  font-size: 1.1vw;
width: calc(100% / 16);
border: 2px solid;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}


.body{
  margin:0;
    padding:0;
}

.subdivisionholder{
  display:flex;
  flex-wrap: wrap;
background-color: rgb(42, 42, 42);
 align-items: center;
 top:0;
 left:0;
 position:absolute;
 width:100%;
}

.subdivision{
  display:flex;
  width: 7vw;
  cursor: pointer;
  height:auto;
  font-family: 'BEBAS','futura_xblkcn_btextra_black', Arial, sans-serif;
  font-size: 1.5vw;
  padding:11px;
  margin:1vw;
  background-color:#DDD;
  -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
    justify-content: center;
    align-items: center;
}

input {

    border:solid 1px #02ccff;
    box-shadow:none;
}

input:-moz-placeholder {

    box-shadow:none !important;
}

input:invalid {

    box-shadow:0 0 3px #02ccff;
}


/* unvisited link */
a:link {
 color: #02ccff;
}

/* visited link */
a:visited {
 color: #ffb302;
}

/* mouse over link */
a:hover {
 color: #ff024e;
}

/* selected link */
a:active {
 color: #02ccff;
}