style.css

body {
    background-color: #f8f9fa!important;
}
*:focus {outline: none !important; box-shadow: none  !important;}
.bg-purple {
    background-color: #6f42c1;
}
.answer-choices-box input{
    display: none;
}
input[type="radio"] + label{ 
    cursor: pointer;
}
input[type="radio"]:checked+label{ 
    background: #ff9800;
    color: #fff;
}
.count-down-box{
    right: 1rem;
    top:1rem;
    padding: 10px;
}
.count-down-box .badge{
    min-width: 80px;
    line-height: 30px;
}
.quiz-start-icon{
    width:100px;height:100px; display:block;
}
.quiz-start-text{
    font-size:60px; font-weight:bolder; margin-left:20px;
}
.start-to-quiz{
    margin-top:70px;
    padding:40px;
}
.d-flex.d-none{
    display: none !important;
}


@keyframes flipInX {
    from {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }
  
    40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  
    60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }
  
    80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
  
    to {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
  }
  
  .flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }