@media (orientation: portrait) {
  header {
    height: 40%;
    width: 100vw;
  }
  #headerText {
    font-size: 3.7vw;
  }
  .contentBtn {
    font-size: 3.6vw;
  }
  .headerBtn {
    font-size: 3vw;
  }
  .dates {
    border: 1px solid gray;
    font-size: 2.5vw;
  }
  .calNav {
    font-size: 4vw;
  }
  .scrollmenu div {
    font-size: 2.5vw;
  }
  #AppContent {
    position: relative;
    height: 60%;
    width: 100vw;
  }
  #headerCenter {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #headerLogoBox {
    width: 20%;
    height: auto;
    top: 0;
    left: 0;
    margin: 1rem;
  }
  #selectVenue {
    width: 100vw;
    height: 100%;
    justify-content: space-around;
    align-items: space-around;
    flex-wrap: wrap;
    padding-top: 1rem;
  }
  .logoBox {
    height: 20%;
  }
  #tableBox {
    margin-top: 1.5rem;
  }
  .tables {
    width: 30%;
  }
  #headerGameBox {
    top: 0%;
    left: 25%;
    width: 20%;
  }
  #calendarInnerBox {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #calendar {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  #monthDays {
    padding-top: 1rem;
    height: 80%;
    width: 100%;
  }
  #weekDays div {
    aspect-ratio: 1/0.5;
  }
  #monthDays div {
    height: 16.6%;
  }
  #preTimeBox {
    font-size: 3vw;
    position: absolute;
    flex-direction: row;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 60%;
  }
  #timeBox {
    font-size: 3vw;
    position: absolute;
    flex-direction: row;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 60%;
  }
  #dateBox {
    transform: translate(-50%, -50%);
    font-size: 3.5vw;
    top: 75%;
    left: 50%;
  }
  .finalDate {
    font-size: 3.5vw;
    top: 50%;
    left: 50%;
  }
  #selectADate {
    width: 100%;
    height: 70%;
  }
  #calendarBtnBox button {
    padding: 0.7rem 1rem;
    width: 20%;
  }
}