.player-border{
  position: absolute;
  left: calc((100% - 100vh * 1.36)/ 2);
  top: 5vh;
  right: calc((100% - 100vh * 1.36)/ 2);
  bottom: 5vh;
  text-align: center;
  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
  border-radius: 11px;
  border: 20px solid #23b1c2;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: .3s;
}

.vocabulary-container {
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  font-family: 'ChalkboardSE-Regular';


  .content-wrap {
    display: flex;
    flex-direction: column;
    width: 90%;
    height: 90%;
    padding: 1rem 10vh;

    .top-line {
      display: flex;
      align-items: center;
      .star {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.6rem;
        object-fit: contain;
      }
      .vocabulary {
        display: inline-block;
      }
      .audio-button {
        display: inline-block;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 0.5rem;
        background-image: url("../../assets/vocabulary/1.png");
        background-repeat: no-repeat;
        background-size: contain;
      }
      .show-text {
        display: inline-block;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 0.5rem;
        background-image: url("../../assets/vocabulary/2.png");
        background-repeat: no-repeat;
        background-size: contain;
      }
      .type {
        display: inline-block;
        font-weight: 300;
        margin: 0 0 0 2rem;
        color: #444;
      }
    }
    .sentence {
      color: #000;// #FF960B;
      font-size: 24px;
      min-height: 4rem;
      max-height: 7rem;
      margin: 1rem 0;
      overflow-y: auto;
    }
    .img-wrap {
      width: 60%;
      height: 60%;
      border: .8vh solid rgb(255, 150, 11);
      border-radius: 2.4vh;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}
