# https://stackoverflow.com/questions/24990554/how-to-include-a-font-ttf-using-css
@font-face {
    font-family: 'volkhov';
    src: url('/theme/fonts/volkhov-regular.ttf');
}

body {
  background-image: url(/theme/images/concrete.jpg);
  background-repeat: repeat;
  background-size: 50%;
  background-color: #ccc;
}

article div.gallery {
  /* display: grid; */
  display: inline-grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-rows: 1fr;
  grid-gap: .8rem;
  width: 95%;
  padding: 5px;
}

article div.gallery a {
  /* max-height: 100%; */
  /* width: 80%; */
  /* padding: 0.2rem; */
  display: inline-block;
  align-self: center;
  text-align-last: center;
  line-height: 1.2rem;
}

article div.gallery img {
  width: auto;
}

ul.tagcloud {
  list-style: none;
  padding: 0;
}

ul.tagcloud li {
  display: inline-block;
}

li.tag-1 {
  font-size: 150%;
}

li.tag-2 {
  font-size: 120%;
}

/* ... add li.tag-3 etc, as much as needed */

ul.tagcloud .list-group-item span.badge {
  background-color: grey;
  color: white;
}

.embedded-webgl {
  width: 100%;
  height: 100vh;
  border: 2px solid #eee;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .055);
  padding: 2px;
  /* background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23888888" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">loading ...</text></svg>') 0px 0px no-repeat; */
}

#@media (min-width:980px) {
#  .embedded-webgl {
#    width: 80vw;
#    height: 100vh;
#    margin: auto;
#  }
#}

.gallery span {
    background-color: silver;
    /* background-color: hsla(0, 0%, 100%, 0.5); */
    position: relative;
    /* bottom: 0; */
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
}