@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Orbitron:wght@500;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, button {
  font-family: 'Poppins', sans-serif;
}

p, label, .option {
  font-family: 'Inter', sans-serif;
}

.logo {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
}

body{
  width: 100%;
  /* border: solid; */
  /* display: flex; */
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  overflow: hidden;
}
.FormSection{
  display: flex;
height: 100%;

  flex-direction: column;
  border-radius: 8px;
  justify-content: center;
  /* border: solid; */
  align-items: center;
}
.formDiv{
  box-shadow: 1px 1px 10px #d0cdcd,
            1px 1px 10px #d0cdcd;
  padding: 20px;
  /* border: solid; */
}
.FormSection h2{
  font-size: 35px;
}
.FormSection P{
  font-size: 18px;
  color: grey;
  margin: 5px 0;
}
form{
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* border: solid; */
}
.formBtn{
  text-align: end;
}
.formBtn button{
  padding:5px 12px;
  font-size: 15px;
  border-radius: 7px;
  background-color: #0af331;
  border: none;
  color: white;
}
form input{
  width: 600px;
  padding: 11px;
  border-radius: 8px;
  outline: none;
  border: 1px solid grey;
}
form input:focus{
border: 1px solid #0af331 ;
}

.WelcomeSection{
  margin: 10px 10px;
  border-radius: 8px;
  box-shadow: 2px 2px 10px #d0cdcd,
            -2px -2px 10px #d0cdcd; 
  /* border: solid; */
  display: flex;
  flex-direction: column;
}
.WelcomeSection h1{
  /* margin-top: 20px; */
  padding: 0 10px;
  font-size: 40px;
  font-family: 'poppins', sans-serif;
  font-weight: 500;
}
.importantAnnouncement{
  /* border: solid; */
   box-shadow: 2px 2px 10px #d0cdcd,
            -2px -2px 10px #d0cdcd;
  padding: 10px 15px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 98%;
  margin: 30px auto;
}
.importantAnnouncement h2{
font-weight: 450;
font-size: 24px;
}
.importantAnnouncement ul{
   font-family: 'Inter', sans-serif;
  padding: 5px 50px;
  color: #737373;
}
.importantAnnouncement ul li{
  font-size: 17px;
  padding: 2px 0px;
  color: #737373;
}
table{
   font-family: 'Inter', sans-serif;
  border-collapse: collapse;
  box-shadow: 2px 2px 10px #d0cdcd,
            -2px -2px 10px #d0cdcd;
  font-size: 17px;
  margin: 2px auto;

}
table td{
  padding: 10px 10px;
  border: none;
}
table tr{
  /* border: 1px solid; */
  box-shadow: 1px 1px 1px #d0cdcd,
            -1px -1px 1px #d0cdcd;
}
thead{

  background-color: #eaf0fb;
}
.lastAction{
  padding-left: 10px;
}
.StartBtn{
  background-color: #95b3f4;
color: rgb(33, 31, 31);
  padding: 2px 5px ;
  border-radius: 8px;
  border: 1px solid #769bec;
  cursor: pointer;
}
.StartBtn:hover{
  background-color: color-mix(in srgb, #95b3f4, transparent 40%);
}
.passedBtn{
  padding: 2px 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid #7fe8ac;
  background-color: #d1fae5;
}
.failedBtn{
  padding: 2px 5px;
  border-radius: 8px;
  outline: none;
  border: 1px solid #ff1500;
  background-color: #ef3f09;
  color: white;
}
.failedBtn:hover{
  border: 1px solid #ff1500;
  background-color: color-mix(in srgb, #ef3f09  ,transparent 5%);
}
.passedBtn:hover{
  background-color: #bbf3d6;
  
} 
.firstLastSec{
  background-color: rgb(56, 55, 55);
  margin-top: 40px;
  
  border-radius: 2px ;
  text-align: center;
  color: rgb(177, 174, 174);
  padding: 10px;
  font-size: 28px;
}
.ShowQuestion{
  width: 50%;
  margin: 60px auto 10px auto;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  /* border: solid; */
     box-shadow: 5px 3px 10px #888888,
            -5px -3px 10px #888888;

}
.ShowQuestion .questionSec1{
 display: flex; 
 justify-content: space-between;
}
.progressBar{
  position: relative;
  margin-top: 10px;
 /* border:1px solid;  */
 background-color:#eaf0fb;
 width: 620px;
 height: 12px;
 border-radius: 10px 8px 8px 10px;
}
#line{
  border-radius: 10px 8px 8px 10px;
  position: absolute;
  width: 80%;
  background-color: green;
  height: 100%;
  /* border: solid; */
}
.timer span{
  /* border: solid; */
  font-family: 'Orbitron', sans-serif;
  font-size: 17px;
  font-weight: bold;
}
.timer {
  color: green;
}
.QuestionSection{
 
  width: 50%;
  margin: 30px auto;

  border-radius: 8px;

  display: flex;
  flex-direction: column;
 padding: 20px 20px;
    box-shadow: 5px 3px 10px #888888,
            -5px -3px 10px #888888;
}
#option{
  list-style: none;
  /* border: solid; */
}
#option li{
  border: 1px solid;
  margin-top: 6px;
  margin: 10px 0px;
  padding: 10px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
}
#option li:hover{
  background: #cbcac1;
}
.correctAns{
  background: green !important;
}
 
