/* 全局样式 */
  body {
      margin: 0;
      font-family: Arial, sans-serif;
  }

  div {
      display: block;
  }
     @media (max-width: 767.98px) {
        #main-content {
            flex: 10 !important;
          }
       .clipboard-content {
         width: 45vw !important;
       }
  
       #clipboard-text {
         width: 80vw;
       }
  
       .form-group {
         width: 80vw;
       }
     }
  
     .m-container {
       display: flex;
     }
  
     .side-area {
       flex: 1;
     }

  #main-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      padding-top: 1rem;
  }

  .title{
    font-size: 2rem;
  }
  .c-grid {
      display: grid;
      width: 100%;
      grid-template-columns: 5fr 1fr;
      /* 假设我们想要我们的行都是一个固定的高度 - 如果我们想要高度响应地根据内容变化，可以保留为默认的 `auto` */
      gap: 20px;
      padding-left: 1rem;
      padding-right: 1rem;
      margin-bottom: 1rem;

  }

  .clipboard-content {
      padding: 0.5rem;
      border: 1px solid #eee;
      width: 40rem;
      word-wrap: break-word;

  }

  .clipboard-content span {
      font-size: 20px;
  }
  .flex-center{
    display: flex;
    justify-content: center;
  }
  .space{
    margin: 0 0.5rem 0 0.5rem;
  }
  .left-border{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #clipboard-text{
    width: 50vw;
    height: 30vh;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .form-group {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    /* border: 1px solid #eee; */
  }

  .flex-end {
    display: flex;
    justify-content: flex-end;
  }

  .border {
    display: flex;
    align-items: center;
    border: 1px solid #eee;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .btn-submit {
    width: 5rem;
  }