#container{
 display: block;
 margin: 0 auto;
 width: 98%;
 height: 98%;
 background-color: #dad4e8;
 background-color: #36258c;
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}

    h2.subheading {
    display: block;
    width: 100%;
    min-width: 100%;
     background-color: #861A8E;
     color: #FFF;
     margin: 0 auto;
     text-align: center;
     font-size: 1.8em;
     padding: .5em 0;

}
#return{
display: block;
margin: 10px 0 10px 0;
background-color: #dad4e8;
padding: 8px 0;
text-align: center;
color: #FFF;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
#return a{
color: #333;
text-decoration: none;
}

#return a:hover{
color: #000;
text-decoration: none;
}
#txt{
margin:0;
padding:0;
}

#txt #info h1 { margin: .2em 0; font-size: 115%; text-align: center;font-weight: normal;color:#FFF;font-family: 'Times New Roman', serif;margin: 0 5%;text-shadow: -4px 4px 12px rgba(255, 255, 255, 0.7), 4px -4px 12px rgba(255, 255, 255, 0.7);}
#return a { margin: .2em 0; font-size: 1em; font-weight: normal; }
#txt #info p { font-size: 55%; text-align: left;font-weight: normal;color:#FFF;margin: 3%; }

#txt #info p a { color:#CCC; }
#txt #info p a:hover {color:#FFF;}

#txt #info p.copyright { font-size: 35%; text-align: center;font-weight: normal;color:#AAA; }


 #container{
 display: block;
 margin: 0 auto;
 width: 98%;
 height: 98%;
 background-color: #36258c;
 background-color: #0c5e8e;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
behavior: url(/js/PIE_beta4.htc);
}


#return{
display: block;
margin: 10px 0 10px 0;
background-color: #dad4e8;
padding: 4px 0;
text-align: center;
color: #FFF;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
border-radius: 12px 12px 0 0;
behavior: url(/js/PIE_beta4.htc);
}

#txt #info p.copyright { font-size: 8px; text-align: center;font-weight: normal;color:#999; padding: 1% 0 3% 0;}

#return{
padding:0;
font-size: 1em;
}
#return a{
color: #333;
text-decoration: none;
font-size: 70%;
line-height: 2%;
margin:0;
padding:0;
font-size: .5em;
}

#return a:hover{
color: #000;
text-decoration: none;
font-size: .5em;
}


#btnleft {
float: left;
-webkit-border-radius: 80%;
-moz-border-radius:  80%;
border-radius:  80%;
width: 20%;
background-color: orange;
margin-left: 25%;
padding: 2%;
text-align: center;
color: #FFF;
}

#btnright {
float: right;
-webkit-border-radius: 80%;
-moz-border-radius:  80%;
border-radius:  80%;
margin-right: 25%;
width: 20%;
padding: 2%;
background-color: green;
text-align: center;
}

#btnleft a div.btn, #btnright a div.btn{
text-align: center;
font-size: 60%;
text-decoration:none;
color: #FFF;
font-weight: bold;
display: block;
}

#btnleft a:hover div.btn, #btnright a:hover div.btn{
text-align: center;
font-size: 60%;
text-decoration:underline;
color: #FFF;
font-weight: bold;
display: block;

}


.label{
clear: both;
text-align: center;
font-size: 35%;
color: #000;
font-weight: bold;
margin-top: 2%;
}

.clear {
display: block;
clear: both;
}

#txt #info .subinfo{
margin-top: 5%;
}
#txt #info .subinfo p {
text-align: center;
}

ul#qstatus{
clear: both;
width: 100%;
display: block;
background-color: #000;
margin-bottom: 0;
margin: 0 auto;
}

#qstatus li{
list-style: none;
float: left;
width: 5%;
padding: .2em;
margin: 1%;
background-color: #FFF;
border: solid 1% black;
color: #000;
font-weight: bold;
text-align: center;
font-size: 120%;
}

#qstatus li.correct{
background-color: #00FF00;
color: #000;
}

#qstatus li.incorrect{
background-color: #AA0000;
color: #FFF;
}
#question, h3, h4{
margin-left: 10%;
margin-right: 20%:
margin-bottom: 1%;
font-size: 1.2em;
font-weight: 700;
}

h4{
margin:1% 0 3% 10%;
color: #DAD4E8;
}
form{
margin: 2%;
margin-left: 15%;
padding-right: 5%;
font-size: 1.4em;
}

#txt form {
line-height: 1.3em;
}
/*
input{
width: 2em;
height: 2em;
}
*/
#submitbtn{
background-color: #861a8e;
color: #FFF;
text-decoration: none;
font-size: 1em;
border: solid .1em #000;
text-align: center;
padding: .5em 1em;
margin: 0 auto; 1em
@media screen and (min-width: 768px) {
    width: 38%;
    margin: 2%;
    margin-right: 30%;
    }
}

#submitbtn:hover{
cursor: pointer;
background-color: #000;
color: #FFF;
text-decoration: none;
border: solid .1em #000;
}

#statusbar {
 font-size: 1.75rem;
    padding: .5em 0;
    margin: 0 auto;
    text-align: center;
    width: 100vw;
    font-weight: 700;

}
#txt #info  #statusbar p{
    font-size: .6em;
    font-weight: bold;
    margin:0;
    margin: 0;
    padding: .2em;
    text-align: center;
    font-style: italic;
    display: block;
}
h3{
margin:0;
padding:0;
text-align: center;
background-color: #FFF;
color: #000;
margin-bottom: 1%;
font-size: 1.2em;
padding: 0.5% 0 0.3%;
font-style: italic;
}

#question{
padding-right: 15%;
}

#txt strong em {
padding-left: 15px; background-color:#FFF; color: #990000; padding: 0 2%;margin-left: 2%;}
input[type="radio"] {
  width: 30px;
  height: 30px;
  size: 30px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 50%;
  border: solid 2px #000;
  /* Make it perfectly circular */
  border-radius: 50%;
  
  /* ADJUST BORDER SIZE HERE */
  border: 4px solid #000; 
  
  /* Center the inner dot using grid layout */
  /* display: grid; */
  place-content: center;
  cursor: pointer;
  &:checked {
    background-color: #861a8e;
  }
}
form {
    display: grid;
    grid-template-columns: 30px 1fr; 
    align-items: center;
    gap: 1em;

}