.wrongAns {
  background: red !important;
}

.disableli {
  pointer-events: none;
  opacity: 0.7;
}

.nextBtnDiv{
  /* border: solid; */
  margin-top: 10px;
  text-align: end;
}
.nextBtnDiv button{
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  background-color: rgb(60, 173, 60);
  border: 1px solid rgb(6, 224, 6);;
  color: white;
}
.resultSection1{
  padding: 8px 25px;
  width: 60%;
  background-color: orange;
  color: white;
  margin: 50px auto 5px auto;
  border: solid ;
  display: flex;
  border-radius: 10px;
}
.acheievement{
  display: flex;
  align-items: center;
  gap: 10px;
}
.acheiveIcon{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: white;
  width: 45px;
  height: 45px; 
}
.acheiveIcon i{
  color: orange;
  font-size: 27px;
}
.acheivementPart2 h2{
font-size: 20px;
}

.resultShow{
  width: 60%;
  margin: 0 auto;
  /* border: solid; */
  display: flex;
  border-radius: 10px;
   box-shadow: 2px 2px 10px #d0cdcd,
            -2px -2px 10px #d0cdcd;
  flex-direction: column;
}
.resultQuiz{
  width: 100%;
  /* border: solid; */
  display: flex;

  background-color: #d1fae5;
  border-radius: 10px 10px 0 0;
  justify-content: space-between;

  padding: 15px;
  align-items: center;
}
.resultQuizMain{
  display: flex;

  align-items: center;
  gap: 5px;
  /* border: solid ; */
}
.iconWinIcon i{
  font-size: 26px;
  color: green;
}
.btnPass button{
 border:1px solid #27c36a;
 padding: 2px 8px;
 background-color: #7be9b0;
 border-radius: 8px;
 text-transform: uppercase;
 outline: none;
}
.congratu h2{
  font-family: 'Inter', 'Roboto', sans-serif;
  font-weight: bold;
  margin-bottom: 2px;
  font-size: 23px;
}
.performanceSection{
  width: 100%;
  padding: 10px;
  gap: 10px;
  /* border: solid; */
  display: flex;
  justify-content: space-between;
}
.summaryCard{
  width: 50%;
  box-shadow: 2px 2px 10px #d0cdcd,
            -2px -2px 10px #d0cdcd;
  /* border: solid; */
  display: flex;
  border-radius: 10px;

  padding: 10px;
  flex-direction: column;

  justify-content: center;
}
.Card1FirstSec{
  display: flex;
  align-items: center;
  margin-top: 20px;
  /* gap: 20px; */
  justify-content: space-between;
  padding: 0 20px;
}
.totalQuestions{
  font-size: 15px;
}
.totalQuestions p{
  color: rgb(108, 108, 108);
}
.totalQuestions h3{
  font-size: 28px;
  font-weight: 600;
}
.ScoreCard{
  width: 50%;
  box-shadow: 2px 2px 10px #d0cdcd,
            -2px -2px 10px #d0cdcd;
  display: flex;
  /* border: solid red; */
  padding: 10px;
  border-radius: 10px;

  flex-direction: column;
}
.scoreCardSec1{
  padding:0 10px;
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
}
.ScoreProgress{
  /* margin-top: 10px; */
  height: 15px;
  width: 96%;
  border-radius: 10px;
  margin: 10px auto;
  /* border: solid; */
  background-color: rgb(226, 223, 223);
  position: relative;
}
#lineBar{
  width: 80%;
  position: absolute;
  /* border: solid; */
  border-radius: 10px;
  height: 100%;
  background-color:rgb(36, 167, 36);
}
.centerPercentage{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lastThing{
    box-shadow: 2px 2px 10px #d0cdcd,
            -2px -2px 10px #d0cdcd;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: solid; */
  padding: 20px 10px;
  border-radius: 0 0 10px 10px;
}
.lastBtns button{
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid;
}
.Lastbtn2{
  background-color: rgba(253, 240, 144, 0.76);
  color: rgb(255, 166, 0);
  font-weight: 600;
}

.FormSection{

  display: none;
}
.WelcomeSection{
}
.ShowQuestion{
display: none;
}
.resultSection1,.resultShow{
display: none;
}