:root {
  --icon-grid-margin-lr: 100px;
  --icon-size:  64px;
  --text-size:  0.8em;
  --heading-size:  3em;
  
}

@media (-webkit-device-pixel-ratio: 3) {
  :root {
  --icon-size:  128px;
  --text-size:  1.6em;
  --heading-size:  5em;

  }
  #search {
	  display:none
	 }
}

body {
  padding: 20px var(--icon-grid-margin-lr);
  background-color: #333333;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;

}

h3 { 
	font-size: var(--heading-size);
	padding: 0px 0px 10px 0px;
}

a:link , a:visited, a:hover, a:active {
  font-size: var(--text-size);

  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

#search { 
	position:absolute;
	top:2px;
	right:2px;
	width:20%;
	float:right;
}

#search input {
	display:block;
	height:20px;
	padding:5px;
	outline:none;
	border:1px solid #ccc;
	border-right:0;box-sizing:border-box;
	border-radius:10px;
	width:100%;
	font-size:10px;
} 

#search button {display:none; width:0} 

.icon-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.icon {
  flex: 0 0 var(--icon-size);
  margin: calc(var(--icon-size)/6);
  height: var(--icon-size);
  background-color: #eeeeee;
  border-radius: 10px;
  background-size: calc(var(--icon-size) * 0.8);
  background-repeat: no-repeat;
  background-position: center; 

  position: relative;
  margin-bottom: calc(var(--icon-size) * 0.3);
}

.icon > div {
  position: absolute;
  bottom: calc(var(--icon-size) * -0.3);
  text-align: center;
  width: var(--icon-size);

}

.fullicon { background-size: calc(var(--icon-size) * 1.05); }
.white { background-color: white; }

.something { background-image: url("");}

