/* ============================================
   15. MODALS
   ============================================ */

.modal-overlay {
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    z-index:2000;
    overflow-y:auto;
}

.modal-overlay.active {
    display:block;
}

.lesson-modal {
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    z-index:2000;
    overflow-y:auto;
}

.lesson-modal.active {
    display:block;
}

.lesson-modal:target {
    display:block;
}

.lesson-modal > .lesson-header {
    background:var(--nav-color);
    color:var(--black);
    padding:49px 32px 24px 32px !important;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    max-width:900px;
    margin:40px auto 0;
    border:none;
    border-bottom:none;
}

.lesson-modal > .lesson-header h2 {
    font-size:1.5rem;
}

.lesson-modal .lesson-content {
    background:var(--ivory);
    max-width:900px;
    margin:0 auto 40px;
    border:none;
    box-shadow:none;
}

.lesson-modal .lesson-body {
    padding:32px;
}

.modal {
    background:var(--ivory);
    max-width:900px;
    margin:40px auto;
    border:none;
    box-shadow:none;
    padding:0;
}

.modal-header {
    background:var(--nav-color);
    color:var(--black);
    padding:24px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
}

.modal-header h2 {
    font-size:1.5rem;
}

.close-btn {
    background:var(--white);
    color:var(--black);
    border:none;
    width:40px;
    height:40px;
    font-size:1.5rem;
    cursor:pointer;
    font-family:'IBM Plex Mono',monospace;
    display:flex;
    align-items:center;
    justify-content:center;
}

.close-btn:hover {
}

.modal-content {
    padding:32px;
}

.lesson-content {
    margin-bottom:48px;
    padding:0 32px;
}

.lesson-content h3 {
    font-size:1.25rem;
    margin:32px 0 16px;
    padding-bottom:8px;
    border-bottom:none;
}

.lesson-content p {
    margin-bottom:16px;
}

.lesson-content ul,.lesson-content ol {
    margin-bottom:16px;
    padding-left:24px;
}

.lesson-content li {
    margin-bottom:8px;
}