body {
    /* font-family: Roboto, sans-serif; */
    --swood-yellow: #ffcc00;
    counter-reset: section;
    --nav-bar-height: calc(3em + 10px);
}

body > section {
    display: flex;
    flex-direction: column;
}

.tangara-navbar {
    position: relative;
    top: 0;
    height: var(--nav-bar-height);
    padding: 5px 10px;
}

.nav-start * {
    height: 100%;
    width: auto;
}

.container {
    text-align: justify;
    font-size: 12pt;
}

h2::before {
    counter-increment: section;
    content: '●'; /* counter(section) "."; */
    margin-right: .5em;
    color: var(--swood-yellow);
}

#app section {
    margin-top: 5em;
}

figure img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

.app-container {
    /* margin-top: 5em; */
    position: relative;
    display: flex;
    justify-content: flex-start;
}






#menu {
    position: sticky;
    margin-bottom: 1em;
    padding: 2em;
    font-size: 8pt;
    border-right: 1px solid #ebebeb;
}

#menu ol, #menu ul {
    top: calc(var(--nav-bar-height) + 2em);
}

#menu li {
    margin-bottom: 10px;
}

#menu li:hover {
    font-weight: bold;
}

#menu a {
    text-decoration: none;
    font-style: normal;
    color: #444;
}






.video {
    width: 60%;
    min-width: 600px;
    height: auto;
    aspect-ratio: 16/9;
    display: block;
    margin: 0 auto;
}

a {
    font-style: italic;
}

figcaption {
    font-size: 10pt;
    text-align: center;
    color: #888;
    font-style: italic;
    margin: 1em 0;
}

.side-container {
    overflow-y: auto;
    height:100%;
}

.tangara-drawer {
    --drawer-open-width: 180px;
 
}