.gitlab { background-image: url("https://code.evenly.io/assets/gitlab_logo-7ae504fe4f68fdebb3c2034e36621930cd36ea87924c11ff65dbcb8ed50dca58.png");}
.google { background-image: url("https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png");}
.arteios { background-image: url("https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/c5/e0/df/c5e0dfe0-04de-bdcf-25ac-01a0c39aefa0/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/246x0w.png");}
.grafana { background-image: url("https://grafana.admin.evenly.io/public/img/apple-touch-icon.png");}
.belong { background-image: url("https://belong.io/assets/img/belong-icon.png");}
.serge { background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/c23e09e4-d087-40e8-b27f-368f118e4884-profile_image-70x70.png");}
.tvseries { background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/television_1f4fa.png");}
.movies { background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/popcorn_1f37f.png");}
.confluence { background-image: url("https://www.aptivous.com/wp-content/uploads/2019/03/Apt-website-icon-confluence.png");}
.jira { background-image: url("../img/jira.svg");}
.aapl { background-image: url("https://aapl.io/favicon-96x96.png");}
.corona { background-image: url("../img/corona.jpg");}
.fanboys { background-image: url("http://www.fanboys.fm/cover.jpg");}
.artetvos { background-image: url("../img/artetv.png");}
.domino { background-image: url("../img/dc.png");}
.vods { background-image: url("https://yt3.ggpht.com/a/AATXAJzhXOSM1AAZRs8yKCznl99XskojjdcTW1EiqMuk=s288-c-k-c0xffffffff-no-rj-mo");}
.youtube { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ0AAAC7CAMAAABIKDvmAAAAkFBMVEX/AAD/////OTn/5OT/9vb/ysr/dnb/19f/0tL/ior/nJz/kpL/39//tbX/TEz/Vlb/wcH/paX/oKD/8PD/6en/u7v/fHz/YGD/jo7/qqr/2dn/xsb/SEj/NDT/hYX/9PT/HBz/sLD/Kir/bGz/gID/EBD/XV3/QkL/Ly//UVH/cnL/IyP/ZWX/Pz//FRX/ICClOSYmAAAG6klEQVR4nO2da3eqOhBAMwqCgg8evq2i0ndP7///dzcItqiA0OrM0LC/nrVOJrtIhmSSCEBGi/H8diab5N817LgOiJv9T55vG6apj8b9uWt112E46eynw8Hzwy54FL8i2O0eVsPh034SrtfrmeXO+yPdNBe2791Y2k9teLLr46jb4X6w+2Vvf8vjrvU6fQu7PaevS0cekg3fWDqzyVOLuPclCFZva2urG+1qD08pG565tSbP1D38IZ+rTndr2DexsdGtJ+r+3Ib3D0u/9iMqtOG7dX0g8ghC/Yc2+n9NRcJkUd2GQx30HVnlPSA5Nvr8h41f8WyUt7H4Rx3t/ZmUtTGjjhSFwCxjw29Rx4mFe93GkjpGRPbXbMypI0RlWmyjRx0fMk9FNizq6ND5yLfhUsdGwCzPxpg6MhJG2TZs6riI8DJtvFOHRcQ0y0aHOioyRpc2TOqY6Hi/tPFAHRMhzrkNNceThM9zGy/UEZEyPrWhU8dDy+DUxpQ6HmL8ExvU0VDjpG0o/kMRYpW2ocbcXxFayobKyUaM/m1Do46FHuvbhsJZ+ZHVtw3V5v+y+Laxpw6FAfaXjU/qUBgwOtpoXqIieY1GNhbUkXBgerSh9Nf8F0cb6q2iZKElNpohJWKR2NhRB8KCUWKDOg4e9GIbHnUcPAhjGwZ1HDwYxDZUql8pIrbxl2shqxDb6FKHwQT/YEPdBdhTjIONFXUYTFgebPzxsuHSOAcbeO29vOK1VZ1ZZANxdqMFW7zGKhNGNtp47bUAtDe85ioyjGwgpqKtwwQ914/EXWQDcfmgFa/vcZ2ij2wgznwlNsDjuVUusoGYmB9tAIw4DuuetIE4D/htA2CN12xZbGkDMay0DbDZbSI0pY0JXnMnNoBd8qFLGx94zZ3ZgA2v5KMvbSB+tJ3bkMkHp1pER9pATIYubbBKPixpA7G5LBvgs0k+1gxsyOQjQIyhgAkLG1wmIz+Y2AB7gBhGHisQmMUb+TZYJB87ED5ic0U2YEM/Ww0CcbKn2IZMPqjLVkFg7u27YoN8CyoIzDKnqzbAJ90MAQKzcva6DYBlgBjQGRo7G5RbAHyGNuiSj7bArFcoaQOgjxhUCltglkeWtgEaSfJhCMw/Q3kbNMmHKTAz4io2KJIPU2AeTVPNBnjYyYcuMOucKtqQyQfu7oiRwHweK9tATj7G3G1AGzH52ArMWdqf2MBMPuY1sAEa1gKYIzC3Y/zQBoCBk3y49bCBVOLbq4sN2CCskNbHBoB+9+TDqpGN+ycf9bIB7fsuoVt1GGHT3LXGocs+Fz3Bv29i2q3Vs3HvX3WdbNx/TKmPDYx8Y1YXGyi56Kweb1Gk7xSrDjbQvmHrYANvfqPHe14UcOe+XM5z5hGo86IObxvIc+ZbxqtL+OspfbYrjxRrbSOmq9I067BL6QMP7mv0psA8WpR7/YbZ1PakMBjaoKv7stnZoKwJbDf1oin8ppY4hdbUmado9iCkAbFBbI35/hTR7F1K8cjEBo99bS8sbHDZ8/jKwAaf/bB7aSPAa475XulQ2kC8GZf5PvqutDHEa475GQs9aQMx6WF+/sZc2gjxmmN+NstI2kAc65mf2xOdVIP4Umd+ptNC2kD89R5t+Ihv7gr40gbiNHENzoLDPhnPZHvzamQDcfIrOkOS7zUDQWQD8XD3FusL3gfN2bMpOsg2eNM92OD04USJe7Ch+v2fR+ITvBE/VFgTn+7eXDQUE5/8T1QewA442GhueTzwGNvAXIllzBCae5e+WTc2UriJDdb5Mhp6YoPhpBwBdmKjuXgpAhIbyt+/HrE72sAs72FL52ijGVREPKTENpp7qKLFlKMNHsUktHhfNprLg8UnfNloXqPxSxSSW+mVZ5uy0Ux/2SkbTf4FKRvK/1QmJzboq5pp0U9sKH6bcgAnNjArAxnintlQ+z0KZzaUngCbX9hQOB99gAsbCi+5mRk2oEUdFRFryLKh6G8lXcSasgGYlwDwwc+xwa7wGwMD8mxQ70clYAn5NpRbWhlBkQ3FijlMKLahUjVH0D7v/IUN8FRZT3jSLvp+aUOVrNTJ6HmWDdTz14gY+lkdz7QBMGa7UeAm7EbZ3c6xIQeXv1ti/DDO63SuDQCdzSbmmzI9H1bL2ZDDi8tuX+IvWTleUYcLbUg2S+uvzIpNLX1zpbfXbBxo6053+h91b37MamL1jcJnopKNBG+hb3vdyZD6eJ1SPLaewpmjG5kj6S1spND8hbmUasLJx2uLxWj8+DLYh13LnY9Nwy71INzOxiUb316Y5rK/ddyeNeuuw850KBk8P+yCm/Q22LWeB8PpvhPKTvfc+Xasm6axsG3/2tugPDezUQnN89t5+J4WQxDX/6+3UVUbGgLqAAAAAElFTkSuQmCC");}
.fish { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Fish_icon.svg/1200px-Fish_icon.svg.png");}
.keybr { background-image: url("https://www.keybr.com/assets/favicon-96x96-934c99d37fc250c3.png"); background-size: calc(var(--icon-size) * 1.05); }
.wanikani { background-image: url("https://cdn.wanikani.com/assets/v03/wanikani-icon-196x-ee0a50f965fc8085271afe220abd6bd611875fec27a33e103ba0664b88329c76.png"); background-size: calc(var(--icon-size) * 1.05); }
.amazon { background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/de/Amazon_icon.png");}
.coronaberlin { background-image: url("https://static.thenounproject.com/png/3385797-200.png");}
.something { background-image: url("");}
.something { background-image: url("");}
.something { background-image: url("");}
.something { background-image: url("");}
.something { background-image: url("");}
.something { background-image: url("");}