body {
  margin: 0;
  padding: 0;
}
#wrapper {
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 20px;
  background-color: lightgreen;
  height: 1500px;
}
#main-body {
  margin-right: 10px;
  margin-top: 10px;
  height: 1200px;
  background-color: lightblue;
  top: 0px;
  margin-left: 10px;
}
#slider {
  left: 0px;
    right: 0px;
 /* height: 200px;*/
  font-size: 22px;
  /*position: relative;*/
  /*background-color: #008080;*/
  background-color: lightblue;
  
}
#quest {
  width: 400px;
  height: 200px;
  float: right;
  position: relative;
  background-color: yellow;
}
#options {
  width: 580px;
  height: 200px;
  float: left;
  position: relative;
  background-color: white;
}
.slide {
  display: none;
  background-color: white;
  right: 0px;
/*  height: 200px;*/
  /*position: absolute;*/
  left: 0px;
}
.slide.active {
  display: block;
}
		#buttons {
		  margin-top: 0;
		  position: absolute;
		  left: 5%;
		}
		#submit {
		  right:10%;
		  position: absolute;
		}
		#btn1, #btn2 {
  border: 1px solid #1d36ca;
  margin: 1px 5px 1px 10px;
  padding: 10px;
  cursor: pointer;
  width: 70px;
}
#btn1:hover, #btn2:hover {
  background-color: lightblue;
}
#btn1:focus, #btn2:focus {
  outline-color: invert;
  outline-style: none;
  outline-width: 0;
}

#btnq1, #btnq2, #btnq3, #btnq4, #btnq5, #btnq6, #btnq7, #btnq8, #btnq9, #btnq10, #btnq11, #btnq12, #btnq13, #btnq14, #btnq15, #btnq16, #btnq17, #btnq18, #btnq19, #btnq20, #btnq21, #btnq22, #btnq23, #btnq24, #btnq25, #btnq26, #btnq27, #btnq28, #btnq29, #btnq30, #btnq31, #btnq32, #btnq33, #btnq34, #btnq35, #btnq36, #btnq37, #btnq38, #btnq39, #btnq40, #btnq41, #btnq42, #btnq43, #btnq44, #btnq45, #btnq46, #btnq47, #btnq48, #btnq49, #btnq50, #btnq51, #btnq52, #btnq53, #btnq54, #btnq55, #btnq56, #btnq58, #btnq58, #btnq59, #btnq60, #btnq61, #btnq62, #btnq63, #btnq64, #btnq65, #btnq66, #btnq67, #btnq68, #btnq69, #btnq70, #btnq71, #btnq72, #btnq73, #btnq74, #btnq75, #btnq76, #btnq77, #btnq78, #btnq79, #btnq80, #btnq81, #btnq82, #btnq83, #btnq84, #btnq85, #btnq86, #btnq87, #btnq88, #btnq89{
  cursor: pointer;
  width: 25px;
  height: 20px;
}

/*#topbuttons{
  cursor: pointer;
  width: 40px;
  height: 30px;		
}
*/

#timer2 {
  text-align: center;
  font-size: 40px;
  margin-top: 0px;
  color: red;
}
#navigation ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#navigation ul li {
  opacity: 0.8;
  text-align: center;
  line-height: 25px;
  background-color: blue;
  float: left;
  margin-right: 2px;
  width: 150px;
  height: 25px;
  font-size: 13px;
}
#navigation ul li a {
  color: white;
  text-decoration: none;
  display: block;
}
#navigation ul li a:hover {
  background-color: red;
  cursor: pointer;
}
#navigation ul li ul li {
  display: none;
}
#navigation ul li:hover ul li {
  display: block;
}

/* On MOBILE screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-width: 380px) {
  #slider, .slide { font-size:15px;} 
#main-body {
  margin-right: 2%;
  margin-top: 2%;
  height: 1200px;
  background-color: lightblue;
  top: 0px;
  margin-left:2%;
}



}