.nav-menu {
    padding-bottom: 75px;
    display:flex;
    position: absolute;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;


    background-color: var(--neutral-900);
    min-width: 250px;
    overflow: hidden;

    right: 0;
    bottom: 0;


    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: 300ms ease-out;
    box-shadow: inset 0 8px 6px -6px var(--shadow-md);
    box-shadow: inset 0 8px 6px 12px var(--shadow-md);
    
    -webkit-box-shadow: inset 0px -42px 84px -55px rgba(0, 0, 0, 0.56);
    -moz-box-shadow: inset 0px -42px 84px -55px rgba(0, 0, 0, 0.56);
    box-shadow: inset 0px -42px 84px -55px rgba(0, 0, 0, 0.56);

    ul {
      list-style: none;
    }


    font-size: 0.95rem;
    h1{
        text-decoration: underline;
        font-size: 1.25rem;
    }
    h2{
        font-size: 1rem;
    }
    h3{
        font-size: .8rem;
    }
      
    h1, h2, h3, h4, h5, h6 {
      color: var(--text-alt)
    }
}

a.anchor-link {
  display: none;
}

.nav-menu.hidden {
    transform: translateX(110%);
}

.nav-menu-header{
    font-size: 1.75rem;
    display: block;
    padding: var(--space-3);
    border-bottom: 1px solid var(--neutral-800);
    background-color: var(--neutral-300);
    text-align: center;
    width: 100%;
}

/* Style for navigation links */
.nav-menu a {
    display: block;
    padding: var(--space-1) var(--space-3);
    text-decoration: none;
    transition: background 0.3s ease-in-out;
    vertical-align: middle;
}

.nav-menu a:hover {

    background-color: var(--neutral-700) ;
    border-right: 5px solid var(--accent-highlight);
}

@media (max-width: 1200px) {
    .nav-menu {
        transform: translateX(-100%);
    }

    .nav-menu.open {
        transform: translateX(0);
    }

    .content {
        margin-left: 0;
    }
}

.definition-properties{
    background-color: linear-gradient(135deg, #f9f9f9 0%, #e3eaf5 100%);
}

.container ul {
    margin: 0 var(--space-3);
    padding: 0 var(--space-6);
    list-style: square;
 }

.mjx-chtml{
    color: var(--text-math) ;
}

.MJXc-display{
    display:inline !important;
    text-align: left !important;
    margin: 0 !important;
}


blockquote {
    background: linear-gradient(135deg, #f9f9f9 0%, #e3eaf5 100%);
    border-left: 5px solid var(--accent-highlight);
    padding: 15px 25px;
    margin: 15px 0;
    font-style: italic;
    color: var(--text-blockquote)  !important;
    font-size: 1.1em;
    line-height: 1.6;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;



    


    .mjx-chtml{
        color: var(--text-blockquote)  !important;
    }


}
cite {
    display: block;
    right: 0;
    font-size: 0.95em;
    text-align: right;
    position: relative;
    font-style: italic;
    font-weight: 300;

}
 cite::before {
            content: "— ";
            font-size: 1.1em;
            color: var(--accent-highlight);
            font-weight: bold;
        }

/* Style for <q> tags */
q {
    font-style: italic;
    color: var(--text-blockquote)  !important;

    padding: 0 0.25em;
    border-radius: 4px;
    transition: background-color 0.2s ease-in-out;
}

q::before {
    color: var(--accent-highlight);
    content: open-quote;
    font-size: 2.4em;
    vertical-align: middle;
    line-height: 0;
}

q::after {
    color: var(--accent-highlight);
    content: close-quote;
    font-size: 2.4em;
    vertical-align: middle;
    line-height: 0;
}

blockquote p {
    margin: 0;
}

blockquote footer {
    font-size: 0.9em;
    color: var(--text);
    text-align: right;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent-dark);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2rem;
  letter-spacing: -0.015em;
}

h3 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}


.figure-md {
  padding: var(--space-4);
  max-width: 600px;
}
.figure-sm {
  padding: var(--space-4);
  max-width: 350px;
}

@media (min-width: 600px) and (max-width: 980px) {
 .figure-sm {
    max-width: 550px;
    display: inline-block;
  }

.figure-md {
    max-width: 1200px;
    display: inline-block;
}
}

@media (max-width: 600px) {
    .figure-sm
    {
        width: 100%;
        max-width: 100%;
        display: block;
    }
    .figure-md {
        width: 100%;
        max-width: 100%;
        display: block;
    }
}