.horizontal {
  #bg1 {
    background-image: url(img/bg-pc.png);
  }

  #mainlogo {
    margin-top: 19vh;
    width: 55vh;
    height: 50vh;
  }

  .btn {
    width: 44vh;
    height: 6vh;
    border-radius: 1.25vh;
    font-size: 2.5vh;
    box-shadow: 0vh 0vh 5vh 5vh #ffffff;
  }
  .btn-wrapper {
    bottom: 5vh;
  }

  .green-wrapper {
    width: 41vh;
    padding: 2vh;
    border-radius: 1.25vh;
    margin-top: -8vh;
  }

  .text-wrapper {
    width: 35.6vh;
    padding: 2vh;
    border-radius: 1.25vh;
    border-width: 0.2vh;
  }

  h1 {
      font-size: 3vh;
      line-height: 3vh;
      margin: 0.5vh 0 2vh;
  }

  h2 {
      font-size: 2.2vh;
  }

  p {
      font-size: 1.6vh;
      margin-block-start: 0.5vh;
      margin-block-end: 0.5vh;

  }

  input {
    width: 35.6vh;
    padding: 2vh;
    border-radius: 1.25vh;
    border-width: 0.2vh;
    text-indent: 0.5vh;
    height: 2vh;
    font-size: 2vh;
  }

  .player {
    width: 17.5vh;
    height: 25vh;
    margin: 1vh;
    border-radius: 3vh;
  }

  .player > .frame {
    top: 1vh;
    left: 1vh;
    width: 15.5vh;
    height: 15.5vh;
    border-radius: 2vh;
  }

  .player > .avatar {
    width: 13vh;
    height: 13vh;
    left: 2.25vh;
    top: 2.25vh;
    border-radius: 1vh;
  }

  .avatarname, .user-select, .user-name {
    left: 1vh;
    width: 15.5vh;
    height: 6.5vh;
    font-size: 1.75vh;
    border-radius: 2vh;
  }

  .avatarname {
      top: 15vh;
  }

  .user-select, .user-name {
      top: 17.5vh;
  }

  .player.selected {
    box-shadow: 0vh 0.5vh 5vh 2.5vh #00000050;
  }

  .santa-hat {
    width: 5vh;
    height: 5vh;
    left: 2.5vh;
    top: -1vh;
  }
  
  .player.selected > .santa-hat {
    width: 10vh;
    height: 10vh;
    left: 1vh;
    top: 0;
  }
  
  #hero-info {
    top: 3vh;
    left: 9.5vh;
    width: 18vh;
    height: 7vh;
    border-radius: 2vh;
  }

  #avatar-outer {
    top: 1.5vh;
    left: 1.5vh;
    width: 10vh;
    height: 10vh;
    border-radius: 2vh;
  }

  #avatar-inner {
    top: 2.5vh;
    left: 2.5vh;
    width: 8vh;
    height: 8vh;
    border-radius: 1vh;
  }

  #hero-score {
    top: 1vh;
    left: 3vh;
    width: 14vh;
    height: 3.5vh;
    font-size: 2.5vh;
    line-height: 3.5vh;
    border-radius: 1vh;
    background-size: 2.5vh;
    background-position-y: 0.5vh;
    background-position-x: 0.5vh;
  }

  #hero-name {
    top: 4.5vh;
    left: 2vh;
    width: 16vh;
    font-size: 1.75vh;
    line-height: 2.5vh;
  }

  #timer {
    top: 4vh;
    right: 5.5vh;
    width: 12vh;
    height: 3.5vh;
    font-size: 2.5vh;
    text-indent: 4vh;
    line-height: 3.5vh;
    background-size: 2.5vh;
    background-position-y: 0.5vh;
    background-position-x: 0.5vh;
    border-radius: 1vh;
  }

  #close-btn {
    top: 4vh;
    right: 1vh;
    width: 3.5vh;
    height: 3.5vh;
  }

  #battlefield > div {
    width: 10vh;
    height: 8vh;
  }

  #battlefield > div.col-0 { left : 3.25vh}
  #battlefield > div.col-1 { left : 11.75vh}
  #battlefield > div.col-2 { left : 20.25vh}
  #battlefield > div.col-3 { left : 28.75vh}
  #battlefield > div.col-4 { left : 37.25vh}
  
  #battlefield > div.row-0 { top : 14vh}
  #battlefield > div.row-1 { top : 18.5vh}
  #battlefield > div.row-2 { top : 23vh}
  #battlefield > div.row-3 { top : 27.5vh}
  #battlefield > div.row-4 { top : 32vh}
  #battlefield > div.row-5 { top : 36.5vh}
  #battlefield > div.row-6 { top : 41vh}
  #battlefield > div.row-7 { top : 45.5vh}
  #battlefield > div.row-8 { top : 50vh}
  #battlefield > div.row-9 { top : 54.5vh}
  #battlefield > div.row-10 { top : 59vh}

  .plus-el {
    background-size: 2.5vh;
  }

  #battlefield {
    left: calc( 50vw - 25vh);
    top: 8vh;
  }
  
    .q-wrapper {
      font-size: 2vh;
      padding: 2vh 0.5vh;
    }
  
    .q-answer {
      width: 14.5vh;
      width: 100%;
      margin: 0.5vh;
      border-radius: 1vh;
      padding: 1vh 1vh 1.5vh;
      font-size: 1.6vh;
    }  

  .win1, .lose1 {
    background-size: 20vh auto;
  }
  
  .dialog-inner {
    height: 20vh;
    border-radius: 1vh;
  }

  #q-close-btn {
    top: -8vh;
    width: 4.5vh;
    height: 4.5vh;
  }

  .dialog-inner #q-close-btn {
      top: -13vh;
      right: -2vh;
  }

  #own-hero, #contr-hero {
    top: 2.5vh;
    width: 11vh;
    height: 11vh;
  }

  #own-hero { left: 5vh; }
  #contr-hero { right: 5vh; }

  #q-sword {
    top: 6vh;
  }

  #own-result, #contr-result {
    width: 4vh;
    height: 4vh;
    top: 14vh;
    left: 8.5vh;
  }

  #contr-result {
      left: 28.5vh;
  }

  .text-wrapper > img {
    top: 2vh;
  }

  .leader-line {
    width: 38vh;
    padding: 1vh 1vh;
    margin: 0.75vh 0;
    border-radius: 1.25vh;
    border-width: 0.25vh;
  }

.leader-spacer {
  height: 6vh;
  font-size: 5vh;
  margin-top: -4vh;
}

  .leader-line > .num {
      height: 3vh;
      width: 3vh;
      border-radius: 0.75vh;
      line-height: 3vh;
      font-size: 2vh;
  }

  .leader-line  > .name, .leader-line  > .score {
      line-height: 3vh;
      font-size: 2vh;
      padding: 0 1.5vh;
      width: 25vh;
  }

  .leader-line  > .score {
      width: 3.5vh;
  }

  #hint {
    font-size: 1.5vh;
    margin: 1.5vh 1.5vh 0;
  }

  #hint.show {
    height: 2vh;
  }

  .leader-line > .santa-hat {
    width: 6vh;
    height: 6vh;
    left: -1.4vh;
    top: -0.8vh;
  }


}