@font-face {
    font-family: digitalStripBB;
    src: url(digital_strip_bb_reg.otf) format("opentype");
}

body {
   margin:           0;
   background-color: #f97;
   font-family:      digitalStripBB, Arial, Helvetica, sans-serif;
   overflow:         hidden;
   position:         relative;
   height:           100vh;
   width:            100vw;
}

html {
   overflow-x:               hidden;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust:    100%;
   -ms-text-size-adjust:     100%;
}

button {
   font-size:   50px;
   padding:     10px 30px;
   font-family: digitalStripBB, Arial, Helvetica, sans-serif
}

button:not(:disabled){
   cursor:      pointer;
}

.background {
   background-size:  cover;
   background-image: url("img/bg.png");
   position:         fixed;
   width:            150vw;
   height:           150vh;
   top:              0;
}

#menuContainer {
    height:             100vh;
    width:              100vw;
    text-align:         center;
    position:           absolute;
    z-index:            10;
    background-color:   #f97;
    transition:         opacity 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition:    0.2s;
    -o-transition:      0.2s;
}

#menuButton {
   position:    absolute;
   right:       0;
   top:         0;
   font-size:   36px;
   margin:      5px;
   cursor:      pointer;
   color:       #500;
   user-select: none;
   z-index:     2;
}

#menuContainer button,
#menuContainer fieldset {
   z-index:  1;
   position: relative;
}

#menuContainer button:nth-child(2) {
   margin-top: 10px;
}

#menuContainer button {
   margin-bottom:    10px;
   font-size:        50px;
   padding:          10px 30px;
   background-color: #500;
   border-radius:    5px;
   border:           2px solid #900;
   color:            #eea;
   width:            420px;
   max-width:        100%;
}

#menuContainer button:hover {
   background-color: #5a0000;
}

#menuContainer button:active {
   background-color: #640000;
}

#menuContainer fieldset {
   width:         fit-content;
   border:        1px solid #900;
   border-radius: 5px;
   margin:        auto;
   margin-bottom: 10px;"
}

.radioOptionContainer {
    text-align: left;
    margin:     5px;"
}

input[type=radio] {
   margin-right: 5px;
   accent-color: #500;
   cursor:       pointer;"
}

label {
   cursor:      pointer;
   user-select: none;
}

.hidden {
   opacity:        0;
   pointer-events: none;
}

#gameContainer {
   position:                   absolute;
   z-index:                    1;
   transition:                 filter 0.5s;
   transition-timing-function: cubic-bezier(.22,.61,.36,1);
   top:                        0;
   left:                       0;
   width:                      100vw;
   height:                     100vh;
}

.board {
   display:          inline-block;
   vertical-align:   top;
   max-width:        1500px;
   min-width:        400px;
   width:            calc(70% - 340px);
   background-color: #d11;
   margin:           10px;
   padding:          5px 5px 75px 5px;
   border-radius:    10px;
   position:         relative;
}

#textboxthing {
   background-color: #ccc;
}

.controls {
   display:        inline-block;
   vertical-align: top;
   width:          100%;
   height:         100%;
   position:       relative;
}

#buttonsContainer {
    position:       absolute;
    width:          100%;
    bottom:         0px;
    container-type: inline-size;
    container-name: buttonsContainer;
}

.opponentBoard {
   display:          inline-block;
   min-width:        150px;
   width:            calc(30% - 170px);
   background-color: #11d;
   margin:           70px 10px 10px 10px;
   padding:          5px 5px 75px 5px;
   border-radius:    5px;
   position:         relative;
}

.character {
   display:          inline-block;
   margin:           6px 0px 0px 7px;
   border:           1px solid #000;
   border-radius:    4px 8px;
   overflow:         hidden;
   padding:          3px;
   background-color: #fef4c7;
   user-select:      none;
   outline:          2px solid #0009;
}

.opponentCharacter {
   display:          inline-block;
   margin:           3px 0px 0px 3px;
   border:           1px solid #333;
   border-radius:    4px 8px;
   overflow:         hidden;
   padding:          3px 3px 4% 3px;
   background-color: #eae;
   width:            calc(12.5% - 14px);
   user-select:      none;
}

