@media (max-height: 800px) {
  :root {
    --header-height: 130px;
    --question-height: 50px;
  }

  .drag-word-page .head,
  body:has(.vocab-2) .head,
  body:has(.recording_sentences-box) .head {
    padding: 0;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .drag-word-page .head .example-head-content .cancel-question .fa,
  body:has(.vocab-2) .head .example-head-content .cancel-question .fa,
  body:has(.recording_sentences-box) .head .example-head-content .cancel-question .fa {
    font-size: 34px;
  }

  .drag-word-page .head .example-head-content .example-point,
  body:has(.vocab-2) .head .example-head-content .example-point,
  body:has(.recording_sentences-box) .head .example-head-content .example-point {
    font-size: 20px;
  }

  .drag-word-page .head .example-head-content .process-bar,
  body:has(.vocab-2) .head .example-head-content .process-bar,
  body:has(.recording_sentences-box) .head .example-head-content .process-bar {
    height: 14px;
  }

  .drag-word-page .head .example-head-content .process-bar .process-width,
  body:has(.vocab-2) .head .example-head-content .process-bar .process-width,
  body:has(.recording_sentences-box) .head .example-head-content .process-bar.process-width {
    height: 14px;
  }

  .drag-word-page .questions,
  body:has(.vocab-2) .questions,
  body:has(.recording_sentences-box) .questions {
    min-height: 50px;
    margin: 20px auto;
  }

  .drag-word-page .questions .image,
  body:has(.vocab-2) .questions .image,
  body:has(.recording_sentences-box) .questions .image {
    width: 60px;
    height: 60px;
  }

  .drag-word-page .questions .questions-tooltip,
  body:has(.vocab-2) .questions .questions-tooltip,
  body:has(.recording_sentences-box) .questions .questions-tooltip {
    width: 30px;
    height: 30px;
    font-size: 26px;
    line-height: 32px;
  }

  .drag-word-page .questions .questions-tooltip:after,
  body:has(.vocab-2) .questions .questions-tooltip:after,
  body:has(.recording_sentences-box) .questions .questions-tooltip:after {
    top: -33px;
  }

  /* body */

  body:has(.recording_sentences-box) .pronounced-status .pronounced-content {
    margin: 0;
  }

  body:has(.recording_sentences-box) .face-normal {
    width: 100px !important;
  }

  body:has(.recording_sentences-box) div#message_status .status-grade {
    font-size: 36px;
  }

  body:has(.recording_sentences-box) div#message_status .status-text {
    font-size: 22px;
  }

  .listen_and_repeat-page .pronounced-status .pronounced-content img,
  .pronounced_words-page .pronounced-status .pronounced-content img {
    width: 68px;
  }

  .drag-word-box .drag-action .drag-btn .drag-answer {
    max-width: 200px;
    /* padding: 5px 0; */
    padding: 0;
  }

  .drag-word-page .btn {
    margin-bottom: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* vocab 1 */
  .drag-word-page .drag-word-box {
    height: calc(100vh - var(--header-height));
    max-width: 750px;
  }

  .drag-word-page .drag-word-box .drag-word-items {
    max-width: 220px;
    aspect-ratio: 1;
    width: auto;
    height: 40%;
  }

  .drag-word-page .drag-word-box .drag-word-items:nth-child(3n + 2) {
    margin-bottom: 76px;
  }

  .drag-word-page .drag-word-box .drag-action .drag-btn {
    max-width: 200px;
  }
}