*{box-sizing: border-box;margin:0}
html, body{width:100%}
body {font-family: Trebuchet MS, Arial, Helvetica, sans-serif}
body{background-color:#f2f2f2;color:#666}
img{ vertical-align:middle }
h2{padding:2vh 2vw}
h3, .siteBody{ padding:1vh .5vw }
h3 { display:flex;justify-content:space-between }
h3 i{ margin-left:.5em }
a, a:hover{outline:none;text-decoration:none;font-weight:inherit;color:#666}

.site{background-color:#fff}
.grid{display:flex;justify-content:space-between;flex-wrap:wrap;}
.site{width:16vw;margin:2vh 2vw}
.siteImage{position:relative;background-repeat:no-repeat;background-position:top center;background-size:cover;height:15vh;min-height:9em;border-top:1px solid #eee;border-bottom:1px solid #eee}
.site img{ width:100% }
.pBorder{ border:1px solid #eee }
.status0 { border-bottom:3px solid #aaa }
.status1 { border-bottom:3px solid rgba(0,155,0,.9) }
.status2 { border-bottom:3px solid #ffcc00 }
.status3 { border-bottom:3px solid rgba(155,0,0,.9) }


@media (prefers-color-scheme: dark) {
    body{background-color:#333;color:#aaa}
    .site{background-color:#555}
    a, a:hover{ color:#aaa }
}

@media screen and (max-width: 1512px) {
	.site{width:21vw}
}

@media screen and (max-width: 1024px) {
	.site{width:29vw}
}

@media screen and (max-width: 736px) and (orientation:portrait), (max-width: 666px) {
	.site{width:46vw}
}

@media screen and (max-width: 374px) {
	.site{width:96vw}
}