.characterImageContainer {
   overflow:        hidden;
   display:         flex;
   justify-content: center;
}

.opponentCharacterSymbol img {
   width: 100%;
}

.selectBtnHighlight1 {
   background-color: #8fef8f;
   border:           1px solid #666;
   border-radius:    5px;
}

.selectBtnHighlight2 {
   background-color: #ef8fef;
   border:           1px solid #666;
   border-radius:    5px;
}

.selectable1,
.selectable2 {
    cursor: pointer;
}

.selectable1:hover {
   background-color: #d2f9d2;
}

.selectable1 img:hover,
.selectable2 img:hover {
   opacity: 0.8;
}

.selectable2:hover {
   background-color: #f9d2f9;
}

.selected1 {
   background-color: #8fef8f;
}

.selected2 {
   background-color: #ef8fef;
}

#questionContent {
  display:        inline-block;
  vertical-align: top;
  word-break:     break-word;
  width:          calc(100% - 70px);
  font-size:      20px;
}

.eliminated {
    opacity: 0.5;
}

#selectedCharacter {
   transform:        perspective(20cm) rotateX(-5deg) rotateY(-40deg);
   display:          inline-block;
   margin:           6px 0px 0px 7px;
   border:           1px solid #000;
   border-radius:    4px 8px;
   overflow:         hidden;
   padding:          3px;
   background-color: #f66;
   user-select:      none;
   outline:          2px solid #0009;
   height:           70%;
   aspect-ratio:     0.7;
   top:              8%;
   position:         absolute;
   left:             100%;
}

.responseText {
   width:      calc(100% - 70px);
   word-break: break-word;
   font-size:  20px;
   padding:    5px;
}

#continueButton {
   width:      100%;
   margin-top: 20px;
}

.opponentQuestionContainer {
   background-color: rgb(255, 204, 221);
   position:         relative;
   padding:          5px;
   border-radius:    10px;
   min-height:       94px;
}

.opponentIcon {
   font-size:      30px;
   width:          45px;
   display:        inline-block;
   vertical-align: top;
}

.opponentQuestionContents {
   width:          calc(100% - 55px);
   display:        inline-block;
   vertical-align: top;
   font-size:      20px;
}

.opponentQuestion {
   margin:    5px;
}

.opponentEliminated {
   opacity: 0.5;
}

.end {
   padding:       10px;
   border:        2px solid black;
   border-radius: 10px;
   width:         40%;
   margin:        auto;
   position:      relative;
   max-width:     500px;
   top:           10%;
}

.end > div > img,
.end > button {
   width: 100%;
}

.end > div {
   width:       calc(100% - 20px);
   color:       #fff;
   font-weight: bold;
}

.endText {
   margin:    10px;
   font-size: calc(1vw + 12px);
}

.winner1 {
   background-color: #080;
}

.winner2 {
   background-color: #800;
}

#logo {
   position:  relative;
   margin:    auto;
   width:     100%;
   max-width: 1397;
   z-index:   2;
}

#logo img {
   width:       calc(100% - 20px);
   margin-top:  1%;
   user-select: none;
}

#swag {
   position:  absolute;
   bottom:    0;
   left:      0;
   max-width: 1920px;
   width:     100%;
}

#swag img {
   width:         100%;
   margin-bottom: 10px;
   user-select:   none;
}

#splashtext {
   position:       relative;
   font-size:      calc(10px + 1vw + 1vh);
   max-width:      1000px;
   margin:         auto;
   font-weight:    bold;
   padding:        25px;
   z-index:        2;
   padding-bottom: 0px;
}

#merryIdle,
#roboIdle {
 height:          100%;
 image-rendering: crisp-edges;
}

