@media (orientation: portrait) {

  body {
  }

  body::-webkit-scrollbar {
    display: none;
  }

  #btp-tsumego-view {
    min-height: min(236vw, 166vh);
  }

  #btp-tsumego-content-container {
    top: 8vh;
    left: 0;
    right: 0;
    height: 218vw;
    max-height: 158vh;
  }

  #btp-tsumego-content {
    height: 100%;
    width: 94vw;
    max-width: 72vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #btp-board-container {
    width: 84vw;
    max-width: 64vh;
    height: 84vw;
    max-height: 64vh;
  }

  #btp-tsumego-controls-container {
    width: 84vw;
    max-width: 64vh;
    height: 116vw;
    max-height: 86vh;
    margin-top: 2vh;
    justify-content: space-between;
    align-items: center;
  }

  #btp-tsumego-logo-container {
    order: 0;
    width: 100%;
    height: 4%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #btp-logo-text {
    display: none;
    width: 50%;
    height: auto;
    font-size: min(6vh, 8vw);
    line-height: min(6vh, 8vw);
    font-weight: bold;
  }

  #btp-portrait-summary {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  #btp-portrait-summary-type {
    width: 26%;
  }

  #btp-portrait-summary-instruction {
    width: 48%;
  }

  #btp-portrait-summary-level {
    width: 26%;
  }

  #btp-portrait-summary-instruction-text {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-weight: bold;
    opacity: 0.9;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  #btp-portrait-summary-instruction-diff {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.9;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  #btp-portrait-summary-instruction-diff-amount {
    height: auto;
    width: auto;
    font-weight: bold;
    margin-right: min(0.6vh, 0.8vw);
  }

  #btp-portrait-summary-instruction-diff-text {
    height: auto;
    width: auto;
  }

  .portrait-summary-texts {
    position: relative;
    height: 100%;
    font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
    font-size: min(2vh, 2.8vw);
    line-height: min(2vh, 2.8vw);
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    opacity: 0.9;
    overflow: hidden;
  }

  #btp-tsumego-rated-switch-container {
    order: 5;
    width: 84%;
    height: 6%;
    margin-top: -3%;
    margin-bottom: -3%;
  }

  #btp-tsumego-rated-switch-text {
    font-size: min(2.3vh, 3.2vw);
    line-height: min(3vh, 4.2vw);
  }

  #btp-tsumego-rated-switch-content {
    width: 18%;
  }

  #btp-tsumego-rated-switch-track {
    width: 76%;
    border-radius: 2vh;
  }

  #btp-tsumego-rated-switch-slide {
    width: 44%;
    border-radius: 50%;
  }

  .rated-switch-slide-off {
    left: 3%;
  }

  .rated-switch-slide-on {
    left: 41%;
  }

  #btp-navigation-container {
    order: 1;
    width: 80%;
    height: 11.8%;
    margin-top: -1%;
    margin-bottom: -1%;
  }

  #btp-tsumego-buttons {
    order: 2;
    width: 95%;
    height: 12%;
  }

  #btp-tsumego-estimator-button {
    width: 47%;
    border-radius: 1.5vw;
  }

  .estimator-button-inactive {
    font-size: min(2.85vh, 3.6vw);
  }

  .estimator-button-active {
    font-size: min(3.36vh, 4.32vw);
  }

  #btp-tsumego-next-button {
    width: 47%;
    font-size: min(2.85vh, 3.6vw);
    border-radius: 1.5vw;
  }

  #btp-tsumego-mini-icons {
    order: 3;
    width: 100%;
    height: 11%;
  }

  .mini-icons {
    width: 15%;
    height: 100%;
    border-radius: 14%;
  }

  #btp-tsumego-comment-count-container {
    min-width: 20%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 1%;
    font-size: 2.8vw;
    line-height: 2.8vw;
  }

  #btp-tsumego-info-container {
    order: 4;
    width: 100%;
    height: 25%;
    border-radius: 2vh 2vh 0 0;
  }

  #btp-tsumego-info-favorite-container {
    width: 9.2%;
    height: 0;
    padding-bottom: 9.2%;
  }

  #btp-tsumego-info-link-container {
    right: 11%;
    width: 9.2%;
    height: 0;
    padding-bottom: 9.2%;
  }

  #btp-tsumego-info-left-container {
    width: 47%;
    height: 100%;
    right: 3%;
  }

  #btp-tsumego-info-title {
    position: relative;
    height: 25%;
    font-size: min(2.45vh, 3.3vw);
    line-height: min(2.9vh, 3.6vw);
    padding-top: 2%;
  }

  .btp-tsumego-info-text {
    position: relative;
  }

  #btp-tsumego-info-player {
    justify-content: center;
    width: 70%;
    height: 28%;
    font-size: min(2.2vh, 2.8vw);
    line-height: min(2.3vh, 3vw);
  }

  #btp-tsumego-info-komi {
    width: 100%;
    height: 100%;
    justify-content: center;
    font-size: min(2.1vh, 2.7vw);
    line-height: min(2.3vh, 2.9vw);
  }

  #btp-tsumego-info-captures {
    width: 100%;
    height: 100%;
    justify-content: center;
    font-size: min(2.1vh, 2.7vw);
    line-height: min(2.3vh, 2.9vw);
  }

  #komi-captures-text-container {
    display: flex;
    width: 100%;
    height: 17%;
  }

  #komi-captures-container {
    flex-direction: row;
    width: 100%;
    height: 33%;
  }

  #tsumego-komi-container {
    width: 50%;
    height: 100%;
  }

  #tsumego-captures-container {
    width: 46%;
    height: 94%;
    margin-left: 3%;
  }

  #tsumego-captures-white {
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    width: 45%;
    height: 84%;
  }

  #tsumego-captures-black {
    margin-top: 5%;
    margin-bottom: 5%;
    margin-right: 5%;
    width: 45%;
    height: 84%;
  }

  .komi-captures-text {
    font-size: min(2.6vh, 3.2vw);
    line-height: min(2.8vh, 3.4vw);
  }

  #btp-tsumego-info-komi {
  }

  #btp-tsumego-info-captures {
  }

  .btp-tsumego-shield-prize-text {
    font-size: min(2.1vh, 2.7vw);
    line-height: min(2.5vh, 3.1vw);
    color: var(--info-shield-prize-font-color);
  }

  #btp-tsumego-playlist-container {
    order: 6;
    width: 100%;
    height: 16%;
    margin-bottom: 4%;
  }

  .btp-tsumego-playlist-bold-text {
    font-size: min(2.45vh, 3.3vw);
    line-height: min(2.9vh, 3.8vw);
  }

  .btp-tsumego-playlist-normal-text {
    font-size: min(2.45vh, 3.3vw);
    line-height: min(2.9vh, 3.8vw);
  }

  #btp-playlist-modal-container {
    top: 10vh;
    width: 88vw;
    max-width: 62vh;
    height: 80vh;
    left: 50%;
    margin-left: max(-44vw, -31vh);
  }

  #btp-playlist-modal-close-icon {
    right: 1.3vh;
  }


  #btp-comment-modal-container {
    position: fixed;
    top: 4vh;
    width: 88vw;
    max-width: 62vh;
    height: 90vh;
    left: 50%;
    margin-left: max(-44vw, -31vh);
    z-index: 301;
  }

