@font-face {
  font-family: astral;
  /*a name to be used later*/
  src: url(libraries/outerspace_militia/OuterspaceMilitia.ttf);
  /*URL to font*/
}

@font-face {
  font-family: orbiter;
  /*a name to be used later*/
  src: url(libraries/earth_orbiter/earthorbiter.ttf);
  /*URL to font*/
}

@media only screen and (max-width: 1500px) {
  #domElementLoc {
    height: 92vh;
  }
}


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {
  #domElementLoc {
    height: 92vh;
  }
}

/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
  #domElementLoc {
    height: 92vh;
  }
}

/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
  #domElementLoc {
    height: inherit;
  }
}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
  #domElementLoc {
    height: inherit;
  }
}


/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {
  #domElementLoc {
    height: inherit;
  }
  h2 {
    font-size: 1.5em;
  }
}

body {
  padding-bottom: 10px;
  margin: 0;
  background-image: url("libraries/circuit-board-background.jpg");
}

h2 {
  font-family: astral;
  color: black;
  border-radius: 0 0 30px 30px;
  text-align: center;
  padding: 5px;
  background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #828282), color-stop(0.5, #B8B6B8), color-stop(1, #828282));
  background-image: -o-linear-gradient(bottom, #828282 0%, #B8B6B8 50%, #828282 100%);
  background-image: -moz-linear-gradient(bottom, #828282 0%, #B8B6B8 50%, #828282 100%);
  background-image: -webkit-linear-gradient(bottom, #828282 0%, #B8B6B8 50%, #828282 100%);
  background-image: -ms-linear-gradient(bottom, #828282 0%, #B8B6B8 50%, #828282 100%);
  background-image: linear-gradient(to bottom, #828282 0%, #B8B6B8 50%, #828282 100%);
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  border-bottom: 1px solid black;
}

h4 {
  font-family: orbiter;
  color: white;
}

#ballSettings {
  border: ridge 10px gray;
  padding: 5px;
}

canvas {
  vertical-align: top;
  /*border: ridge 10px gray;*/
}

table {
  margin-bottom: 20px;
}

#canvasLoc {
  border: ridge 10px gray;
  height: 92vh;
}

#domElementLoc {
  padding: 10px;
  /*height:92vh;*/
  border: ridge 10px gray;
  font-family: orbiter;
  background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
  background-color: #282828;
  background-size: 16px 16px;
}

#domElementLoc label {
  color: white;
  margin-bottom: 0px;
}

span {
  color: white;
}

input:not(.text) {
  margin-left: 5px;
  width: 95%;
  margin-bottom: 15px;
}

table,
button,
label {
  width: 100%;
}

.btn {
  border-top: 1px solid #f9fbfc;
  border-bottom: none;
  border-right: none;
  border-left: none;
  background: #c9d1d6;
  background: -webkit-gradient(linear, left top, left bottom, from(#999b9c), to(#c9d1d6));
  background: -webkit-linear-gradient(top, #999b9c, #c9d1d6);
  background: -moz-linear-gradient(top, #999b9c, #c9d1d6);
  background: -ms-linear-gradient(top, #999b9c, #c9d1d6);
  background: -o-linear-gradient(top, #999b9c, #c9d1d6);
  padding: 7px 14px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
  color: white;
}

.btn:hover {
  border-top-color: #717273;
  background: #717273;
  color: #ccc;
}

.btn:active {
  border-top-color: #525354;
  background: #717273 !important;
}

.btn:focus {
  border-top-color: #525354;
  background: #717273 !important;
  outline: none;
}