#heading{
  font-size: 22px;
  width:60%;
  margin-top: 45px;
}

#y,#s,#t,#yb {
  display: inline-block;
  
}



#contain {
 display: inline-block;
  position-left: 20px;
  margin-right: 10px;
  
}

#h1 {
  position: absolute;
  display: inline-block;
  margin-right:-10px;
  margin-left: 10px;
  height: 25px;
  margin-top: 74px;
  font-size: 20px;
  vertical-align: middle;
}

#h2 {
  position: absolute;
  left: 238px;
  margin-right:0;
  margin-left: 0;
  height: 0;
  margin-top: -68px;
  font-size:18px;
  }

#trapcontainer{
  width:380px;
  height:380px;
  float:left;
  margin-left: -40px;
 margin-bottom: -80px;
}
#trap{
}

#a{
position: relative;
top: 160px;
left: 100px;
}
#b{
position: relative;
left: 290px;
top:-150px;
}
#w {
position: relative;
top:-80px;
 left: 200px;
    
  font-size:18px; 
}


#triangle {
  display:inline-block;
  margin-left: -20px;
  margin-right: -100px;
  margin-bottom: 10px;
  vertical-align: middle;
  width: 390px;
  
}




#answer,#answer1,#answer1b,#answer1c,#answer2,#answer2b,#answer2c,#answer3,#answer3b,#answer3c,#answer4,#answer4b,#answer5,#answer5a,#answer5b,#answer5x,#answer5y,#answer6,#answer6b,#answer7,#answer7b,#answer8 {
  border-radius: 5px;
  height: 32px;
  width: 80px;

}

#card1, #card2, #card3, #card4 {
  display: inline-block;
  width: 30px;
  height: 40px;
  border: 2px solid black;
  margin: 5px;
  font-size:25px;
  padding-top: 5px;
  text-align: center;
  vertical-align: middle;
}

.end {
  display: inline-block;
 
  margin-right: 10px;
}


@media screen and (min-width:300px) and (max-width:600px){

#heading{
  font-size: 16px;
  width:60%;
  margin-bottom: 15px;
  top:35px;
}

#answer1,#answer2,#answer3,#answer3b,#answer3c,#answer4,#answer5,#answer6,#answer7,#answer8x, #answer8y {
  border-radius: 5px;
  height: 32px;
  width: 70px;
}



#bar1,#bar2,#bar3,#bar4 {
  display: none;
  width: 95%;
}



.qnumber {
  display: block;
  float: left;
  font-weight: bold;
  margin-left: 30px;
}

.question {
  display: inline-block;
  position-left: 20px;
  margin-left: 55px;
  margin-right: 10px;
 
   }

#a,#b,#w,#y,#s,#t,#yb {
  display: inline-block;
  margin-left: 20px;
  
}



#trapcontainer{
  position: relative;
  right:30px;
  width:350px;
  height:350px;
  margin-bottom: -80px;
  
}
#trap{
width:100%;
margin-left: 10px;  
}

#a{
position: relative;
top: 130px;
left: 58px;
}
#b{
position: relative;
left: 220px;
top:-120px;
}
#w {
position: relative;
top:-60px;
 left:150px;
    
  font-size:18px; 
}

#triangle {
  display:inline-block;
  right: 50px;
  margin-bottom: 10px;
  vertical-align: middle;
  width: 230px;
  
}

#h1 {
  position: relative;
  display: inline-block;
  bottom:50px;
  height: 25px;
  font-size: 18px;
  vertical-align: middle;
}

#h2 {
  position: relative;
  display: inline-block;
  left: -16px;
  top:37px;
  margin-right:0;
  margin-left: 0;
  height: 0;
 font-size:14px;
  }


}