:root {
  --billberries-blue: #2979ed;	/* the billberries blue */
  
  --body-margin: 0vmin;			/* this is the margin outside the grid */
  --body-bg: black;				/* the canvas bg, only visible in case main-margin > 0 */
  --body-color: orange;         /* this is the default text color */

  --main-margin: 0vmin;         /* this is the margin outside the grid */
  --main-padding: 0vmin;
  --main-bg: gray;				/* today: black the grid area bg, only visible in case row-margin > 0 */
  --main-border-width: 1px;
  --main-border-style: none;	/* today: solid */
  --main-border-color: red;
  --main-border-radius: 0;  	/* old: 2vmin*/

  --item-bg: black;           	/* the bg color of a grid item */
  --item-margin: 0.5vmin;
  --item-padding: 0vmin;
  --item-border-width: 1px;
  --item-border-style: none;
  --item-border-color:  red;
  --item-border-radius: 0vmin;
  --item-font-size: 1.5vmin;	/* this is the default text size */
  --item-color: inherit;		/* this is the default text color */

  --bb-db-title-line1-color: white;
  --bb-db-title-line1-font-size: var(--xxs-font-size);
  --bb-db-title-line2-color: white;
  --bb-db-title-line2-font-size: var(--xs-font-size);
}

body {
  background-color: var(--body-bg);
  margin: var(--body-margin);
  color: var(--body-color);
  font-family: 'Titillium Web', sans-serif;
  line-height: 1 !important;
  overflow: hidden;
}

/* Alter the hover effect of general button elements */
button:hover {
  color: var(--billberries-blue);
  border-color: var(--billberries-blue);
}

/* generic helping class to center text in elements */
.sb-align_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Alter appearance of Links (a element) */
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--billberries-blue);
}
a > div:hover {
  color: var(--billberries-blue);
}

/* this is to reserve the entire viewport for the scoreboard and limit its size to the viewport size */
.grid-space {
  display: block;
  width: 99.5vw;  /* old: 99vw */
  height: 99.5vmin;
  background-color: var(--main-bg);
  margin: var(--main-margin);
  padding: var(--main-padding);
  border-width: var(--main-border-width);
  border-style: var(--main-border-style);
  border-color: var(--main-border-color);
  border-radius: var(--main-border-radius);
}

/* this is a scoreboared item, i.e. an area with a row/col */ 
.sb-item {
  display: inherit;
  background: var(--item-bg);
  margin: var(--item-margin);
  padding: var(--item-padding);
  border-width: var(--item-border-width);
  border-style: var(--item-border-style);
  border-color: var(--item-border-color);
  border-radius: var(--item-border-radius);
  font-size: var(--item-font-size); 
  color: var(--item-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.bb-logo-image{
  object-fit: contain;
  width: 90%;
  height: 90%;
}

.sb_header_logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.bb-db-title-line1 { 
  text-align: center;
  color: var(--bb-db-title-line1-color);
  font-size: var(--bb-db-title-line1-font-size);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.bb-db-title-line2 { 
  text-align: center;
  color: var(--bb-db-title-line2-color);
  font-size: var(--bb-db-title-line2-font-size);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.bb-s-font-size { 
  font-size: var(--s-font-size);
}

.bb-l-font-size { 
  font-size: var(--l-font-size);
}

.bb-xs-font-size { 
  font-size: var(--xs-font-size);
}

.bb-xl-font-size { 
  font-size: var(--xl-font-size);
}

.bb-xxs-font-size { 
  font-size: var(--xxs-font-size);
}

.bb-xxl-font-size { 
  font-size: var(--xxl-font-size);
}

.bb-xxxl-font-size { 
  font-size: var(--xxxl-font-size);
}