@font-face {
  font-family: '04b30';
  src: url('../fonts/04b_30__-webfont.woff2') format('woff2'),
       url('../fonts/04b_30__-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
    font-family: 'audiowide';
    src: url('../fonts/Audiowide-Regular.ttf');
}

*{
  font-family: audiowide;
  margin:0;
  padding:0;
  
}

h1 {
  font-size:24px; text-align:center; line-height:32px; color:#e01a52; display:block;
  padding-bottom:24px;
}

div {
  position:absolute; top:0px; left:0px; right:0px; bottom:0px;
  font-size:24px; color:#541a3d; background:white;
  text-align:center; line-height:32px; padding-top:64px;
}

a.animated.bounceInRight{background-color: #fcdbdb; padding:12px 0 12px 0;color: #e01a52;}

div#Credits{
  padding: 14px;
  font-size: 20px;
  line-height:28px;
}


div#Levels{
  /*padding: 10px;*/
  line-height:28px;
  font-size: 22px;
}


#Options table{
  margin:auto;
}

#Options table td{
  padding: 5px;
}

/*
#soundVolume, #musicVolume{
  user-select: none;
  cursor: pointer;
  background: #3071a9;
}
*/

body #MainGame-Menu, #MainGame-Menu > div, div {background-color: #fcdbdb}

#MainGame-Menu > div {
  display: none;
}

#MainGame-Menu, #gameCanvas{
  margin-top: 0px;
  padding: 9px;
}


a {
  text-decoration:none; display:block; color:#541a3d; padding: 5px;
}

a:hover {
  color:#e01a52;
}




/* styles to make the volume sliders look nice */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 9.5px 0;
  background-color: hsl(0,85%,92%);
}
/*Firefox padding bug*/
@-moz-document url-prefix() {
   input[type=range] {
   padding-top: 9px;
   background-color: hsl(0,85%,92%);
  }
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #541a3d;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 2px 4px #000000, 0px 0px 2px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 3px;
  background: #e01a52;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #67204b;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #541a3d;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 2px 2px 4px #000000, 0px 0px 2px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 3px;
  background: #e01a52;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #41142f;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #541a3d;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 2px 2px 4px #000000, 0px 0px 2px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 3px;
  background: #e01a52;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #541a3d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #67204b;
}


/* fix for ms edge not displaying the slider */
#musicVolume, #soundVolume { display:block; width:256px; height:32px;  }