* {
  font-family: "Roboto Slab", serif;
}

.hide {
  display: none;
}
.correct {
  color: green;
  font-weight: bold;
}
.wroung {
  color: red;
  font-weight: bold;
}

.body {
  width: 100vh;
}
body {
  background-image: url(home.jpg);
  background-size: 100%;
}
#container {
  height: 100%;
  border-radius: 10px;
  margin-top: 10%;
  width: 40%;
  background-color: #ff8f56;
  border: 3px solid green;
  padding: 10px;
  box-shadow: 0 38px 16px -6px rgb(138, 87, 21);
}

.head_group {
  width: 40%;
  display: flex;
  align-items: center;
  font-weight: bold;

  color: black;
  border-radius: 10px;
  justify-content: space-between;
  padding: 2%;
  background-color: rgb(18, 102, 180);
}

#container_qw {
  height: 100%;
  border-radius: 10px;
  margin-top: 10%;
  width: 50%;
  background-color: #ff8f56;
  border: 3px solid green;
  padding: 10px;
  box-shadow: 0 38px 16px -6px rgb(138, 87, 21);
}
#qu-heading {
  display: flex;
  border-radius: 15px;
  align-content: center;
  justify-content: space-between;
}

#question_container {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
}
#q_container {
  display: flex;
  align-content: center;
  justify-content: flex-start;
}

@media (max-width: 600px) {
  body {
    background-image: url(home620px.jpg);

    background-size: auto;
  }
  #container {
    width: 90%;
  }
  #container_qw {
    margin-top: 40%;
    width: 90%;
  }
}