@font-face { font-family:Google; src: url('GFX/Product Sans Bold.ttf'); }

body,html {font-family:Google; width: 100%; height: 100%;}

div.desc {width: 80%;border-style: dashed;}
h1,h2 {width:100%;margin:0;}
div{margin:0;}
body{margin:0;padding:0;}
p {font-size:0.85em;}
div.desc {padding-right: 5%;padding-left: 5%;}

#button{width:210px;}

.pickerbutton{width:100px;
	margin:5px;
	height:100px;
	font-size:80px;
	background-color:#00cccc;
	border-width:3px;
	border-color:black;}

#Question{font-size:2.5em;}
	
img{width:75%;
	height:25%;
	border-style:solid;
	border-width:20px;}

.button {
  position: fixed;
  left: 0;
  bottom: 0;
  height:10%;
  width: 100%;
  text-align: center;
  background-color:#008F8F;
  font-size:30px;
  width:100%;
  font-family:Google;
  margin:0px;
  filter:brightness(70%);
  border:none;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

button:focus {outline:0;}

.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 300px;
  height: 75px;
  background: #00cccc;
  filter:brightness(70%);
  border-radius:25px;
  outline: none;
  position:relative;
  top:30%;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 75px;
  border-radius:25px;
  height: 75px;
  background: #dbdbdb;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 75px;
  border-radius:25px;
  height: 75px;
  background: #dbdbdb;
  border: none;
  cursor: pointer;
}

#quiz{
  top: 25%;
  filter:brightness(100%);
  font-size:50px;
  height:20%;
  width:90%;
  left:5%;
 }
#picker{
  top: 65%;
  filter:brightness(100%);
  font-size:50px;
  height:20%;
  width:90%;
  left:5%;
 }