html{width:100%;min-height:100%;display:flex}body{width:100%;min-height:100%;display:flex;flex-direction:column}body.dark{background-color:#000;color:#fff}*{margin:0;padding:0;box-sizing:border-box;font-family:montserrat}h1{font-size:4.5rem;margin:0 0 2rem}h2{font-size:2rem;margin:1rem 0}p{font-size:1.25rem}p a,.o-footer a{text-decoration:none;border-bottom:1px solid #000;color:#000}.dark p a:visited,.dark p a:active,.dark p a:hover p a:visited,p a:active,p a:hover{color:#777!important;background-color:transparent;border-bottom:2px solid #777!important;text-decoration:none}.dark p a,.dark .o-footer a{color:#fff!important;border-bottom:1px solid #fff!important}main.home,main.notfound{flex-grow:1;margin:0;background-size:cover!important;color:#fff;display:flex;flex-direction:column;font-size:1.75rem}main.home{background:linear-gradient(rgba(0,0,0,.3) 0%,rgba(0,0,0,0.65) 59%),url(/images/portrait.webp) center center}main.notfound{background:linear-gradient(rgba(0,0,0,.3) 0%,rgba(0,0,0,0.65) 59%),url(/images/erik-mclean-bGWVhFY1gH0-unsplash.webp) center center}main.home h1,main.notfound h1{margin:auto;margin-bottom:0;font-size:4.5rem;text-shadow:5px 5px 16px #000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media only screen and (max-width:600px){main.home p,main.notfound p{max-width:85%}}main.home p,main.notfound p{margin:5px auto;max-width:75%;text-shadow:2px 2px 5px #000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}main.notfound p{margin:5px auto auto}main.home .links{margin-top:.25rem;margin-bottom:auto;text-shadow:2px 2px 5px #000}main.home .links a,main.home .links span{color:#fff;margin-right:.25rem}main.home .links span:last-child{margin-right:0}main.notfound a{text-decoration:none;border-bottom:1px solid #fff;color:#fff}.o-header{width:100%;margin:0}.o-nav{width:100%;max-width:500px;padding:1rem;margin:0 auto}@media only screen and (max-width:600px){.o-nav{padding:.25rem}.o-nav__list{justify-content:flex-start!important}.o-nav__item{width:initial!important}}.o-nav__list{list-style-type:none;display:flex;justify-content:space-around}.o-nav__item{width:100%;margin-right:1rem}.o-nav__item:last-child{margin-right:0}.o-nav__item .active{background-color:#000;color:#fff}.dark .o-nav__item .active{background-color:#000!important;color:#000!important}.o-nav__link{text-decoration:none;padding:.75rem 0;border-radius:4px;text-align:center;display:block;color:#000;transition:.2s ease background-color,.2s ease color}.dark .o-nav__link{color:#fff!important}.o-nav__link:hover,.o-nav__link--active{background-color:#000;color:#fff}.dark .o-nav__link:hover,.dark .o-nav__link--active{background-color:#fff!important;color:#000!important}.o-main{width:95%;max-width:700px;padding:1rem;margin:auto;margin-top:1rem}.o-footer{text-align:center;padding:1rem;width:95%;max-width:700px;margin:0 auto}.c-bloglist__item{margin-bottom:2rem}.c-bloglist__metas{font-size:.8rem;font-weight:600;color:#777;text-transform:uppercase;margin:.5rem 0}.c-bloglist__header{margin:0 0 2rem}.c-bloglist__header h1{margin:auto}.c-bloglist__heading{font-weight:700}h2.c-bloglist__heading{font-size:2rem}.c-bloglist__headinglink{color:#000}.dark .c-bloglist__headinglink{color:#fff!important}.c-bloglist__summary{margin-bottom:.5rem}.c-bloglist__link{color:#000}.dark .c-bloglist__link{color:#fff!important}.c-blogpost__metas{font-size:.8rem;font-weight:600;color:#777;text-transform:uppercase;margin-bottom:.5rem}.c-blogpost__heading{font-weight:700}.c-blogpost__heading h1{margin:auto}.text-center{text-align:center}.language-nav{position:absolute;top:0;right:0;width:initial;display:flex;justify-content:flex-end;margin:auto}.language-nav .o-nav__link{padding:.75rem .5rem;color:#777}.js-toggle-wrapper{display:table;margin:auto}.js-toggle{touch-action:pan-x;display:inline-block;position:relative;cursor:pointer;background-color:transparent;border:0;padding:0;-webkit-touch-callout:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}.js-toggle-screenreader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.js-toggle-track{width:50px;height:24px;padding:0;border-radius:30px;background-color:#0f1114;transition:all .2s ease}.js-toggle-track-check{position:absolute;width:17px;height:17px;left:5px;top:0;bottom:0;margin-top:auto;margin-bottom:auto;line-height:0;opacity:0;transition:opacity .25s ease}.js-toggle--checked .js-toggle-track-check{opacity:1;transition:opacity .25s ease}.js-toggle-track-x{position:absolute;width:17px;height:17px;right:5px;top:0;bottom:0;margin-top:auto;margin-bottom:auto;line-height:0;opacity:1;transition:opacity .25s ease}.js-toggle--checked .js-toggle-track-x{opacity:0}.js-toggle-thumb{position:absolute;top:1px;left:1px;width:22px;height:22px;border-radius:50%;background-color:#fafafa;box-sizing:border-box;transition:all .5s cubic-bezier(0.23,1,0.32,1)0ms;transform:translateX(0)}.js-toggle--checked .js-toggle-thumb{transform:translateX(26px);border-color:#19ab27}.js-toggle--focus .js-toggle-thumb{box-shadow:0 0 2px 3px #7da7c4}.js-toggle:active .js-toggle-thumb{box-shadow:0 0 5px 5px #7de2ea}.size2x2 ul li{width:45%!important}.size4x4 ul li{width:22.5%!important}.size5x5 ul li{width:18.5%!important}.playground{min-width:250px;min-height:250px;margin:10px auto}.playground ul{display:flex;flex-wrap:wrap;list-style-type:none;justify-content:space-evenly;color:#e4fde1}.dark .playground ul{color:#000}.playground ul li{background:#000;width:30%;height:150px;margin:10px 1px;text-align:center;font-size:5rem;padding-top:1.5rem;border:1px solid #fff;box-shadow:2.5px 2.5px 8px #000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dark .playground ul li{background:#fff;border:1px solid #000;box-shadow:2.5px 2.5px 8px #e7e5e5}.playground ul li.success{background-color:#6ed731;border:1px solid #000;color:#000}.playground ul li.empty{background:#444;border:1px solid #000;box-shadow:2.5px 2.5px 8px #444}.dark .playground ul li.empty{background:#444}.modal{background:#12801d;position:absolute;top:30%;left:50%;transform:translateX(-50%)}.modal .message{color:#fde1e3;margin:5vw 10vw 10vw;font-size:5rem}.hide{display:none}.modal .header{text-align:right;padding:5px}.modal .header button{padding:10px;border:0;background:#456990;color:#e4fde1;cursor:pointer}