html {
  height: 100%;
  width: 100%;
}

.whole {
  display: flex;
  justify-content: center;
  background-color: rgba(119, 240, 184, 0.466);
  color: rgb(58, 69, 82);
  margin: 0;
  height: 100%;
  width: 100%;
  font-family: "Jua", sans-serif;
}

.display {
  background-color: rgb(245, 245, 245);
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 45%;
  border-left: 1vh solid gray;
  border-right: 1vh solid gray;
}

button {
  border: none;
  border-radius: 1vh;
  color: rgb(58, 69, 82);
  font-size: 150%;
  font-family: "Jua", sans-serif;
  background-color: rgb(190, 225, 236);
}

.display div {
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo {
  height: 10%;
  border-bottom: 1px dotted gray;
}

#logo a {
  text-decoration: none;
  color: rgba(53, 114, 228, 0.644);
  font-size: 180%;
  font-weight: bolder;
  font-family: "Jua", sans-serif;
}

.content {
  flex-direction: column;
  height: 80%;
}
.pic {
  display: flex;
  flex-direction: column;
  height: 66%;
  align-items: center;
  justify-content: center;
}

#result .pic {
  height: 50%;
}

.pic img {
  height: 70%;
  width: 60%;
  border-radius: 5%;
}

.sc {
  flex-direction: column;
  height: 34%;
  width: 60%;
  margin: auto;
}

.sc button {
  height: 70%;
  width: 100%;
}

.mbti_text {
  height: 50%;
  width: 100%;
}

#question {
  color: rgb(58, 69, 82);
  padding-top: 3%;
}

.yes {
  height: 50%;
  width: 100%;
}

.start_button {
  height: 50%;
  width: 100%;
}

.no {
  height: 50%;
  width: 100%;
}

#foot {
  height: 10%;
  border-top: 1px dotted gray;
  flex-direction: column;
}

#by {
  font-family: "Single Day", cursive;
}

#question_page {
  display: none;
}

#result {
  display: none;
}

#result_head {
  padding-top: 5%;
  height: 10%;
  margin: 0;
}

#result .pic {
  height: 80%;
  width: 100%;
}

#result .pic img {
  width: 60%;
}

#result #retry {
  margin-top: 10%;
  width: 40%;
  padding: 2% 0;
}

@media (max-width: 991px) {
  html {
    height: 100%;
    width: 100%;
  }
  .whole {
    height: 100%;
    width: 100%;
  }
  .display {
    height: 100%;
    width: 100%;
    border: 0;
  }
}