:root{--colour-bg-dark: #0b2822;--colour-bg-light: #f9f9f9;--colour-text-light: #ecf0f1;--colour-text-dark: #202124;--colour-border: #dcdcdc;--colour-highlight: #1abc9c;--colour-button-enabled: #1122aa;--colour-button-disabled: #999999;--header-height: 280px;--nav-height: 60px}html{position:relative;width:100%;overflow-x:hidden;height:100%;font-size:1.2em}@media screen and (max-width: 480px){html{font-size:1em}}@media screen and (min-width: 480px){html{font-size:1em}}@media screen and (min-width: 600px){html{font-size:1em}}@media screen and (min-width: 768px){html{font-size:1.1em}}@media screen and (min-width: 992px){html{font-size:1.2em}}body{position:relative;width:100%;overflow-x:hidden;height:100%;font-family:Inter,sans-serif;line-height:1.6;background:#eee;color:var(--colour-text-dark);margin:0;padding:0}#app{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow-x:hidden}ul,ol{padding-left:1.2em}header{width:100%;background-image:linear-gradient(60deg,#54a,#ccf);text-align:center}header img.logo{position:absolute;height:var(--header-height);left:0;top:60px}header .spacer{height:var(--header-height)}nav{position:relative;height:var(--nav-height);line-height:var(--nav-height);padding:0 2rem;border-bottom:solid 4px white}nav div{margin:auto;display:flex;justify-content:space-between;align-items:center;max-width:1000px}@media screen and (min-width: 768px){nav div{width:80%}}nav div a{text-decoration:none;color:#fff;font-weight:500;transition:color .3s ease}nav div a:hover{color:var(--colour-highlight)}main{flex-grow:1;margin:0 auto;padding:2rem 1rem 4rem;width:80%;max-width:1000px}section{margin-bottom:2rem}#app{height:100%}a.disabled{pointer-events:none;cursor:default}h2{font-size:1.75rem;border-bottom:1px solid var(--colour-border);padding-bottom:.5rem;margin-bottom:1rem}.app-grid{display:grid;grid-template-columns:1fr;margin-bottom:1rem}@media screen and (max-width: 480px){.app-grid{grid-template-columns:1fr}}@media screen and (min-width: 480px){.app-grid{grid-template-columns:1fr 1fr}}@media screen and (min-width: 600px){.app-grid{grid-template-columns:1fr 1fr}}@media screen and (min-width: 768px){.app-grid{grid-template-columns:1fr 1fr}}@media screen and (min-width: 992px){.app-grid{grid-template-columns:1fr 1fr 1fr 1fr}}.portfolio-grid{display:grid;gap:2rem}.app-tile{display:flex;flex-direction:column;padding:1rem;background:var(--colour-bg-light);text-align:center}.app-tile .title{height:6em}.app-tile .app-icon{max-width:140px}.app-tile .platform-icons{width:160px;margin:0 auto}.app-tile .platform-icons img{width:28px;padding:1px}.app-card{display:flex;padding:1rem;background:var(--colour-bg-light)}.app-card .app-info{position:relative;padding:1rem;display:flex;flex-direction:column}.app-card details{padding:1rem 0 0 1rem}.app-card .app-info .info-btn{list-style:none}.app-card .app-info .info-btn svg{width:1.5em;height:1.5em;fill:gray;cursor:pointer}.app-card .app-info .app-info-inner{position:relative}.app-card .app-info .app-categories-grid span{display:inline-block;padding:0 1em}.app-card .app-info .app-fh-attrs-heading{display:flex;margin-top:1em;margin-bottom:1em}.app-card .app-info .app-fh-attrs-heading h3{margin:0}.app-card .app-info .app-fh-attrs-heading select{margin-left:1em}.app-card .app-info .app-fh-attrs-list{display:grid;grid-template-columns:auto 1fr}.app-card .app-info .app-fh-attrs-list .tick{padding:0 20px}.app-card .app-tile{min-width:200px}@media screen and (max-width: 992px){.app-card{flex-direction:column}.app-card .app-info{padding:0 1rem 1rem}.app-card .app-tile{margin:0 auto}}@media screen and (min-width: 992px){.app-info-inner{top:50%;transform:translateY(-50%)}}button{width:100%;background-color:var(--colour-button-enabled);color:#fff;padding:14px 20px;margin:8px 0;border:none;border-radius:4px;cursor:pointer}button:disabled{background-color:var(--colour-button-disabled);cursor:default}a{color:var(--colour-highlight)}.criteria-table{display:grid;grid-template-columns:1fr 1fr 1fr;background-color:var(--colour-bg-light)}.criteria-table .criteria-heading{border-top:4px solid;padding:0 1rem;order:0}.criteria-table .criteria-list{padding:0 1rem;order:1}.criteria-table .criteria-list ul{margin-top:0;line-height:1.8em}@media screen and (max-width: 768px){.criteria-table{grid-template-columns:1fr}.criteria-table .criteria-heading,.criteria-table .criteria-list{order:0}}.criteria-table .tier-0{border-color:orange}.criteria-table .tier-1{border-color:#ff0}.criteria-table .tier-2{border-color:green}#page-database details summary .filter-btn{cursor:pointer}#page-database .filter{margin-bottom:20px}#page-database .filter fieldset{box-sizing:border-box;width:100%}#page-database .filter fieldset.columns{column-count:2}@media screen and (max-width: 480px){#page-database .filter fieldset.columns{column-count:1}}#page-database .filter label{position:relative;padding-left:2.5ch;display:block;margin-bottom:5px;break-inside:avoid-column;line-height:1.1em}#page-database .filter input[type=text]{box-sizing:border-box;width:100%}#page-database .filter label>[type=checkbox]{position:absolute;left:0}#page-database .buttons{display:grid;grid-template-columns:1fr 1fr;gap:16px}#page-contact input,textarea{width:100%;padding:12px 20px;margin:8px 0;display:inline-block;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}footer{text-align:center;font-size:.85rem;color:var(--colour-text-light);padding:1.5rem;border-top:solid 4px white;background-color:var(--colour-bg-dark)}
