@import "../components/buttons.css";
@import "../components/footer.css";
@import "../components/menu.css";
@import "../components/nav.css";
@import "question.css";
.grid-container {
  top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
}

#nav,
#menu,
#question {
  grid-column: 1/span 5;
}

#nav {
  order: 0;
  height: 10vh;
  min-height: 50px;
  max-height: 75px;
}

#menu {
  overflow: clip;
  order: 1;
  transition: height 300ms ease-in-out;
}

#question {
  order: 2;
  height: 80vh;
  min-height: 200px;
  max-height: 700px;
  margin-top: 2.5vh;
}

@media screen and (min-width: 50em) {
  #nav {
    grid-column: 1/span 1;
    height: 10vh;
  }
  #menu {
    grid-column: 2/span 4;
    height: 10vh;
    min-height: 50px;
    max-height: 75px;
    transition: none;
  }
  #question {
    grid-column: 1/span 5;
    height: 70vh;
    margin-top: 7.5vh;
    margin-bottom: 7.5vh;
  }
  footer {
    height: auto;
  }
}

/*# sourceMappingURL=questions.css.map */