nav{position:fixed;height:80px;width:100%;background:var(--primary-color);box-shadow:0 2px 4px rgba(0,0,0,.5);z-index:1000;transition:background-color .3s,box-shadow .3s;flex-direction:row;justify-content:center;margin:0;padding:0;font-family:Albert Sans,sans-serif}.navbar,nav{display:flex;align-items:center}.navbar{justify-content:space-between;padding-left:1em;padding-right:1em;width:1200px}.navbar-links{display:flex;align-items:center}nav ul{list-style:none;display:flex;padding:0;margin:0}nav li{position:relative;margin-right:20px}nav a{color:#fff;font-weight:300;font-size:1em;transition:color .2s}nav a,nav a:hover{text-decoration:none}nav a:hover{color:var(--secondary-color)}nav form{display:flex;align-items:center}.button-navbar-menu{display:none}#title{font-size:1.5em}.navbarDropdown{display:none;position:absolute;background-color:#fff;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1001;width:-moz-max-content;width:max-content;top:150%;left:0;right:0;border-radius:.5em}.navbarDropdown.show{display:block}.navbarDropdown li{margin:0;padding:0}.navbarDropdown li a{text-decoration:none;display:block;white-space:nowrap;color:var(--text-color-dark);padding:12px 1.5em}.navbarDropdown a{padding:12px 16px;text-decoration:none;display:block}.navbarDropdown a:hover{background-color:#ddd;border-radius:.5em}.search-form{padding-left:1em;justify-content:center}.search-box,.search-form,.search-input{display:flex;align-items:center}.search-input{flex-grow:1;padding:10px 30px 10px 10px;margin-right:10px;border:solid #ddd;border-width:0 0 1px;border-radius:0;font-size:16px;transition:border-color .3s;justify-content:center}.search-input:focus{border-color:var(--primary-color);outline:none}.search-icon{z-index:1001;transform:translateX(-40px);color:#bbb}.search-icon:hover{color:var(--primary-color)}.show-pointer{cursor:pointer}@media (max-width:767px){nav{display:flex;flex-direction:column;height:auto;min-height:70px;background-color:transparent;box-shadow:none}nav a:hover{color:#2b70e4;text-decoration:none}.navbar{display:flex;height:auto;width:100vw;padding:0;background-color:transparent}#title,.navbar-links,.navbar-logo{display:none}.navbar-logo.show-logo{display:block;position:absolute;top:1em;left:1em}.navbar-links.show{justify-content:center;background-color:var(--primary-color);width:100vw;height:-moz-fit-content;height:fit-content;color:var(--text-color-light);padding-top:1em;padding-bottom:100vh;margin-top:-50px}.navbar-links .nav-main-ul,.navbar-links.show{display:flex;flex-direction:column;align-items:center}.navbar-links .nav-main-ul{list-style:none;padding:0;margin:10em 0 0}.button-navbar-menu{display:block;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:50ms;display:flex;position:fixed;right:1em;top:1em;justify-content:center;align-items:center;font-size:1rem;z-index:1001}.button-navbar-menu:hover{background-color:var(--primary-color);color:#fff}.navbarDropdown{display:none;position:inherit;background-color:transparent;box-shadow:none;z-index:1001;width:-moz-max-content;width:max-content;top:0;left:0;right:0;margin-top:0;border-radius:0;padding-top:.5em}.navbarDropdown li a{color:var(--text-color-light);padding:0}.navbarDropdown a:hover{background-color:transparent;color:var(--secondary-color)}.nav-main-ul li{padding:.5em}.navbarDropdown.show ul{margin:0}nav li{display:flex;flex-direction:column;align-items:center}}.article-cover-container{position:relative;width:100%;max-height:450px;overflow:hidden;border-radius:10px;margin-bottom:2em;display:flex;justify-content:center;align-items:center}.article-cover{width:100%;height:auto;transition:all .3s ease-in-out}.article-cover-container:hover .article-cover{filter:brightness(50%)}.cover-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:1.5em;font-family:var(--font-primary);text-align:center;opacity:0;transition:opacity .3s ease-in-out}.article-cover-container:hover .cover-text{opacity:1}.page#how-it-works{padding-top:5em;min-height:100vh;display:flex;flex-direction:row;align-items:flex-start;background-color:var(--background-color);color:var(--text-color-dark)}.code-block{position:relative;cursor:pointer}.code-block pre{margin:0}.copy-hint{position:absolute;top:10px;right:10px;background-color:rgba(0,0,0,.7);color:#fff;padding:5px 10px;border-radius:3px;display:none}.code-block:hover .copy-hint{display:block}.content-container{display:flex;max-width:1280px;width:100%;margin:auto;padding:2em}.content-container,.toc{background-color:var(--background-color);border-radius:10px}.toc{position:sticky;top:7em;align-self:flex-start;margin-right:2em;padding:1em;box-shadow:0 4px 8px rgba(0,0,0,.1);min-width:20%}.toc h2{font-family:var(--font-primary);font-size:1.5em;color:#333;margin-bottom:1em;text-align:left}.toc ul{list-style-type:none;padding-left:0;text-align:left}.toc ul li{margin:.5em 0}.toc ul li a{font-family:var(--font-secondary);font-size:1.2em;color:var(--text-color-dark);text-decoration:none;transition:color .3s,width .3s}.toc ul li a:hover{color:var(--secondary-color);cursor:pointer}.toc ul li a.active{color:var(--text-color-dark);cursor:pointer}.toc ul li a.active:after,.toc ul li a:hover:after{width:100%}.toc ul li a:after{content:"";display:block;width:0;height:2px;background:var(--secondary-color);transition:width .3s}.article{flex-grow:1;text-align:left;line-height:1.8;background-color:var(--background-color);padding:1em;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1)}.article-header{display:block;margin-bottom:2em}.article-header .date{font-family:var(--font-secondary);font-size:1.2em;color:var(--text-color-dark);margin-bottom:.5em}.article-header .title{font-size:2.5em}.article h2,.article-header .title{font-family:var(--font-primary);color:var(--primary-color)}.article h2{font-size:2em;margin-bottom:.5em;text-align:left}.article p{font-family:var(--font-secondary);font-size:1.2em;color:var(--text-color-dark);margin-bottom:1em;text-align:left}pre{background-color:var(--secondary-background-color);padding:1em;border-radius:10px;overflow-x:auto}code{font-family:Source Code Pro,monospace;font-size:1em}@media (max-width:1200px){.toc{display:none}.article{width:100%}}