/* Research & Dev Styles Settings */

.head-flex-box {
    display: flex;
    justify-content: center; /* Center the flex items horizontally */
    flex-wrap: wrap;
    background-color: #3a4b53;
    height: 50%;
    width: 100%;
}

.head-flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 20px;
    font-family: 'Hanken Grotesk', sans-serif;
}

#navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0; /* Remove default margin */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center the flex items horizontally */
    flex-wrap: wrap;
    font-family: 'Hanken Grotesk', sans-serif;
}

#navbar ul li {
    margin: 5px 20px; /* Add spacing between navbar items */
    font-family: 'Hanken Grotesk', sans-serif;
}

#navbar .nav-link {
    display: inline-block; /* Limits clickable link area to text */
    text-decoration: none;
    color: rgb(70, 175, 245);
    padding: 7px 10px;
    font-family: 'Hanken Grotesk', sans-serif;
    border: 2px solid rgb(90, 129, 155); /* Add border */
    border-radius: 4px; /* Rounded corners */
    transition: background-color 0.2s, color 0.2s; /* Smooth transition for hover effect */
}

#navbar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Lighten the background on hover */
    border-radius: 4px; /* Rounded corners for the hover effect */
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(90, 113, 133);
  }

  .lab-notes-container { 
    font-family: ui-monospace, monospace;
    max-width: 700px; 
    margin: 2rem auto; 
    color: #d58d35; 
    background: #0f172a; 
    padding: 2rem; 
    border-radius: 8px; 
    border: 1px solid #334155; 
  }

  .lab-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1.5rem; 
    border-bottom: 1px solid #1e293b; 
    padding-bottom: 1rem; 
  }

  .filters { 
    display: flex; 
    gap: 0.5rem; 
  }

  .filter-btn { 
    background: #1e293b; 
    border: 1px solid #475569; 
    color: #94a3b8; 
    padding: 0.25rem 0.75rem; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 0.85rem; 
  }

  .filter-btn.active { 
    background: rgb(70, 175, 245); 
    color: #f0eaea; 
    border-color: rgb(70, 175, 245); 
  }

  .timeline { 
    display: flex; 
    flex-direction: column; 
    gap: 1.25rem; 
  }

  .note-card { 
    background: #1e293b; 
    border-left: 3px solid rgb(70, 175, 245); 
    padding: 1rem; 
    border-radius: 0 6px 6px 0; 
  }

  .note-meta { display: flex; 
    justify-content: space-between; 
    font-size: 0.75rem; 
    color: #94a3b8; 
    margin-bottom: 0.5rem; 
  }

  .note-tag { 
    background: #0f172a; 
    padding: 0.1rem 0.4rem; 
    border-radius: 3px; 
    color: rgb(70, 175, 245); 
  }

  .note-content { 
    font-size: 0.95rem; 
    line-height: 1.5; 
    margin-bottom: 0.75rem; 
  }

  .note-snippet { 
    background: #090d16; 
    padding: 0.75rem; 
    border-radius: 4px; 
    font-size: 0.85rem; 
    color: #34d399;
    overflow-x: auto; 
    border: 1px solid #1e293b; 
  }

.return-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2%;
}

.return-icon:hover {
    transform: translateY(-5px);
}