:root{--color-black-0:hsl(220, 0%,   0%);--color-blue-0:hsl(220, 75%,  75%);--color-blue-1:hsl(220, 100%, 60%);--color-blue-2:hsl(220, 75%,  55%);--color-white-0:hsl(220, 0%,   90%);--color-filter-0:hsla(220, 0%, 0%, 30%);--gap-0:20px;--gap-1:40px;--gap-2:60px}*{color:var(--color-white-0);margin:0;padding:0;font-family:sans-serif}html,body{height:100%;background:var(--color-blue-0)}img{margin:0 auto;display:block}input,.styled-select>select{border:none;outline:none;padding:5px 10px;background:var(--color-white-0)}.styled-select{position:relative}.styled-select>select{cursor:pointer;appearance:none}.styled-select::after{top:45%;right:1rem;content:"";position:absolute;border-top:.3em solid #000;border-left:.3em solid transparent;border-right:.3em solid transparent;pointer-events:none}#container{display:flex;min-height:100%;flex-direction:column}#filter{width:100%;height:100%;position:fixed;transition:background ease;pointer-events:none}#hamburger{width:50px;height:50px;cursor:pointer;display:none;background:var(--color-black-0);margin-left:250px;border-radius:0 5px 5px 0;flex-direction:column;justify-content:space-evenly}#hamburger span{height:4px;margin:0 7px;display:block;background:var(--color-white-0);border-radius:5px}nav{width:100%;z-index:10;position:fixed;background:var(--color-black-0);transition:left ease;user-select:none}nav ul{list-style:none;text-align:center}nav ul li{display:inline-block}nav ul li a{color:#fff;width:7rem;display:block;padding:10px;transition:box-shadow 200ms ease;text-decoration:none}#current-page,nav ul li a:hover{box-shadow:var(--color-blue-1)0 -3px inset}main{flex:1;margin-top:var(--gap-2);margin-bottom:var(--gap-0)}main *{color:var(--color-black-0);line-height:1.5rem}article{padding:0 10%}footer *{display:block}footer center{width:100%;padding:20px 0;background:var(--color-black-0)}footer center a{display:inline}footer small{color:var(--color-black-0);padding-top:20px}.layout-flex{gap:var(--gap-0);display:flex;flex-wrap:wrap;flex-direction:column}.layout-tiled{display:grid;grid-gap:var(--gap-1);grid-auto-rows:150px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.columns-2{grid:"a b"/1fr 1fr}.columns-3{grid:"a b c"/1fr 1fr 1fr}.columns-2,.columns-3{display:grid;grid-column-gap:var(--gap-1)}#filter,nav{transition-duration:400ms}@media screen and (max-width:850px){#hamburger{display:flex}nav{left:-250px;width:250px;height:100%}nav ul li{display:block}nav ul li a{width:100%;padding:10px 0}.columns-2,.columns-3{gap:var(--gap-1);display:flex;flex-direction:column}}