body, html
{
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
   font-size: 16px;
   font-family: helvetica, arial;
   background: #f9f9f9;
   color: #111;
}
 
.wrapper
{
   width: 100%;
   height: 100%;
   display: table;
}
 
.main
{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}
 
.quiz-frame
{
   border: 0;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
 
.quiz__head
{
   font-size: 20pt;
   margin: 10px;
   margin-bottom: 50px;
}
 
.head__content
{
   padding: 5px;
}
 
.quiz__body
{
   margin: 10px;
}
 
.quiz__footer
{
   position: absolute;
   bottom: 0;
   display: block;
   width: 100%;
}
 
.footer__content
{
   padding: 5px;
}
 
.button
{
   border: 0;
   border-radius: 10px;
   background: #6477EB;
   color: #fff;
   padding: 10px 25px;
   width: 70%;
   font-size: 15pt;
   display: block;
   margin: 2px auto;
   cursor: pointer;
}

.option
{
   border-radius: 10px;
   font-size: 12t;
   width: 50%;
   display: block;
   
}
.option_elem
{
   display: flex;
   justify-content: start; 
   margin: 10px auto;
}
.asutp_elem
{
   border-radius: 10px;
   width: 60%;
   height: 40%;
   font-size: 15t;
   margin: 10px auto;
   vertical-align: : center; 
}
.asutp
{
   
   border-radius: 10px;
   width: 40%;
   font-size: 15t;
   cursor: pointer;
   display: flex;
   justify-content: center; 
   align-items: : center; 
   margin: 30px auto;
   
}

.index
{
   
   width: 30%;
   font-size: 15pt;
   display: flex;
   justify-content: center; 
   margin: auto;
   
}
 
.button_wrong
{
   background: #EB6465;
}
 
.button_correct
{
   background: #5EB97D;
}
 
.button_passive
{
   background: #B3B3B3;
}