main {
  max-width: 1000px;
  container: main / inline-size;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}
main.tiles {
  max-width: 1200px;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}

@media screen and (min-width: 800px) {
 main.tiles>* {
   flex: 0 0 calc(42cqw - 20px);
 }
 div.tile{
  background-color: #eee;
  border-radius: 5px;

 }
}

html {
margin: 0 auto;
}

a {text-decoration: none;}
img {border: 0;}
body {font-family: Helvetica, Swiss, Arial, sans-serif;
      background-color: #FFF; color: #000; 
/*
      background-image: url("images/stripes.gif"); 
      background-repeat: no-repeat; background-attachment: scroll;
      background-position: bottom right;
*/
      margin: 3px;
      padding: 3px;
/*
      border: 1px solid grey;
      border-radius: 36px;
*/
}
div.logo{float: left; clear: left; padding: 6px 6px 6px 12px;}

img.t-logo{float: left; clear: left; padding: 6px 12px 6px 12px;}


h1, h2, h3, h4, .bar, .key, .redkey {
    
    border-radius: 5px;
}
h1, h2, h3, h4, .bar {
    padding: 5px;
    margin: 6px 0;
}
h1.tile{ text-align: right;}
h1.tile:first-of-type {
 color: #eee;
}

h1.tile, .tile p, .tile h2{
    padding: 5px;
    margin: 0;
}
h1.tile, .tile h2{
    font-size: 1.5em;
}
p.hksc-logo{
  padding: 5px;
  align-items: baseline;
  display: inline-flex;
}
.hksc-logo svg{color: #aaa; height: 3em;}
.dots svg{height: 1.5em;}
.hksc-logo span {display: contents;}


@media screen and (max-width: 800px) {
 h1.tile{ text-align: left;}
 h1.tile, div.tile, .hksc-logo{
     max-width: 800px;
     width: 90cqw;
     flex-basis: 90cqw;
 }
 .tile h2{
    font-size: 1.2em;
}
}

.key, .redkey {
    padding: 2px;
}
h2, h3, h4, .bar, .key, .redkey {
    color: white;
}
h1 {
    color: black;
}
h1,h2, h3, h4, .bar, .key {
    background-color: #999;
}
.ff{
    background-color: #dc0067;
}
h1.ff{
    background-color: #ffb400;
}
.fflogo{float: right; margin: 10px; border: 10px solid #ffb400;}
.redkey {
    background-color: #f00;
}
h1, .bar {
    clear: left;
}

.bar{ padding-top: 6px; }

p {
   text-align: justify;
   padding: 0 12px;
   margin: 1em 0;
}


p code{white-space: nowrap;}
span.it{font-style:italic;}

div.code{text-align: left; overflow: auto; background-color: lightgrey; border-radius: 2px;}

span.strike {text-decoration: line-through;}