docs/assets/css/style.css
html {
  --hue: 0;
}

html.asWidget .hideInWidget {
  display:none;
}

body {
  background-color:black;
  background: linear-gradient(
  126.67deg,
  hsla(var(--hue), 33%, 25%, 1.0) -20%,
  hsla(var(--hue), 45%, 10%, 1.0) 25%,
  hsla(var(--hue), 95%, 3%, 1.0) 50%
  ),   hsla(var(--hue), 95%, 3%, 1.0);
  /* background: linear-gradient(226.67deg,#005fe6 -38.52%,rgba(0,95,230,0) 50.26%), black; */
  
  
  background-attachment: fixed;
  color: white;
  font-size: calc(max(1.5vmax, 2vmin, 12px));
}

content {
  margin: auto;
  display:flex;
  text-align: center;
  justify-content: center;
  flex-grow:1;
}

.site-header {
  border-top: none;
}



a.tile {
  
  text-decoration: none;
  padding: 0;
  color: white;
  text-wrap: wrap;
  width: var(--iconWidth);
  height: var(--iconHeight);
  gap: 1em;
  margin: 0;
  box-sizing: border-box;
  /* background: hsla(var(--hue), 20%, 50%, 0.2); */
  
  border-radius: var(--radius);
  position: relative;
  
  justify-content: flex-end;
  
}

#explainer::before,
a.tile:not(.borderless) .thumbnail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: conic-gradient(
  from -60deg,
  #ffffff44,
  #ffffff11,
  #ffffff33,
  #ffffff11,
  #ffffff44
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

a.tile:hover .thumbnail {
  transform: scale(1.05);
}
a.tile.wide .thumbnail {
  background-position: center;
  background-size:90%;
}
a.tile.borderless .thumbnail,
a.tile.clear .thumbnail{
  background-color :transparent !important;
}
a.tile.circle .thumbnail  {
  border-radius:1000px;
}
a.tile.cover .thumbnail {
  background-position: center;
  background-size:cover;
}

a.tile {
  display:none;
  user-select: none;
}


body.websites a.tile.website {
  display:block;
}

body.widgets a.tile.widget {
  display:block;
}

body.experimental a.tile.experimental {
  display:block;
}


body.experimental .explainer {
  display:none;
}
body:not(.widgets):not(.websites):not(.experimental) a.tile.all {
  display:block !important;
}

html:not(.experiment) a#experimental-link,
html.asWidget a#experimental-link
{
  display:none;
}
html.experiment .experiment {
  display:none;
}




a.tile.hidden {
  opacity: 0.0;
  pointer-events: none;
  display:none;
}
a.tile .thumbnail {
  transition: transform 0.2s;
  
  width:var(--iconWidth);
  height:var(--iconHeight);
  border-radius:var(--radius);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  position:relative;
  background-color: rgba(200, 200, 200, 0.2);
  display:flex;
}

a.experiment {
  position:fixed;
  bottom:12px;
  right:12px;
  
  text-align: center;
  cursor: pointer;
  border-radius:60px;
  opacity:0.5;
  box-sizing:border-box;
  color: hsla(var(--hue), 90%, 90%, 0.9);
  display:flex;
  flex-direction: row;
  align-items: center;
}
a.experiment .icon {
  width:60px;
  height:60px;
  line-height:60px;
  border-radius:30px;
}
a.experiment .label {
  
  padding: 0 0 0 20px;
}

body:not(.experimental) a.experiment .label {
  display:none;
}
body.experimental a.experiment,
a.experiment:hover {
  opacity:1.0;
  background-color:rgba(255,255,255,0.2);
}

div.icon {
  flex-grow: 1;
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
div.icon > div {
  font-size: 3rem;
  text-align: center;
}
div.info {
  /* padding: 16px 16px 20px 16px; */
  margin-top:1em;
  text-align:center;
  bottom:0;
  width:100%;
  height:4rem;
  font-size:80%;
}
div.title {
  white-space: nowrap;
  overflow: ellipsis;
  font-weight: 500;
}
div.location {
  font-size: 20%;
  color: hsla(var(--hue), 90%, 90%, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  white-space: nowrap;
  opacity:0.0;
  display:none;
}

.tile:hover div.location{
  opacity:0.8
}
.spacer {
  box-sizing: border-box;
}
a img {
  width: 18px;
  margin-bottom: auto;
}
.disabled {
  opacity: 0.2;
}
* {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
  margin: 0;
  padding: 0;
  
  min-height: 100vh;
  display:flex;
  flex-direction: column;
  
  justify-content: flex-start;
  align-items: center;
  gap:0;
}
.container {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  justify-content: top;
  flex-direction: column;
  
  width:100%;
  --iconWidth: 8em;
  --iconHeight: 8em;
  
  --radius: 1.5em;
  flex: 1 1 auto;
  padding:0vh 8vw;
  box-sizing:border-box;
}
.content {
  width:100%;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--iconWidth));
  column-gap:1.5em;
  row-gap:4em;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: auto;
  box-sizing: border-box;
  margin-bottom:2em;
  margin-top:2vh;
}

.spacer {
  opacity: 0;
  height: 1px;
}

div.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap:20px;
  
  margin: auto ;
  padding-top: 4vh ;
  padding-bottom:3vh;
  box-sizing:border-box;
  flex: 0 0 auto;
}

.nav {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width:auto;
  flex-basis: auto;
  border-radius:100px;
  padding:2px;
  margin-bottom:4vh;
  flex: 0 0 auto;
  gap:0.25em;
  width: 100%;;
}

.nav a {
  text-decoration: none;;
  padding:10px 20px;
  
  border-radius:100px;
  color: hsl(var(--hue), 50%, 70%);
}
{
  
}
.nav a:hover,
body.all a[href$="all"],

body:not(.widgets):not(.websites):not(.experimental)  a[href$="all"],
body.websites a[href$="websites"],
body.widgets a[href$="widgets"],
body.experimental a[href$="experimental"] {
  background-color: hsla(var(--hue), 50%, 70%, 0.2);
  color: hsl(var(--hue), 50%, 90%);;
}


img.icon {
  max-width:40px;
  display:block;
  z-index: 1;
  position:relative
}

svg {
  max-width: 240px;
  display: block;
  opacity: 0.4;
}
svg path {
  fill: hsl(var(--hue), 50%, 70%);
}

.explainer {
  position: relative;
  grid-column: -3 / -1;
  grid-row: 1 / 2;
  color: white;
  width: auto;
  height:auto;
  box-sizing: border-box;
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 100%);
  align-self:flex-start;
  border-radius: var(--radius, 24px);
  color: #ffffffcc;
  flex-grow: 1;
  font-size: 90%;
  font-weight:200;
  padding:1em;
}
.explainer p {
  margin:0.5em;
}
.explainer b span {
  float:left;
  margin-left:-1.25em;
  font-size:120%;
}
.explainer b {
  
  font-weight: 300;
  font-size:120%;
}
.explainer b,
.explainer span {
  color: hsl(var(--hue), 50%, 70%);
}
.explainer a {
  text-decoration: none;;
  color: hsl(var(--hue), 50%, 70%);
}
a {
  color: white;
}

.ventilation {
  background-image: radial-gradient(black 2px, transparent 0);
  background-size: 8px 8px;
  background-position: 0px 0px;
  width: 776px;
  height: var(--iconWidth);
  margin: auto;
  display:none;
}

.caption {
  opacity:0.5;
  font-style: italic;
  font-size:80%;  
}