.token-img { display:none; } /*#486680 preloaded images */

#title-container {
  width:100vw;
  height:9vh;
  padding:0px;
  margin:0px;
  overflow:hidden;
}

.side-bar{
  background-color:#364957A0;
  margin-left:.3cm;
  margin-right:.3cm;
  width:calc(100% - .6cm);;
  height:calc(100% - .6cm);
}

#titel-bar{
  background-color:#364957A0;
  margin:.3cm;
  margin-bottom:0cm;
  width:calc(100% - .6cm);;
  height:calc(100% - .3cm);
  
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-content: center;
  align-items: baseline;
  flex-wrap: wrap;
}

.nav-title {
  /* grow, shrink, basis; relativ or 0=off; basis width */
/*   flex: .5 0 7.5vh; */
/*   align-self: center; */
  padding: 0 72px;
  
/*   text-align:center; */
  font-family: ChorusFont;
  font-size:5.5vh;
  letter-spacing:9px;
  color:DarkGoldenRod;
  margin: auto
}

.nav-button{
  height: 100%;
/*   padding-top: 0; */
/* 	margin-top: -.15vh; */
  line-height: 100%;
  /*   float:right; */
  text-align:center;
  font-size:7vh;
  width:7.5vh; 
  border: none;
  color: DarkGoldenRod;
  text-decoration: none;
  padding-right: 1vh;
}

.nav-button-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  margin: 0;
  width: 42.5vh; /* (7,5+1)*#items; 7,5=width; 1=padd-right */
}
.nav-button:hover{
  font-size:9vh;
/* 	margin-top: -.3vh; */
  line-height: 83%;
  line-height: 77%;
}

.main-thg {
  height:91vh;
}

.short-thg {
  height:calc(91vh - .7cm);
}

@font-face {
  font-family: ChorusFont;
  src:url("/static/fonts/texgyrechorus-mediumitalic.otf");
}
@font-face {
  font-family: AbyssFont;
  src:url("/static/fonts/AbyssinicaSIL-Regular.ttf");
}

/* outer viewport height; change as needed */
.scroll-container {
  height: 100%;
  width: calc(100% - 24px);
  overflow-y: auto;          /* vertical scroll */
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #ddd;
/* 	background: #fafafa; */
}

/* two items per row using CSS grid */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns */
  gap: 12px;
  align-items: start;
}

.card, .bcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card img, .bcard img {
  width: 100%;
  height: auto;
  max-height: 180px;      /* control thumbnail height */
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.name {
  margin-top: 8px;
  font-size: 18px;
  color: #222;
  text-align: center;
  word-break: break-word;
  font-family: AbyssFont;
}


@media (max-width: 138vh) {
  #title-container {
  height:18vh;
  }
  .nav-button-group {
    margin: auto;
  }
  .main-thg {
    height:82vh;
  }
  .short-thg {
    height:calc(82vh - .7cm);
  }
}