@font-face{
    font-family: 'VujahdayScript';
    src: url(./font/VujahdayScript.ttf);
  }
  .box{
      display: flex;
      flex-direction: row;
      font-family: "VujahdayScript";
      line-height: 30px;
      font-size: 20px;
      overflow:hidden;
  }
  #note{
      width: 40%;
      height: 470px;
      overflow-y:scroll;
      text-align: center;
      border: 15px solid #b7a88c;
      scrollbar-width: none;
      margin-top: 40px;
      margin-left: 5%;
      z-index: 1;
  }
  #content{
      width: 20%;
      height: 420px;
      overflow-y:scroll;
      border: 15px solid #b7a88c;
      scrollbar-width: none;
      margin-top: 40px;
      padding-top: 50px;
      padding-left: 10%;
      padding-right: 10%;
      z-index: 1;
      white-space: pre-line;
  }
  #middleBox{
      width: 5%;
      height: 480px;
      border: 10px solid #9d8a66;
      margin-top: 40px;
  }
  #content::-webkit-scrollbar {display:none}
  #note::-webkit-scrollbar {display:none}
  #middle_one{
      width: 100%;
      height: 50%;
      background-color: gainsboro;
  }
  #middle_two{
      width: 100%;
      height: 50%;
      background-color: #9d8a66;
  }
  li{
      list-style: none;
  }
  #black1{
      width: 150px;
      height: 20px;
      position: relative;
      top: -95%;
      left: -50px;
      background-color: black;
      z-index: 999;
  }
  #black2{
      width: 150px;
      height: 20px;
      position: relative;
      top: -85%;
      left: -50px;
      background-color: black;
      z-index: 999;
  }
  #black3{
      width: 150px;
      height: 20px;
      position: relative;
      top: -75%;
      left: -50px;
      background-color: black;
      z-index: 999;
  }
  #black4{
      width: 150px;
      height: 20px;
      position: relative;
      top: -54%;
      left: -50px;
      background-color: black;
      z-index: 999;
  }
  #black5{
      width: 150px;
      height: 20px;
      position: relative;
      top: -42%;
      left: -50px;
      background-color: black;
      z-index: 999;
  }
  #black6{
      width: 150px;
      height: 20px;
      position: relative;
      top: -30%;
      left: -50px;
      background-color: black;
      z-index: 999;
  }
  #colorBox{
      width: 30px;
      position: relative;
      left: 9%;
      margin-top: 50px;
      border-right: 2px solid gainsboro;
  }
  #redBox{
      width: 30px;
      height: 30px;
      position: relative;
      background-color: red;
      left: 9%;
      margin-top: 40px;
      z-index: 999;
      
  }
  #yellowBox{
      width: 30px;
      height: 30px;
      position: relative;
      background-color: yellow;
      left: 9%;
      z-index: 999;
      margin-top: 20px;
  }
  #blueBox{
      width: 30px;
      height: 30px;
      position: relative;
      background-color: lightblue;
      left: 9%;
      z-index: 999;
      margin-top: 20px;
  }
  #greenBox{
      width: 30px;
      height: 30px;
      position: relative;
      background-color: green;
      left: 9%;
      z-index: 999;
      margin-top: 20px;
  }
  #cardBox{
      z-index: 999;
      position: absolute;
      top: 30%;
      left: 12%;
      width: 30%;
      height: 25%;
      background: url(img/note0.png) no-repeat;
      background-size: 100%;
      line-height: 14px;
      padding-top: 5%;
      padding-left: 6%;
      font-size: 16px;
      transform: rotate(-30deg);
  }