#merryExplode,
#merryExplodeIdle {
   position:        absolute;
   bottom:          -25.5%;
   right:           -128.5%;
   height:          189.5%;
   image-rendering: crisp-edges;
 }

 #roboExplode,
 #roboExplodeIdle {
    position:        absolute;
    bottom:          -25%;
    right:           -92.5%;
    height:          185.5%;
    image-rendering: crisp-edges;
  }

  .greyscale {
     filter: grayscale()
  }

  .fade {
     opacity: 0.8;
  }

  #guessBtn,
  #continueBtn,
  #continueButton,
  #newGameBtn,
  #conjectbtn,
  #resumeBtn {
     background-color: #500;
     border-radius:    5px;
     border:           2px solid #900;
     color:            #eea;
     transition:       background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out, border 0.2s ease-in-out, color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
  }

  #guessBtn[disabled],
  #continueBtn[disabled],
  #continueButton[disabled],
  #newGameBtn[disabled] {
     color:            #bbb;
     background-color: #666;
     border-color:     #999;
  }

    #guessBtn.active[disabled],
  #continueBtn.active[disabled],
  #continueButton.ative[disabled],
  #newGameBtn.active[disabled] {
     color:            #bbb;
     background-color: #666;
     border-color:     #900;
  }

  #guessBtn:not([disabled]):hover,
  #continueBtn:not([disabled]):hover,
  #continueButton:not([disabled]):hover,
  #newGameBtn:not([disabled]):hover,
  #conjectbtn:not([disabled]):hover,
  #resumeBtn:not([disabled]):hover {
     text-shadow:      2px 2px 2px #60f;
     background-color: #7a0000;
  }

  @keyframes speechExpand {

    0% {
       opacity: 1;
       height:  10px;
    }

    50% {
       opacity: 0.7;
       height:  50px;
    }

    100% {
       opacity: 0;
       height:  200px;
    }

  }

   .speechExpand {
      animation-name:            speechExpand;
      animation-duration:        2s;
      animation-iteration-count: 1;
      animation-fill-mode:       forwards;
   }


   #hoverMenu {
      z-index:                    3;
      position:                   absolute;
      background-color:           #f97;
      max-width:                  800px;
      width:                      calc(100vw - 44px);
      top:                        10px;
      right:                      10px;
      border-radius:              5px;
      padding:                    10px;
      border:                     2px solid #500;
      box-shadow:                 1px 1px 5px #500;
      transition:                 transform 0.5s, opacity 0.3s;
      transition-timing-function: cubic-bezier(.22,.61,.36,1);
      max-height:                 calc(100vh - 44px);
      overflow-y:                 auto;
   }

   .grayInert {
      filter: grayscale(0.8);
      pointer-events: none;
   }

   #hoverMenu.shrunk {
      transform:      translate(260px,-360px) scale(0.01);
      opacity:        0;
      pointer-events: none;
   }

   #hoverMenu:not(.shrunk) {
      transform: translate(0px,0px) scale(1);
      opacity:   1;
   }

   #boardLogo,
   #opponentBoardLogo {
     position:       absolute;
     z-index:        2;
     top:            0;
     left:           0;
     user-select:    none;
     pointer-events: none;
   }

   #opponentBoardBackground,
   #opponentBoardLogo {
      width:  100%;
      height: 100%;
   }

   .portraitEndImage{
      width:    100vw;
      position: relative;
      z-index:  3;
   }

   .landscapeEndImage {
      height:   100vh;
      position: relative;
      z-index:  3;
   }

   .landscapeEndImageBlur {
      position: absolute;
      z-index:  2;
      opacity:  1;
      width:    100vw;
      filter:   blur(15px);
   }

   .portraitEndImageBlur {
      position: absolute;
      z-index:  2;
      opacity:  1;
      height:   100vh;
      filter:   blur(15px);
   }

   .portraitEndImageContainer {
      display:         flex;
      height:          100%;
      align-items:     center;
      justify-content: center;
   }

   .landscapeEndImageContainer {
      display:         flex;
      height:          100%;
      align-items:     center;
      justify-content: center;
   }

   #endContainer {
      overflow:   hidden;
      transition: opacity 1.5s ease-in;
   }

   .portraitEndControls,
   .landscapeEndControls {
      position:            absolute;
      z-index:             4;
      font-size:           64px;
      text-shadow:         0px 0px 1px #eea, 0px 0px 2px #eea, 0px 0px 3px #eea, 0px 0px 4px #eea, 0px 0px 5px #eea, 0px 0px 6px #eea;
      width:               calc(100% - 40px);
      height:              calc(100% - 0px);
      margin:              0px 20px;
      color:               #000;
      font-weight:         bold;
   }

  @keyframes hideHint {

    0% {
       opacity: 1;
       bottom:  10px;
    }

    100% {
       opacity: 0;
       bottom:  -200px;
    }

  }

   #opponentBoard {
     float:    right;
     position: relative;
     height:   100%;
   }

   #opponentBoardInner {
     max-width:    calc(100% - 40px);
     max-height:   calc(100% - 65px);
     overflow:     hidden;
     aspect-ratio: 3040 / 1330;
     margin:       auto;
     margin-top:   45px;
     position:     relative;
   }

   #avatarContainer {
      width:  65vw;
      height: 45vh;
   }

   #playerAvatar {
      float: left;
   }

   #playerBoard {
      float:   left;
      position:relative;
   }

   #textContainer {
      float: right;
   }

   #lowerContainer {
      clear: both;
   }

   .characterImageContainer img {
      width:  100%;
      margin: 0;
   }

   .charName {
      font-family: digitalStripBB, Arial, Helvetica, sans-serif;
      text-align:  center;
      font-weight: bold;
      height:      8%;
      position:    relative;
      top:         1px;
   }

   .charName div {
      margin:    0;
      position:  absolute;
      top:       50%;
      left:      50%;
      transform: translate(-50%, -50%);
      width:     100%;
   }

   .landscapeEndControls .paperLinkContainer {
       width:       40%;
       margin-left: 15%;
   }

   .portraitEndControls .paperLinkContainer {
       width:       90%;
       margin-left: 5%;
   }

  @keyframes fadeinFrames {

    0% {
       opacity: 0;
       scale:   0.1;
    }

    100% {
       opacity: 1;
       scale:   1;
    }

  }

  .fadein {
      animation-name:            fadeinFrames;
      animation-duration:        2s;
      animation-iteration-count: 1;
      animation-fill-mode:       forwards;
  }

   #questionContainer #merryTextAvatar,
   #questionContainer #roboMerryTextAvatar {
      width: 50px;
   }

   #questionContainer #qConjectureLogo {
      height: 22px;
   }

   #menuButton button {
     padding:          0px 7px;
     font-size:        24px;
     width:            fit-content;
     overflow:         hidden;
     background-color: #500;
     border-radius:    12px;
     border:           2px solid #900;
     color:            #eea;
     transition:       background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out, border 0.2s ease-in-out, color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
   }

   #menuButton button:hover {
      text-shadow:      2px 2px 2px #60f;
      background-color: #7a0000;
   }

   #menuButton button span:nth-child(1){
      display:        inline-block;
      vertical-align: top;
   }

   #menuButton button span:nth-child(2){
      display:        inline-block;
      vertical-align: top;
      max-width:      150px;
      overflow:       hidden;
      transition:     max-width 0.7s ease-in;
   }

   #menuButton:hover button span:nth-child(2){
      max-width: 150px !important;
   }

  @keyframes obnoxiousHighlight {

    0% {
       text-shadow: 0px 0px 2px hsla(0, 100%, 50%, 1), 0px 0px 4px #fff;
    }

    10% {
       text-shadow: 0px 0px 2px hsla(36, 100%, 50%, 1), 0px 0px 3px hsla(36, 100%, 50%, 1), 0px 0px 5px #fff;
    }

    20% {
       text-shadow: 0px 0px 2px hsla(72, 100%, 50%, 1), 0px 0px 4px #fff;
    }

    30% {
       text-shadow: 0px 0px 2px hsla(108, 100%, 50%, 1), 0px 0px 3px hsla(108, 100%, 50%, 1), 0px 0px 5px #fff;
    }

    40% {
       text-shadow: 0px 0px 2px hsla(144, 100%, 50%, 1), 0px 0px 4px #fff;
    }

    50% {
       text-shadow: 0px 0px 2px hsla(180, 100%, 50%, 1), 0px 0px 3px hsla(180, 100%, 50%, 1), 0px 0px 5px #fff;
    }

    60% {
       text-shadow: 0px 0px 2px hsla(216, 100%, 50%, 1), 0px 0px 4px #fff;
    }

    70% {
       text-shadow: 0px 0px 2px hsla(252, 100%, 50%, 1), 0px 0px 3px hsla(252, 100%, 50%, 1), 0px 0px 5px #fff;
    }

    80% {
       text-shadow: 0px 0px 2px hsla(288, 100%, 50%, 1), 0px 0px 4px #fff;
    }

    90% {
       text-shadow: 0px 0px 2px hsla(324, 100%, 50%, 1), 0px 0px 3px hsla(324, 100%, 50%, 1), 0px 0px 5px #fff;
    }

    99% {
       text-shadow: 0px 0px 2px hsla(360, 100%, 50%, 0), 0px 0px 4px #fff0;
    }

    100% {

    }

  }

  .obnoxiousHighlight {
      animation-name:            obnoxiousHighlight;
      animation-duration:        5s;
      animation-iteration-count: 1;
      animation-fill-mode:       forwards;
  }

   #opponentCharactersContainer {
      position:    absolute;
      z-index:     1;
      text-align:  center;
      width:       87%;
      height:      100%;
      margin-left: 9%;
      margin-top:  1%;
   }

   #playerBoardInner {
      max-width:    calc(100% - 40px);
      margin:       auto;
      margin-top:   20px;
      max-height:   calc(100% - 40px);
      aspect-ratio: 3040 / 1330;
      position:     relative;
   }

   #playerCharactersContainer {
      position: absolute;
      height:   100%;
      width:    88%;
      z-index:  1;
      left:     9%;
      top:      2%;
   }

   #playerBoardInner > img {
       width: 100%;
   }

   #newGameBtn {
      font-size: 50px;
   }

   .finalButtonsContainer {
      position: absolute;
      bottom:   1vh;
      left:     calc(1vw - 20px);
      width:    98vw;
   }

   .finalButtonsContainer > div:nth-child(1){
     width:     50%;
     position:  relative;
     height:    88px;
     min-width: 230px;
     float:     left;
   }

   .finalButtonsContainer > div:nth-child(1) img{
     height: 150px;
     top:    -72px;
   }

   .finalButtonsContainer > div:nth-child(2){
      width:        49%;
      min-width:    200px;
      height:       88px;
      position:     relative;
      float:        right;
   }

   .startMerryHell {
      position: absolute;
      right:    1vw;
      filter:   drop-shadow(rgb(0, 0, 0) 0px 0px 1px);
      bottom:   13vh;
      width:    400px;
   }

   @media (orientation:landscape){

       #playerAvatar,
       #playerBoard {
           width: 65%;
       }

       #playerBoard {
          height:     100%;
          text-align: center;
       }

       #playerAvatar,
       #opponentAvatar {
          height: 20vh;
       }

       #opponentBoard {
           width: 35%;
       }

       #textContainer {
          width:   35%;
          height: 100%;
       }

       #opponentBoardInner > img {
          height: 100%;
          width:  100%;
       }

       #textboxthing {
           border:   2px solid #333;
           outline:  1px solid #3338;
           margin:   0px 20px 20px 0px;
           height:   calc(100% - 40px);
           width:    calc(100% - 40px);
           padding:  10px;
       }

       .charName {
          font-size:   calc(1vw - 1px);
       }

       .character {
          width: calc(12.5% - 19px);
       }

       #swag {
          width: 60%;
       }

       #subMenuContainer {
           padding-left: 20%;
       }

       .portraitEndImage,
       .portraitEndImageBlur,
       .portraitEndImageContainer,
       .portraitEndControls {
           display: none;
       }

       #upperContainer {
           height:   45vh;
           width:    100vw;
           position: absolute;
           top;      0;
       }

       #lowerContainer {
           height:   55vh;
           width:    100vw;
           position: absolute;
           bottom:   0;
       }

      .startMerryHell {
         bottom: 0vh;
      }

   }

   @media (orientation:portrait){

       #opponentBoard {
          height:     20vh;
          width:      80vw;
          text-align: right;
       }

       #playerAvatar {
           width: 80%;
       }

       #textContainer {
          width:    100vw;
          height:   34vh;
          position: absolute;
          top:      26vh;
       }

       #avatarContainer {
          width:  100vw;
          height: 25vh;
          top:    15vh;
       }

       #playerBoard {
          width:  100vw;
          height: 28vh;
       }

       #playerBoardInner {
          margin: 20px;
       }

       #opponentBoard > img {
          margin:    10px 3%;
          width:     60%;
          min-width: 300px;
          max-width: 600px;
       }

       #playerAvatar {
           height: 14%;
       }

       #playerBoard > img {
          width: calc(100% - 20px);
          margin-left: 10px;
          max-width: 80vh;
       }

       #textboxthing {
          border:  2px solid #666;
          outline: 1px solid #333;
          width:   calc(100% - 45px);
          margin:  20px 10px 10px 10px;
          height:  calc(100% - 55px);
          border:  2px solid #666;
          outline: 1px solid #333;
          padding: 10px;
       }

       .charName {
          font-size:   calc(1vw + 3px);
       }

       .character {
          width: calc(12.5% - 20px);
       }

       #opponentAvatar {
          z-index:  1;
          position: absolute;
          right:    130px;
       }

       #lowerContainer {
          position: absolute;
          top:      40vh;
          left:     0;
       }

       .landscapeEndImage,
       .landscapeEndImageBlur,
       .landscapeEndImageContainer,
       .landscapeEndControls {
           display: none;
       }

      #opponentBoardInner {
        margin:   0px;
        position: absolute;
        right:    20px;
        top:      45px;
      }

   }

