/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  background-color: #f8f7f4;
  color: #1e1e1e;
  line-height: 1.6;
}

#units {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  background-color: #f8f7f4;
  color: #1e1e1e;
  line-height: 1.6;
}


header {
  padding: 4rem 2rem 2rem;
  max-width: 720px;
  margin: auto;
}

.subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  color: #444;
}

nav {
  max-width: 720px;
  margin: 0 auto 3rem;
  padding: 0 2rem;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
}

nav a {
  text-decoration: none;
  color: #3b3b3b;
}

nav a:hover {
  text-decoration: underline;
}

main {
  max-width: 720px;
  margin: auto;
  padding: 0 2rem 4rem;
}

section {
  margin-bottom: 3rem;
}

h1, h2 {
  font-weight: normal;
}

h2 {
  margin-bottom: 0.75rem;
}

footer {
  max-width: 720px;
  margin: auto;
  padding: 2rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  color: #666;
}

/* --- Seminar Note-Pad Styles --- */
#note-pad-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 350px;
    z-index: 1000;
    font-family: serif; 
}

#note-toggle {
    background: #1a1a1a;
    color: #f4f4f4;
    border: 1px solid #333;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    float: right;
    font-variant: small-caps;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.note-content {
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.note-header {
    background: #f9f9f9;
    padding: 10px;
    font-size: 11px;
    border-bottom: 1px solid #eee;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.note-actions button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
    margin-left: 10px;
    text-decoration: underline;
}

.note-actions button:hover { color: #000; }

#note-area {
    width: 100%;
    height: 350px;
    padding: 15px;
    border: none;
    line-height: 1.6;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    font-family: "Georgia", serif;
}

/* Logic for showing/hiding */
.note-hidden .note-content { 
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

/* Print styling */
@media print {
    body * { visibility: hidden; }
    #note-area, #note-area * { visibility: visible; }
    #note-area { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%;
        height: auto;
    }
}