@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
* {
  margin:0;
  padding:0;
  border:0;
  box-sizing: border-box;
}
body {
  background-color:#333;
  font-family: 'Poppins', sans-serif;
  height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.progress-bar {
  width:100%;
  height:3px;
  position:absolute;
  top:0px;
}
.bar {
  background-color: #0f0;
  height:inherit;
  transition:.17s linear;
}

h1 {
  font-size:34px;
  font-weight:700;
  color:#fff;
  margin-bottom:30px;
  text-align:center;
}
.quiz {
  display:flex;
  flex-direction: column;
}
.question {
  font-size:18px;
  margin-bottom:15px;
  color:#fff;
  font-weight:600;
  text-align:center;
}
.alternatives {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.alternative {
  width:500px;
  background-color:#222;
  display:flex;
  align-items:center;
  border-radius:10px;
  padding:5px 8px;
  color:#fff;
  word-wrap: break-word;
  margin-bottom:7px;
  cursor:pointer;
}
.alternative:hover {
  background-color:#000;
}
.alternative span {
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#111;
  min-width:30px;
  border-radius:15px;
  font-size:18px;
  color:#fff;
  font-weight:700;
  margin-right:10px;
}

.results {
  background-color:#fff;
  display:none;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  height:200px;
  padding: 7px 10px;
  border-radius:25px;
}
.congrats {
  font-size:26px;
  font-weight:700;
}
.pct {
  font-size:22px;
  font-weight:600;
}
.info {
  font-size:18px;
  font-weight:600;
}
.results button {
  padding: 7px 10px;
  font-size:16px;
  font-weight:400;
  border:2px solid #000;
  border-radius:10px;
  cursor:pointer;
  background-color:#ccc;
}


footer {
  margin-top:23px;
  font-size:13px;
  color:#fff;

}

@media (max-width: 550px) {
  .alternative {
    width:310px;
  }
  h1 {
    text-align:center;
  }
}