*{box-sizing:border-box}body{margin:0;padding:0;line-height:1.5;font-size:18px;text-align:center;color:#666}h1,h2,h3,h4,h5,h6{font-weight:400}p{margin:1em 0}p:first-child{margin-top:0}p:last-child{margin-bottom:0}a{color:#1e547e;text-decoration:none;opacity:.8;transition:opacity .2s ease}a:hover{text-decoration:underline;opacity:1}@media screen and (max-width:457px){body{font-size:18px}}@media screen and (max-width:293px){body{font-size:16px}}#app{display:flex;flex-direction:column;min-height:100vh}h1{margin:0;font-size:3.5em;line-height:1.2}h2{margin:1em 0 0;font-size:1.2em;font-weight:700;letter-spacing:.25em}header{padding:2em}nav{max-width:1280px;margin:0 auto 4em;padding:0 2em}nav .wrapper{display:flex;margin:0;padding:0;list-style:none;justify-content:center}nav .item{margin:.25em 1em}nav .link{padding:0 4px;text-decoration:none}@media screen and (max-width:704px){nav .wrapper{flex-direction:column}}section{max-width:1280px;margin:0 auto;padding:0 2em 2em}.content{flex:1}.grid{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}.grid:after{content:"";flex-grow:999999999;flex-grow:1000;min-width:20%}.grid .cell{display:block;flex-grow:1;margin:2px;padding:0}.grid .cell.landscape{width:450px;flex-grow:450}.grid .cell.landscape .link{padding-bottom:66.6667%}.grid .cell.portrait{width:200px;flex-grow:200}.grid .cell.portrait .link{padding-bottom:150%}.grid .cell .link{position:relative;display:block;margin:0;padding:0;border-radius:4px;overflow:hidden;background:#f4f4f4;pointer-events:none}.grid .cell .link:after{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(0,0,0,.00625);z-index:2;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.grid .cell .link:hover:after{opacity:1}.grid .cell.loaded .link{pointer-events:all}.grid .cell .thumb{position:absolute;top:0;left:0;width:100%;height:auto;pointer-events:none;vertical-align:bottom;z-index:1;opacity:0;transition:opacity .2s ease-in-out}.grid .cell.loaded .thumb{opacity:1}.grid .cell:not(.loaded) .link:before{content:"";position:absolute;display:block;top:50%;left:50%;width:32px;height:32px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' fill='none' stroke='%23aaa' stroke-width='8' r='28' stroke-dasharray='132 48'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='0.65s' values='0 32 32;360 32 32' keyTimes='0;1'/%3E%3C/circle%3E%3C/svg%3E");transform:translate(-50%,-50%)}footer{padding:2em;background:#f4f4f4}footer p{font-size:.75em}