main h1 {
  margin: 0; }

main h2 {
  margin: 2rem 0; }

main h3 {
  margin: 2rem 0; }

main h4 {
  margin: 1rem 0; }

button {
  margin: 0 0.5rem;
  padding: 0.5rem; }

#osslt-main {
  grid-column: 2; }
  @media screen and (max-width: 1000px) {
    #osslt-main {
      padding: 1rem; } }
  @media screen and (min-width: 1000px) {
    #osslt-main {
      padding: 2rem; } }
  #osslt-main h2 {
    margin: 2rem 0 0; }
  #osslt-main img {
    max-width: 50%;
    margin: 0 auto; }

.osslt-full-p {
  flex-basis: 100%; }

#osslt-test-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  text-align: center;
  margin-bottom: 2rem; }
  #osslt-test-links p {
    margin: 0rem;
    padding: 1.3rem 0;
    font-size: 2rem;
    text-align: center; }
    @media screen and (max-width: 1500px) {
      #osslt-test-links p {
        flex-basis: 50%;
        line-height: 2.5rem; } }
    @media screen and (min-width: 1500px) {
      #osslt-test-links p {
        line-height: 1.2rem;
        flex-basis: 33%; } }
.osslt-test-links-subtitle {
  font-size: 1rem; }

#osslt-explanation-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 2rem; }
  @media screen and (max-width: 1500px) {
    #osslt-explanation-box {
      flex-direction: column; } }
  #osslt-explanation-box .question-type-30 {
    padding: 1rem 0; }
    @media screen and (min-width: 1500px) {
      #osslt-explanation-box .question-type-30 {
        flex-basis: 30%; } }
  #osslt-explanation-box .question-type-50 {
    padding: 1rem 0; }
    @media screen and (min-width: 1500px) {
      #osslt-explanation-box .question-type-50 {
        flex-basis: 47%; } }
.osslt-strategy-video {
  max-width: 100%;
  margin: 2rem auto;
  border-radius: 5px; }

.correct {
  border: 2px solid green;
  border-radius: 5px; }

.incorrect {
  border: 2px solid red;
  border-radius: 5px; }

.question {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem; }

.question-content {
  display: flex;
  flex-direction: column; }

.question-text {
  flex-basis: 100%; }

.mc-answers {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 1rem; }

.grammar-list {
  margin: 1rem 0;
  line-height: 1.5rem; }
  .grammar-list ul {
    list-style: none; }

.identification-text {
  line-height: 1.5rem; }

.question-description {
  margin: 1rem 0;
  line-height: 1.5rem; }

.osslt-response-short {
  width: 100%;
  margin: 2rem 0 0; }
  @media screen and (orientation: landscape) {
    .osslt-response-short {
      height: 50vh; } }
  @media screen and (orientation: landscape) and (min-width: 1000px) {
    .osslt-response-short {
      height: 20vh; } }
  @media screen and (orientation: portrait) {
    .osslt-response-short {
      height: 60vh; } }
  @media screen and (orientation: portrait) and (max-width: 1000px) {
    .osslt-response-short {
      height: 15vh; } }
.osslt-response-long {
  width: 100%;
  margin: 2rem 0 0; }
  @media screen and (orientation: landscape) {
    .osslt-response-long {
      height: 80vh; } }
  @media screen and (orientation: portrait) {
    .osslt-response-long {
      height: 50vh; } }
.wc-bar {
  display: flex;
  height: 3rem;
  margin: 1rem 0; }

.wc-number {
  flex-basis: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; }

.wc-scale {
  flex-basis: 80%;
  display: flex;
  align-items: center;
  position: relative;
  border: solid 1px black;
  border-radius: 5px;
  background: linear-gradient(to left, #6176ff, white);
  text-align: center;
  overflow: hidden; }

.wc-markers {
  flex-basis: 100%;
  display: flex;
  align-items: center; }

.short-scale {
  flex-basis: 33.333%; }

.long-scale {
  flex-basis: 16.666%; }

.wc-arrow {
  position: absolute;
  bottom: 0;
  left: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid black; }

.osslt-mc-answer {
  padding: 0.35rem;
  display: inline-flex;
  align-items: center; }
  .osslt-mc-answer label {
    margin-left: 25px; }

.button-box {
  padding: 2rem 0; }

#score-modal {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); }

#score-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: 2rem;
  max-height: 90vh;
  border: 1px solid #333961;
  border-radius: 5px;
  background-color: #c7ceff;
  overflow: auto; }
  #score-panel span {
    cursor: pointer; }
  #score-panel p {
    text-align: center; }
  #score-panel .modal-close {
    align-self: flex-end; }
  #score-panel button {
    margin-top: 1rem;
    padding: 1rem; }

.mc-results {
  display: flex;
  flex-direction: column;
  align-items: center; }

#gptlt-main-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (max-width: 1000px) {
    #gptlt-main-menu {
      flex-direction: column;
      padding: 0; } }
  #gptlt-main-menu a, #gptlt-main-menu a:visited, #gptlt-main-menu a:hover {
    color: white; }

.gptlt-menu-title {
  width: 100%;
  font-weight: 700;
  font-size: 2rem; }

.gptlt-page-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #0017AD;
  background-color: #001EE0;
  color: white;
  border-radius: 5px;
  flex-basis: 20%;
  padding: 2rem;
  list-style: none; }
  @media screen and (max-width: 1000px) {
    .gptlt-page-item {
      margin: 1rem 0; } }