@import"https://fonts.googleapis.com/css?family=Lato:400,900";.grid{display:grid;grid-template-columns:repeat(5,4.5em);grid-auto-rows:4.5em;grid-gap:1em}.button{font-weight:900;font-size:1.5em;padding:1em;border-radius:.5em;text-shadow:0 2px 0 rgba(0,0,0,.07);background:var(--geel);border:1px solid #011627;color:#011627;box-shadow:0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f;text-decoration:none}.button:disabled{background:gray;color:#002747}.secondary{background:var(--blauw-400)}.button:hover{animation:hover 1.2s linear 2 alternate}.button:active{animation:active 1.2s ease 1 alternate}@keyframes hover{0%{transform:scaleZ(1)}1.8%{transform:scale3d(1.016,1.037,1)}3.5%{transform:scale3d(1.033,1.094,1)}4.7%{transform:scale3d(1.045,1.129,1)}5.31%{transform:scale3d(1.051,1.142,1)}7.01%{transform:scale3d(1.068,1.158,1)}8.91%{transform:scale3d(1.084,1.141,1)}9.41%{transform:scale3d(1.088,1.132,1)}10.71%{transform:scale3d(1.097,1.107,1)}12.61%{transform:scale3d(1.108,1.077,1)}14.11%{transform:scale3d(1.114,1.067,1)}14.41%{transform:scale3d(1.115,1.067,1)}16.32%{transform:scale3d(1.119,1.077,1)}18.12%{transform:scale3d(1.121,1.096,1)}18.72%{transform:scale3d(1.121,1.102,1)}20.02%{transform:scale3d(1.121,1.113,1)}21.82%{transform:scale3d(1.119,1.119,1)}24.32%{transform:scale3d(1.115,1.11,1)}25.53%{transform:scale3d(1.113,1.102,1)}29.23%{transform:scale3d(1.106,1.089,1)}29.93%{transform:scale3d(1.105,1.09,1)}35.54%{transform:scale3d(1.098,1.105,1)}36.64%{transform:scale3d(1.097,1.106,1)}41.04%{transform:scale3d(1.096,1.099,1)}51.45%{transform:scale3d(1.099,1.102,1)}44.04%{transform:scale3d(1.096,1.097,1)}52.15%{transform:scale3d(1.099,1.102,1)}58.86%{transform:scale3d(1.101,1.099,1)}63.26%{transform:scale3d(1.101,1.1,1)}66.27%{transform:scale3d(1.101,1.101,1)}73.77%{transform:scale3d(1.1,1.1,1)}81.18%{transform:scale3d(1.1,1.1,1)}85.49%{transform:scale3d(1.1,1.1,1)}88.59%{transform:scale3d(1.1,1.1,1)}96%{transform:scale3d(1.1,1.1,1)}to{transform:scale3d(1.1,1.1,1)}}@keyframes active{0%{transform:scale(1)}90%{transform:scale(.9,.88)}to{transform:scale(.92,.9)}}.grid-item{padding:0;margin:0}.grid-item.green{background-color:var(--groen)}.grid-item.orange{background-color:var(--oranje)}.grid-item.red{background-color:var(--rood)}.grid-item.falldown{animation:falldown 1.2s 1 ease-in forwards}.grid-item.slideouttop{animation:slide-out-blurred-top .45s ease-out both}@keyframes falldown{0%{opacity:1;transform:translate(0) rotate(0)}to{opacity:0;transform:translate3d(0,1200px,0) rotate(-170deg)}}@keyframes slide-out-blurred-top{0%{transform:translateY(0) scaleY(1) scaleX(1);transform-origin:50% 0%;filter:blur(0);opacity:1}to{transform:translateY(-1000px) scaleY(2) scaleX(.2);transform-origin:50% 0%;filter:blur(40px);opacity:0}}.overlay{position:fixed;width:100%;min-height:100%;bottom:0;top:0;left:0;right:0;background:radial-gradient(ellipse at bottom left,#2aa7ba,#12a5bb 30%,#025f76 70%,#025f76);display:flex;flex-direction:column;justify-content:center;align-items:center}.overlay-content{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:6em}.overlay-content button{margin:1em}.slide-in-top{animation:slide-in-top .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes slide-in-top{0%{transform:translateY(-200%)}to{transform:translateY(0)}}.about-page p{font-size:1.8em;color:var(--zwart);text-align:center}.about-page small{margin:2em;color:var(--zwart)}input.my-input{font-size:2em;padding:.5em;margin:1em;border-radius:.5em;-webkit-user-select:auto;border:0;transition:border-color .5s ease-out}input.my-input.invalid{border-bottom:5px solid var(--rood)}input.my-input.valid{border-bottom:5px solid var(--groen)}.background{position:fixed;left:0;right:0;top:0;bottom:0;background-position:center;background-size:cover}.bottom-bar{display:flex;align-items:center;justify-content:center;position:fixed;bottom:0;left:0;right:0;width:100%;background-color:#fff9;box-shadow:0 5px 5px -3px #000000e6,0 8px 10px 1px #00000070,0 3px 14px 2px #00000052;z-index:10}.bottom-bar .item svg{font-size:2.25em}.bottom-bar .item{color:#005d72}.bottom-bar .item-selected{color:#022b37}.bottom-bar .label{padding:5px 0 0;margin:0;font-size:1em;color:#022b37}.bottom-bar button{min-height:6em;min-width:6em;max-width:12em;background:none;border:none;padding:10px 0 0;margin:0;cursor:pointer;outline:inherit;flex:1}.bottom-bar button:hover{animation:zoom .1s ease-in-out 1 forwards}.bottom-bar button:active{animation:press .1s ease-in-out 1 forwards}@keyframes zoom{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes press{0%{transform:scale(1.1)}to{transform:scale(1.15)}}.app{margin:0;padding:0;display:flex;flex-direction:column;align-items:center}:root{--blauw: #025f76;--blauw-400: #8ae6f9;--oranje: #ef7d00;--groen: #75b843;--rood: #f53757;--wit: #ffffff;--geel: #ffd332;--zwart: #022c39}html{box-sizing:border-box;font-family:Lato,verdana,sans-serif;font-weight:900;letter-spacing:2px;font-size:calc(.5em + 1vmin);text-shadow:1px 1px 1px rgba(0,0,0,.4)}@media only screen and (min-width:800px){html{font-size:.8em}}*,*:before,*:after{box-sizing:inherit;-webkit-user-select:none}body{color:var(--wit);background:var(--blauw)}h1{font-size:2.5em;margin:1.75em 0}p{color:#fff;font-size:2.5em;margin:0;padding:1em;line-height:1.5}a{color:var(--wit)}