@media (max-width: 1200px) {

   .portraitEndControls,
   .landscapeEndControls,
   #conjectbtn,
   #resumeBtn,
   #menuContainer button {
      font-size: 32px;
   }

   #newGameBtn {
      font-size: 40px;
   }

   .finalButtonsContainer > div:nth-child(1),
   .finalButtonsContainer > div:nth-child(2) {
      height: 72px;
   }

   .startMerryHell {
      width: 250px;
   }

}

@media (max-width: 600px) {

   #conjectbtn,
   #resumeBtn,
   #menuContainer button {
      font-size: 20px;
   }

   .portraitEndControls,
   .landscapeEndControls {
      font-size: 20px;
   }

   #newGameBtn {
      font-size: 30px;
   }

   .finalButtonsContainer > div:nth-child(1),
   .finalButtonsContainer > div:nth-child(2) {
      height: 62px;
   }

}

@media (max-width: 480px) {

   #newGameBtn {
      font-size: 20px;
   }

}

@media (max-width:1200px) and (orientation:landscape) {

   #logo img {
      width: calc(70% - 20px);
   }

   #splashtext {
     font-size:   calc(6px + 1vw + 1vh);
     padding-top: 10px;
   }

   #menuContainer button {
      margin-top: 10px;
      padding: 5px 10px;
      width: 210px;
   }

}

