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

* {
  margin : 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing : border-box;
}

body{
  background : #7e74e2;
}

.app{
  background : #fff;
  width: 90%;
  max-width : 700px;
  margin : 25px auto 25px;
  border-radius : 10px;
  padding : 30px;
}

.app h1{
  font-size : 25px;
  color : #001e4d;
  font-weight : 600;
  border-bottom : 1px solid #333;
  padding-bottom : 30px;
}

.quizz{
  padding : 20px 0;
}

.quizz h2{
  font-size : 18px;
  color : #001e4d;
  font-weight : 25;
}

.btn{
  background: #fff;
  color : #222;
  font-weight : 500;
  border : 1px solid #222;
  padding : 10px;
  margin : 10px 10px;
  min-width : 100px;
  text-align : left;
  border-radius : 20px;
  cursor : pointer;
  transition : all 0.3s;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  display: inline-block;
}

.btn:hover:not([disabled]){
  background : #222;
  color : #fff;
}

.btn:disabled{
  cursor : no-drop;
}

.btn:selected{
  background : #252525;
}

#next-btn{
  background: #222;
  color : #fff;
  width : 150px;
  font-weight : 500;
  border : 1px solid #222;
  padding : 10px;
  margin : 20px auto 0;
  text-align : center;
  border-radius : 4px;
  cursor : pointer;
  transition : all 0.3s;
  display : none;
}

#next-btn:hover{
  background :#fff;
  color :  #222;
}

.index{
  background: #7e74e2;
  color : #222 ;
  height : 30px;
  width : 30px;
  border : 1px solid black;
  border-radius : 12px;
  cursor : pointer;
  transition : all 0.3s;
  text-align: center;
  transition : all 0.3s;
  cursor : pointer;
  font-weight: bold;
}

.index:hover{
  background: #5b52bf;
  color : #FFF ;
  height : 35px;
  width : 35px;
  border-radius : 15px;
  transition : all 0.5s;
}

#index-btn{
  background: #222;
  width : 100%;
  height : 35px;
}



.correct{
  background : #9aeabc ;
}

.incorrect{
  background : #ea9a9a ;
}