CSS - Marcel Franzen

@charset "utf-8";
@font-face {
	font-family: Typograph;
	src: url('typograph.ttf');
}

/* CSS Document */
/* COPYRIGHT MARCEL FRANZEN */
body {
	margin: 0px;
	padding: 0px;

    font-family: Typograph;

    background-color: #0f0f0f;
}

#login-box {
    position: absolute;
    width: 535px ;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-left: -267.5px;
    margin-top: -200px;
}

#logo {
    width: 365px ;
    margin-left: auto;
    margin-right: auto;
}

#text_boost {
    color: white;
    text-align: center;
    margin-top: 4%;
}

#slider1 {
    position: relative;
    width: 420px;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 5%;
}

#slider2 {
    position: relative;
    width: 420px ;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 10%;
}

/* -- slider -- */

input[type=range] {
  -webkit-appearance: none;
  width: 420px;
  margin: 9.8px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 420px;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid #ffffff;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 0px solid #00c4ff;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: #00c4ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range]::-moz-range-track {
  width: ;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid #ffffff;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 0px solid #00c4ff;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: #00c4ff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 420px;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #f2f2f2;
  border: 0.2px solid #ffffff;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-fill-upper {
  background: #ffffff;
  border: 0.2px solid #ffffff;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 0px solid #00c4ff;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  background: #00c4ff;
  cursor: pointer;
  height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ffffff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ffffff;
}