/* container queries */
.charName {
  container-type: inline-size;
  container-name: playerCharNames
}

#questionContainer {
   container-type: inline-size;
   container-name: playerQuestion
}

#controls {
   container-type: inline-size;
   container-name: controlsContainer
}

@container playerCharNames (width < 150px) {
   .charName div {
     font-size: 18px;
   }
}

@container playerCharNames (width < 120px) {
   .charName div {
     font-size: 14px;
   }
}

@container playerCharNames (width < 90px) {
   .charName div {
     font-size: 12px;
   }
}

@container playerCharNames (width < 70px) {
   .charName div {
     font-size: 11px;
   }
}

@container playerCharNames (width < 50px) {
   .charName div {
     font-size: 8px;
   }
}

@container playerCharNames (width < 40px) {
   .charName div {
     font-size: 6px;
   }
}

@container playerCharNames (width < 30px) {
   .charName div {
     font-size: 4px;
   }
}

@container playerCharNames (width < 20px) {
   .charName div {
     display: none;
   }
}

@container playerCharNames (width >= 150px) {
   .charName div {
     font-size: 24px;
   }
}

/* player question */
@container playerQuestion (width < 300px) {
   #questionContainer #merryTextAvatar,
   #questionContainer #roboMerryTextAvatar {
      width: 40px;
   }

   #questionContainer #qConjectureLogo {
      height: 18px;
   }

   #questionContent,
   .responseText {
      width:     calc(100% - 60px);
      font-size: 16px;
   }

   .opponentQuestionContents {
      width:     calc(100% - 45px);
      font-size: 16px;
   }
}

