notes_tab.css

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200&display=swap');

.body-tag {
    margin: 0px;
    color: #36395A;
    display: flex;
    flex-direction: column;
    background-color: #fff7fc;
}

.logotext {
  padding-right: 1rem;
  margin-right: 1rem;
  border-right: 1px solid #595a64;
}

.button_2 {
  background-color: rgb(253, 253, 253);
  padding: 3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.2s;
  /* transition: 1s; */
}

.button_2:hover {
  transition: 0.2s;
  background-color: rgb(253, 248, 255);
  /* transition: 1s; */
  transform: translateY(-2px);
}

.button_2:active {
  transition: 0.2s;
  background-color: rgb(204, 255, 217);
  transform: translateY(2px);
}

.title-box {
    font-family: 'Plus Jakarta Sans', sans-serif;
    z-index: 10;
    top: 0;
    display: flex;
    flex-direction: row;
    position: absolute;
    padding: 8px;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    font-weight: 900;
    font-size: 18px;
    color: black;
    gap: 0.7rem;
    background-color: #FAF2FF;
    border-bottom: 1px solid rgb(221, 202, 255);
    /* box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset; */
}

.upper-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 3rem;
    gap: 1rem;
}

.button_1 {
    align-items: center;
    margin-top: 8px;
    appearance: none;
    margin-left: 8px;
    margin-bottom: 1rem;
    background-color: #FCFCFD;
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    color: #36395A;
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono",monospace;
    height: 25px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 14px;
  }
  
  .button_1:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  }
  
  .button_1:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
  }
  
  .button_1:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
    background-color: #FAF2FF;
  }
.filename {
    margin: 1rem;
}

.editor-container {
    width: 99%;
    margin: 1px auto;
}

.ck-editor__editable[role="textbox"] {
    /* editing area */
    min-height: 500px;    
}
.ck-content .image {
    /* block images */
    max-width: 80%;
    margin: 20px auto;
}