body{background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}.MainContentContainer{margin-left:3em;margin-right:3em}header{top:0;z-index:99999}.post-date{font-family:franklin gothic medium,arial narrow,Arial,sans-serif;font-size:.6em}code{background-color:rgba(10,10,10,.75);color:#c8c8c8;padding:.5em;padding-top:.1em;padding-bottom:.1em;padding-left:.5em;padding-right:.5em;border-radius:5px}pre code{color:#fff;background-color:transparent}.postWrapper code{background-color:#141414;border-color:#0a501e;border-style:solid;border-width:.2px;font-weight:100;font-family:Arial,Helvetica,sans-serif;padding:.5em}.mainMenu{position:relative;top:-30px;background-color:#0a501e;border:2px solid #000;border-radius:10px}.mainMenu ul{display:flex;flex-wrap:wrap;margin-left:0;padding-inline-start:0;justify-content:space-evenly;list-style-type:none}.mainMenu ul li{background-color:#053214;color:#fafafa;font-weight:600;font-size:1.3em;border:1px solid #000;padding:.5em 2em;border-radius:20px;margin-top:3px;margin-bottom:3px;box-shadow:2px 2px 5px black}.mainMenu ul li:hover{background-color:#000;color:#c8c8c8;border:1px solid #000;box-shadow:0 0}.mainMenu ul li a{color:#c8c8c8}.mainMenu ul li a:hover{color:#14ffff}.article-like-list{background-color:#e6ffe6;color:#000;margin:1em;padding-right:3px;padding-left:5px;padding-bottom:3px;padding-top:0;border-radius:15px}.article{background-color:#e6ffe6;color:#000;margin:3em;padding:.4em 1em;border-radius:15px}.article pre{background-color:#005a00;padding:.5em;box-shadow:5px 5px 5px rgba(0,90,0,.7);border-radius:5px}.learningNav-container-narrow{display:none}.learningNav-container{position:relative;float:right;top:0;left:0}@media(max-width:650px){.learningNav-container{display:none;flex-direction:column;align-items:center;position:relative;float:right;top:0;left:0}.learningNav-container-narrow{display:flex;flex-direction:column;align-items:center;position:relative;float:right;top:0;left:0}.article pre{background-color:#005a00;padding:0;box-shadow:5px 5px 5px rgba(0,90,0,.7);border-radius:5px}.article{background-color:#e6ffe6;color:#000;margin:0;padding:.4em 1em;border-radius:15px}}.learningNav{top:5px;right:10px;background-color:#e6ffe6;border-radius:10px;padding-right:.5em;padding-bottom:1.2em;border:1px solid rgba(0,0,0,.4);box-shadow:5px 5px 5px rgba(0,90,0,.7)}.learningNav ul{list-style-type:none;padding-left:.5em}.learningNav ul>li{display:flex}.learningNav a{color:#e6ffe6;background-color:#0a501e;margin-top:.3em;padding:3px 9px;border-radius:5px;width:100%;text-decoration:none;box-shadow:3px 3px 3px black}.learningNav h3{color:#0a641e;padding-left:5em}.learningNav a:hover{box-shadow:none;background-color:#0a641e}.header-jstoday{font:112.5%/1.45em georgia,serif;font-weight:400;word-wrap:break-word;font-kerning:normal;font-feature-settings:"kern","liga","clig","calt";font-family:"arvo, sans-serif";color:#000;box-sizing:inherit;background-color:#000;text-align:center;text-shadow:#fff 0 0 10px;font-size:5vw;white-space:nowrap;width:100%;height:60%;h1 { font-size: 2em; }}.postWrapper{background-color:rgba(5,5,100,.25);margin:2em 1em;padding:5px 1em}.post-breadcrumb-button{background-color:green;border-radius:10px;margin-right:2em}.posts-breadcumbs-menu{display:flex}.works-cited{font-size:.8em}.article h3{background-color:rgba(10,80,30,.8);color:#fff;padding:10px 15px;border-radius:8px;margin:20px 0 15px}.article h3 a{color:#fff}.article h3 a:hover{color:#14ffff;text-decoration:underline}.postWrapper h3{background-color:rgba(10,80,30,.8);color:#fff;padding:10px 15px;border-radius:8px;margin:20px 0 15px}.postWrapper h3 a{color:#fff}.postWrapper h3 a:hover{color:#14ffff;text-decoration:underline}.content-wrapper{display:flex;gap:1.5em;margin-top:2em}.section-nav{min-width:200px;max-width:220px;background-color:rgba(20,20,20,.8);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1em;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;flex-shrink:0}.section-nav h3{margin-top:0;margin-bottom:.8em;color:#4caf50;font-size:1em;border-bottom:2px solid rgba(76,175,80,.3);padding-bottom:.4em}.tutorial-list ul{list-style:none;padding:0;margin:0}.tutorial-list li{margin-bottom:.3em}.tutorial-list li a{display:flex;align-items:flex-start;gap:.4em;padding:.4em .5em;color:rgba(200,200,200,.9);text-decoration:none;border-radius:4px;transition:all .2s ease;font-size:.85em;line-height:1.3}.tutorial-list li a:hover{background-color:rgba(76,175,80,.1);color:#fff}.tutorial-list li.current a{background-color:rgba(76,175,80,.2);color:#4caf50;font-weight:700}.tutorial-number{color:#4caf50;font-weight:700;min-width:1.5em;flex-shrink:0}.tutorial-title{flex:1;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tutorial-duration{font-size:.75em;color:rgba(150,150,150,.8);white-space:nowrap;display:none}.tutorial-list li.current .tutorial-duration,.tutorial-list li a:hover .tutorial-duration{display:block}.article{flex:1;min-width:0}@media(max-width:968px){.content-wrapper{flex-direction:column;width:100%;overflow-x:hidden}.section-nav{position:static;max-width:100%;min-width:0;width:100%;max-height:none;margin-bottom:2em;margin-left:0;margin-right:0;box-sizing:border-box}.tutorial-list{max-height:300px;overflow-y:auto;overflow-x:hidden}.tutorial-list li a{font-size:.9em;padding:.5em}.tutorial-duration{display:block}.article{width:100%;max-width:100%;margin:0;overflow-x:hidden}}@media(max-width:1200px) and (min-width:969px){.section-nav{min-width:180px;max-width:200px}.tutorial-list li a{font-size:.8em}}body{overflow-x:hidden}.content-wrapper{box-sizing:border-box}.section-nav,.article,.tutorial-list{box-sizing:border-box}.prev-next-nav{margin-top:4em;padding-top:2em;border-top:2px solid rgba(10,80,30,.5)}.prev-next-container{display:flex;justify-content:space-between;gap:2em;align-items:stretch}.prev-link,.next-link{display:flex;align-items:center;gap:1em;padding:1.5em;background-color:#0a501e;border:1px solid #0a501e;border-radius:10px;text-decoration:none;color:#c8c8c8;transition:all .3s ease;flex:1;max-width:45%}.prev-link:hover,.next-link:hover{background-color:#0a501e;border-color:rgba(20,255,255,.5);color:#14ffff;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.4)}.nav-arrow{font-size:1.5em;font-weight:700;color:#0a501e}.prev-link:hover .nav-arrow,.next-link:hover .nav-arrow{color:#14ffff}.nav-content{display:flex;flex-direction:column;gap:.3em}.nav-label{font-size:.75em;text-transform:uppercase;letter-spacing:.05em;color:#969696;font-weight:600}.nav-title{font-size:1em;font-weight:500;color:#c8c8c8}.prev-link:hover .nav-title,.next-link:hover .nav-title{color:#14ffff}.next-link{text-align:right}.nav-spacer{flex:1;max-width:45%}@media(max-width:768px){.prev-next-container{flex-direction:column;gap:1em}.prev-link,.next-link{max-width:100%}.next-link{text-align:left;flex-direction:row-reverse}}.code-block-wrapper{position:relative;margin:1em 0}.code-block-wrapper pre{margin:0}.copy-code-button{position:absolute;top:.5em;right:.5em;padding:.4em .8em;font-size:.75em;font-weight:600;color:#c8c8c8;background-color:rgba(10,80,30,.8);border:1px solid #0a501e;border-radius:5px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.05em}.copy-code-button:hover{background-color:#0a501e;color:#14ffff;border-color:rgba(20,255,255,.5)}.copy-code-button.copied{background-color:#0a6428;color:#64ff64;border-color:rgba(100,255,100,.5)}.copy-code-button:active{transform:scale(.95)}:root{--bg-primary:#000000;--bg-secondary:rgba(10, 80, 30, 1);--bg-secondary-light:rgba(10, 80, 30, 0.3);--bg-code:rgba(10, 10, 10, 0.75);--bg-code-inline:rgba(20, 20, 20, 1);--text-primary:rgba(255, 255, 255, 1);--text-secondary:rgba(200, 200, 200, 1);--text-muted:rgba(150, 150, 150, 1);--accent-primary:rgba(10, 80, 30, 1);--accent-hover:rgb(20, 255, 255);--border-color:rgba(10, 80, 30, 1);--shadow-color:rgba(0, 0, 0, 0.3)}[data-theme=light]{--bg-primary:#ffffff;--bg-secondary:rgba(200, 230, 200, 1);--bg-secondary-light:rgba(200, 230, 200, 0.3);--bg-code:rgba(240, 240, 240, 1);--bg-code-inline:rgba(230, 230, 230, 1);--text-primary:rgba(0, 0, 0, 1);--text-secondary:rgba(40, 40, 40, 1);--text-muted:rgba(100, 100, 100, 1);--accent-primary:rgba(10, 120, 50, 1);--accent-hover:rgb(10, 100, 200);--border-color:rgba(10, 120, 50, 1);--shadow-color:rgba(0, 0, 0, 0.1)}.theme-toggle{position:fixed;bottom:2em;right:2em;width:50px;height:50px;border-radius:50%;background-color:var(--accent-primary);border:2px solid var(--border-color);color:var(--text-secondary);font-size:1.5em;cursor:pointer;transition:all .3s ease;z-index:1000;box-shadow:0 2px 8px var(--shadow-color);display:flex;align-items:center;justify-content:center}.theme-toggle:hover{background-color:var(--accent-hover);transform:scale(1.1);box-shadow:0 4px 12px var(--shadow-color)}.theme-toggle:active{transform:scale(.95)}@media(max-width:768px){.theme-toggle{bottom:1em;right:1em;width:45px;height:45px;font-size:1.3em}}.progress-tracking{margin:1.5em 0;padding:1em;background-color:var(--bg-secondary-light);border:1px solid var(--border-color);border-radius:8px;display:inline-flex;align-items:center;gap:.5em}.progress-checkbox{width:20px;height:20px;cursor:pointer;accent-color:var(--accent-primary)}.progress-label{cursor:pointer;user-select:none;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:.5em;transition:color .3s ease}.progress-label:hover{color:var(--accent-hover)}.progress-label.completed{animation:completePulse .6s ease}@keyframes completePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.tutorial-list a.completed{background-color:var(--bg-secondary-light);border-left:3px solid var(--accent-primary)}.nav-checkmark{color:var(--accent-primary);font-weight:700;margin-right:.3em}[data-theme=light] .nav-checkmark{color:var(--accent-primary)}