@container playerQuestion (width < 200px) {
   #questionContainer #merryTextAvatar,
   #questionContainer #roboMerryTextAvatar {
      width: 30px;
   }

   #questionContainer #qConjectureLogo {
      height: 15px;
   }

   #questionContent,
   .responseText {
      width:     calc(100% - 50px);
      font-size: 14px;
   }

   .opponentQuestionContents {
      width:     calc(100% - 35px);
      font-size: 14px;
   }
}

/*player buttons and text counterpart*/
@container buttonsContainer (width < 400px) {
   #buttonsContainer div:has(label) {
      width: 70px;
   }

   #buttonsContainer label {
      top: -54px;
   }

   #buttonsContainer label img {
      width: 70px;
   }

   #buttonsContainer #guessBtn,
   #buttonsContainer #continueBtn {
      width:     calc(50% - 35px);
      height:    50px;
      padding:   5px;
      font-size: 18px;
   }

   #buttonsContainer #continueButton {
      height:    50px;
      padding:   5px;
      font-size: 24px;
   }
}

@container controlsContainer (width < 400px) {

   #controlsInner {
      height: calc(100% - 70px);
   }

   #continueButton {
      height:    50px;
      padding:   5px;
      font-size: 24px;
   }

}

@container buttonsContainer (width < 300px) {
   #buttonsContainer div:has(label) {
      width: 60px;
   }

   #buttonsContainer label {
      top: -44px;
   }

   #buttonsContainer label img {
      width: 60px;
   }

   #buttonsContainer #guessBtn,
   #buttonsContainer #continueBtn {
      width:     calc(50% - 30px);
      height:    40px;
      padding:   5px;
      font-size: 10px;
   }

   #buttonsContainer #continueButton {
      height:    40px;
      padding:   5px;
      font-size: 22px;
   }
}

