/* app/assets/stylesheets/layout.css */
html, body {
    height: 100%;
}

.layout {
    display: flex;
    height: 100%;
}

.sidebar {
    width: 250px;
    transition: width 0.3s ease;
    position: fixed;
    height: 100vh;
}

h2 .nav-link {
    padding: 2rem;
    margin: 2rem;
}

.sidebar.collapsed {
    width: 50px;
}

.main-content {
    display: flex;
    flex: 1;
}

main {
    flex: 1;
    /*margin-right: 50%;*/
    margin-left: 300px;
    max-width: 50%;
    padding: 20px;
}

aside {
    width: 20%;
    padding: 20px;
    border-left: 1px solid #ccc;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
}

ol {
    counter-reset: ka;
    list-style-type: none;
}

ol ol {
    counter-reset: section;
    list-style-type: none;
    padding-left: 20px;
}

ol ol ol {
    counter-reset: subsection;
    list-style-type: none;
    padding-left: 20px;
}

ol ol ol ol {
    counter-reset: subsubsection;
    list-style-type: none;
    padding-left: 20px;
}

ol > li {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    margin-top: 10px;
}

ol > li::before {
    counter-increment: ka;
    content: counter(ka) ".";
    flex-shrink: 0;
    margin-right: 5px;
}

ol ol li {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
}

ol ol li::before {
    counter-increment: section;
    content: counter(ka) "." counter(section) ". ";
    margin-right: 5px;
    flex-shrink: 0;
}

ol ol ol li::before {
    counter-increment: subsection;
    content: counter(ka) "." counter(section) "." counter(subsection) " ";
}

ol ol ol ol li::before {
    counter-increment: subsubsection;
    content: counter(ka) "." counter(section) "." counter(subsection) "." counter(subsubsection) " ";
}

details {
    flex-grow: 1;
}
:root {
    --primary-blue: #0487d4;
    --accent-green: #1d9852;
    --off-white: #f5f5f5;
    --dark-grey: #333333;
    --light-grey: #e0e0e0;
}

body {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    color: var(--dark-grey);
    background-color: var(--off-white);
    margin: 0;
    padding: 0;
}

.sidebar {
    background-color: var(--primary-blue);
    color: var(--off-white);
}

main {
    background-color: var(--off-white);
}

aside {
    background-color: var(--light-grey);
}

h1, h2, h3 {
    color: var(--primary-blue);
    font-weight: 600;
}

span.ka, span.section {
    color: var(--primary-blue);
    font-weight: 600;
}

a {
    color: var(--accent-green);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.nav-link {
    color: var(--off-white);
}

button {
    background-color: var(--accent-green);
    color: var(--off-white);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
}

button:hover {
    background-color: #27ae60;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */