body{font-family:'Helvetica',Sans-Serif;font-size:1.2em	;}

 #question1{font-size:3vw;
}

a{text-decoration:none;}
#RAG{text-align: center; padding-top: 25px;font-size:5em;font-family:'Chalkboard','Cousine','Times new Roman','Helvetica','Comic Sans MS'}

#test{font-size: 0px;}

#hint1{color:green;}
#hint2{color:blue;}
#hint3{color:purple;}
#solution{font-size:2em;padding:12px; 
  border: 3px solid red; text-align: center;}
#container{width:90%; margin-left: auto;margin-right: auto; background-color: white;}
#end{font-size:3em; }
	#logo{float:right;z-index: -1;width:20%;max-height:44px;max-width:180px;background-color: none;

	background: rgba(255, 165, 0, 0.0);
    padding: 0px;
    color: #fff;
    text-align: center;
    font-size: 26px;

}
	#title{font-size:25px;}
	#audio1 {width:0px;height:0px;position:absolute;top:-200px;}
	#audio2{width:0px;height:0px;position:absolute;top:-200px;}
	#audio3{width:0px;height:0px;position:absolute;top:-200px;}
	big{font-size: 1.4em; color:#225522;}
	button{color:#ffffff;font-size:1.4em;background-color: #555588}
  
  #answer123{text-align:center;}

#number_answered{font-size:8vw;color:#0000ff; display:inline;}

#unit_chosen{font-size:8vw;color:#0000ff; display:inline;}

#banner1{width:100%;text-align: left;font-size:2.8vw;margin-bottom:12px;}

#red{color: blue;}
#green{color:  green;}
#amber{color: orange;}


.topic{font-size:1.2em; cursor:pointer; background-color: #aeaeae; padding:12px; border-radius:8px; text-align:center; margin-top: 5px;}

.topic:not( :hover ){ background-color: #aeaeae; color:white; }
.topic:hover{  background-color: #00cf00; color:black; }

#revealBut{font-size:1.2em; cursor:pointer; background-color: #aeaeae; padding:12px; border-radius:8px; text-align:center; margin-top: 5px;}

#revealBut:not( :hover ){ background-color: #aeaeae; color:white; }
#revealBut:hover{  background-color: #00cf00; color:black; }

#checkBut{margin-left: auto;margin-right: auto;max-width: 30%;font-size:1.2em; cursor:pointer; background-color: #aeae00; padding:12px; border-radius:8px; text-align:center; margin-top: 25px;}

#checkBut:not( :hover ){ background-color: #aeaeae; color:white; }
#checkBut:hover{  background-color: #00cfcf; color:black; }

#nextBut{font-size:1.2em; cursor:pointer; background-color: #aeaeae; padding:12px; border-radius:8px; text-align:center; margin-top: 5px;}

#nextBut:not( :hover ){ background-color: #aeaeae; color:white; }
#nextBut:hover{  background-color: #cf00cf; color:black; }


#setBut{font-size:1.2em; cursor:pointer; background-color: #aeaeae; padding:12px; border-radius:8px; text-align:center; margin-top: 5px;}

#setBut:not( :hover ){ background-color: #aeaeae; color:white; }
#setBut:hover{  background-color: #cf00cf; color:black; }


#calc{position:relative;top:-90px;float:right;font-size:0.8em; cursor:pointer; background-color: #aeaeae; padding:12px; border-radius:8px; text-align:center; margin-top: 5px;max-width:120px;}

#calc:not( :hover ){ background-color: #aeaeae; color:white; }
#calc:hover{  background-color: #cfaaca; color:black; }

.transparent-bg{
	background: rgba(255, 165, 0, 0.73);
    padding: 20px;
    color: #fff;
    text-align: center;
    font-size: 26px;
}

#question{ width: 100%; background-color: white;}

#correct_big{ font-size:65px; color:green; z-index:10; text-align:center;
    position: fixed;
  top: 50%; font-weight: bolder;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);    height: 100%; width:100%;
        background-color:rgba(255,255,255,0.3);  line-height:1000%;  }

        #tick{position:absolute;top:400px; left: 450px;}

        #quantities{font-size: 1em;max-width: 100%;}

#correct_big1{color: green;display: inline;font-size: 4em;position: relative;top: -105px;}
#wrong_big{color:red; display: inline;font-size: 4em;position: relative;top: -105px;}
#the_end{position: absolute; top: 0; left: 0;color: lightgreen; font-size: 10.2em;width: 100%;height: 100%;text-align: center;background: rgba(0,0,200,.5)}
#unit11{color: green;font-size: 1.7em;display: inline;}



@media only screen and (max-width: 1000px) {
  
#question1{font-size:25px;
}
 

#scNumber{font-size: 2.8vw;}

#red{font-size:60px;}
#amber{font-size:60px;}
#green{font-size:60px;}
#unit11{font-size:50px;}
#checkBut{font-size:22px;}
#checkBut{max-width: 60%;font-size: 22px;}

}