html,
  body {
    padding: 0;
    height: 90vh;
    width: 80vh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color: #555;
    margin: 0;
  }

  html {
    display: table;
  }

  body {
    vertical-align: middle;
  }

  .content {
    position: relative;
    height: 100%;
    width: 100%;
  }

  .win1 {
    position: absolute;
    left: 0.5vh;
    top: 0.5vh;
    width: 39vh;
    height: 89vh;
    background-color: rgba(165, 165, 165, 0.5);
    border-radius: 10%/5%;
  }

  .win2 {
    position: absolute;
    left: 40.5vh;
    top: 0.5vh;
    width: 39vh;
    height: 44vh;
    background-color: rgba(165, 165, 165, 0.5);
    border-radius: 10%;
  }

  .win3 {
    position: absolute;
    left: 40.5vh;
    top: 45.5vh;
    width: 39vh;
    height: 44vh;
    background-color: rgba(165, 165, 165, 0.5);
    border-radius: 10%;
    box-shadow: inset 0 0 0 1.5vh rgba(165, 165, 165, 0.5);
  }

  .bar1 {
    position: absolute;
    width: 39vh;
    height: 10vh;
    background-color: rgba(112, 173, 71, 0.5);
    border-radius: 10%/40%;
  }

  .bar2 {
    position: absolute;
    right: 1.5vh;
    top: 1.5vh;
    width: 10vh;
    height: 41vh;
    background-color: rgba(112, 173, 71, 0.5);
    border-radius: 25%/7.5%;
  }

  .txtArea {
    position: absolute;
    left: 2vh;
    top: 11vh;
    width: 35vh;
    height: 76vh;
    border: solid 1px rgba(112, 173, 71, 0.5);
  }

  .txtAreaPin {
    position: absolute;
    left: 2vh;
    top: 11vh;
    width: 35vh;
    height: 31vh;
    border: solid 1px rgba(112, 173, 71, 0.5);
  }

  select {
    position: absolute;
    left: 3vh;
    top: 3vh;
    width: 10vh;
    height: 4vh;
    border: none;
    border-radius: 20%/60%;
  }

  @media (min-width: 81vh) {
    html {
      margin: auto;
    }
  }

  @media (max-width: 80vh) {
    html {
      margin: inherit;
    }

    html,
    body,
    .content {
      transform: scale(0.9) translatex(-2.5%);
    }

    .content {
      width: 90%;
    }
  }

  @media (max-width: 70vh) {
    html {
      margin: inherit;
    }

    html,
    body,
    .content {
      transform: scale(0.8) translatex(-5%);
    }

    .content {
      width: 90%;
    }
  }