*{
        font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
    }
    
    body {
      background-color: #3a3a3a;
      margin: 0;
      padding:0;
    }

   h1 {
        color:#e4e4e4;
        font-size: 3rem;
    }

    .topnav{
      background-color: #575757;
      top: 0vh;
      display: flex;
      width: 100%;
  }
  
  .headerImage{
      display: flex;
      margin-left: 1.5vw;
  }
  
  .headerImage img{
      width: 7rem;
      height:7rem;
      }
  
  .Navigation-Options-Parent{
      width: 100%;
      display: flex;
      justify-content: flex-end;
  }
  
  .Navigation-Options-list{
      align-content: center;
  }
  
  .Nav-Buttons{
      list-style: none;
      text-decoration: none;
      font-size: large;
      font-weight: 500;
      color: #F2F2F2;
      background-color: #e7782e;
      padding: .4688rem;
      padding-left: 3vw;
      padding-right: 3vw;
      border-radius: 0.625rem;
      margin-right: 3vw;
  }
  /*______________________________________________________________ */

    .noteWholeComponent{
      padding: 1rem;
    }

    #notes-container {
      margin-top: 1.25rem;
    }
    .note {
      background: #aeaeaed2;
      padding: 1rem;
      margin-bottom: 0.625rem;
      border-radius: .5rem;
      position: relative;
    }
    .note textarea {
      width: 99.5%;
      height: 3.75rem;
      margin-bottom: .3125rem;
    }
    .note-buttons {
      display: flex;
      gap: 0.625rem;
    }
    #new-note {
      display: none;
      margin-top: 0.625rem;
    }
    textarea {
      width: 100%;
      resize: vertical;
      border: none;
      outline: none;
      border-radius: .5rem;
      background: #ecececd2;
      font-size: large;
      padding-left: .25rem;
    }
    .btn {
      min-height: 3.5rem;
      max-height: 3.5rem; 
      border: none;
      border-radius: .25rem;
      cursor: pointer;
      background-color:#e7782e;
      font-size: large;
      margin-top: 0.625rem;
      margin-bottom: 0.625rem;
      padding: 0.425rem;
      align-content: center;
    }

    label{
      padding: 1rem;
      color: #e5e5e5;
      font-weight: 600;
    }

    select{
      font-weight: 600;
    }

    .edit-btn { background: #e7782e; color: white; min-width: 10%;}
    .delete-btn { background: #2b2b2b; color: white; min-width: 10%;}
    .save-btn { background: #59ac5b; color: white; min-width: 10%;}
    .add-btn { background: #e5e5e5; color: #e7782e; min-width: 5%;}
    .nav-btn { background: #e5e5e5; color: rgb(32, 32, 32); ; min-width: 10%;}
    .download-btn { background: #e7782e; color: white; min-width: 10%;}