@keyframes comments-glidein {
  from {
    top: 20vh;
  }
  to {
    top: 4vh;
  }
}

@keyframes comments-glideout {
  from {
    top: 4vh;
    opacity: 0.98;
  }
  to {
    top: 20vh;
    opacity: 0;
  }
}

  #btp-comment-modal-back-icon {
    width: 8%;
    left: 1.4vh;
  }

  #btp-comment-modal-close-icon {
    width: 11%;
    right: 1.3vh;
  }

  #btp-comment-modal-content {
    overflow: scroll;
  }

  #btp-comment-modal-discussion-loading-cover {
    top: 50%;
    left: 0;
    height: 50%;
  }

  #btp-comment-modal-focus-container {
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
  }

  #btp-comment-modal-focus-wrapper {
    height: 92%;
    aspect-ratio: 1;
    max-width: 100%;
  }

  #btp-comment-modal-focus-board {
    width: 100%;
    aspect-ratio: 1;
  }

  #focus-board-animation-button {
    width: 22%;
    height: 22%;
    left: 39%;
    top: 39%;
  }

  #btp-comment-modal-discussion-container {
    left: 0;
    right: 0;
    top: 50%;
    height: auto;
    min-height: 40%;
  }

  #discussion-highlight-problem-text {
    line-height: 3.2vh;
    font-size: 2.4vh;
  }

  .discussion-highlight-tsumego-texts {
    line-height: 3.2vh;
    font-size: 2.4vh;
  }

  .discussion-first-level-containers {
    margin-top: 3vh;
    margin-bottom: 2vh;
  }

  .discussion-second-level-containers {
    margin-top: 3.4vh;
    margin-bottom: 2.4vh;
  }

  .discussion-second-level-parent-row {
    height: 2vh;
    margin-top: 1vh;
    margin-bottom: -0.3vh;
  }

  .discussion-second-level-parent-names {
    line-height: 2.4vh;
    font-size: min(2.3vh, 3.4vw);
    font-style: italic;
    font-weight: bold;
    margin-right: 0.3vh;
  }

  .discussion-second-level-parent-contents {
    line-height: 2.4vh;
    font-size: min(2.3vh, 3.4vw);
    font-style: italic;
    margin-left: 0.6vh;
    margin-right: 0.3vh;
  }

  .discussion-first-level-icon-containers {
    min-height: 15vh;
    width: 22%;
  }

  .discussion-first-level-icons {
    width: 75%;
  }

  .discussion-first-level-votes {
    width: 90%;
    height: 4vh;
  }

  .discussion-upvote-buttons {
    width: 20%;
  }

  .discussion-downvote-buttons {
    width: 20%;
  }

  .discussion-first-level-text-containers {
    min-height: 14vh;
    margin-top: 0.6vh;
    margin-bottom: 0.6vh;
    padding-left: 1.4vh;
    padding-right: 1.4vh;
  }

  .discussion-second-level-text-containers {
    min-height: 17vh;
    margin-top: 0.6vh;
    margin-bottom: 0.6vh;
    padding-left: 1.4vh;
    padding-right: 1.4vh;
  }

  .discussion-first-level-text-usernames {
    margin-top: 1.4vh;
    line-height: 2.4vh;
    font-size: 2.2vh;
  }

  .discussion-first-level-text-contents {
    line-height: 3.2vh;
    font-size: 2.4vh;
    margin-top: 0.3vh;
    margin-bottom: 1vh;
  }

  .discussion-first-level-text-likes {
    height: 2.3vh;
    line-height: 2vh;
    font-size: 2vh;
    margin-left: 1.2vh;
    margin-top: 0.3vh;
  }

  #discussion-write-container {
    left: 0;
    min-height: 15%;
  }

  #discussion-write-field {
    width: 100%;
    min-height: 15vh;
  }

  #discussion-write-icon-container {
    width: 20%;
  }

  #discussion-write-text-container {
    width: 80%;
  }

  #discussion-write-text-input-field {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
  }

  #discussion-write-icon {
    width: 72%;
  }

  #discussion-no-comments-container {
    min-height: 16vh;
  }


  .settings-option-contents {
    width: 8.6vh;
  }

  .settings-option-tracks {
    width: 90%;
    border-radius: 2vh;
  }

  .settings-option-slides {
    width: 52%;
    border-radius: 50%;
  }

}