@container controlsContainer (width < 300px) {
   #controlsInner {
      height: calc(100% - 60px);
   }

   #continueButton {
      height:    40px;
      padding:   5px;
      font-size: 22px;
   }
}

@container buttonsContainer (width < 200px) {
   #buttonsContainer div:has(label) {
      width: 40px;
   }

   #buttonsContainer label {
      top: -30px;
   }

   #buttonsContainer label img {
      width: 40px;
   }

   #buttonsContainer #guessBtn,
   #buttonsContainer #continueBtn {
      width:     calc(50% - 20px);
      height:    30px;
      padding:   3px;
      font-size: 10px;
   }

   #buttonsContainer #continueButton {
      height:    30px;
      padding:   3px;
      font-size: 18px;
   }
}

@container controlsContainer (width < 200px) {
   #controlsInner {
      height: calc(100% - 45px);
   }

   #continueButton {
      height:    30px;
      padding:   3px;
      font-size: 18px;
   }
}

@container buttonsContainer (width >= 400px) {
   #buttonsContainer div:has(label) {
      width: 80px;
   }

   #buttonsContainer label {
      top: -59px;
   }

   #buttonsContainer label img {
      width: 80px;
   }

   #buttonsContainer #guessBtn,
   #buttonsContainer #continueBtn {
      width:     calc(50% - 40px);
      height:    55px;
      padding:   10px;
      font-size: 22px;
   }

   #buttonsContainer #continueButton {
      height:    55px;
      padding:   10px;
      font-size: 26px;
   }
}

@container controlsContainer (width >= 400px) {

   #controlsInner {
      height: calc(100% - 80px);
   }

   #continueButton {
      height:    55px;
      padding:   10px;
      font-size: 26px;
   }
}