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

body{
  background: #3a3a4b42;
}

.app {
  background-color: rgb(64, 49, 224);
  width: 90%;
  max-width: 600px;
  margin: 100px, auto, 0;
  border-radius: none;
  padding: 0px;
}

.app h1{
  font-size: 25px;
  font-family: 'Ariel';
  color: white;
  font-weight: 600px;
  border-bottom: 1px, solid #302c2c;
  padding-bottom: 30px;
}

.quiz {
  padding: 20px 0;
}

.quiz h2 {
  font-size: 30px;
  font-family: 'Ariel';
  color: #f3f4f7;
  font-weight: 600px;
}

.btn {
  background: white;
  color: #001e4d;
  font-weight: 500px;
  width: 100px;
  border-bottom: 1px, solid #222;
  padding: 10px;
  margin: 10px, 0;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
  transition: all, 0.3s;
}

 .button:hover:not([disabled]) {
  background-color: darkgrey;
  color: white;
 }
 .btn.disabled{
  cursor: no-drop
 }

 .next-btn {
  background: darkgrey;
  color: white;
  font-weight: 500px;
  width: 150px;
  border: 0px;
  padding: 10px;
  margin: 20px, auto 0;
  border-radius: 4px;
  cursor: pointer;
  display: none;
 }

 .correct {
   background: greenyellow
 }

 .incorrect {
  background: red
}