:root {
  --header-font-size: 2.5vmin;
  --header-color: white;
  --header-margin-left: 1vmin;
  --header-margin-right: 1vmin;
  --header-margin-top: 0vmin;
  --header-description-font-size: 1.5vmin;
  --header-description-color:lightgray;

  --header-item-group-padding: 0vmin;
  --header-item-group-padding-left: 0.5vmin;
  --header-item-group-padding-right: 0vmin;
  --header-item-group-padding-top: 0.5vmin;
  --header-item-group-padding-bottom: 0vmin;
}

/* this is a scoreboared header item */ 
.sb-header-item-group {
  padding: var(--header-item-group-padding);
  padding-left: var(--header-item-group-padding-left);
  padding-right: var(--header-item-group-padding-right);
  padding-top: var(--header-item-group-padding-top);
  padding-bottom: var(--header-item-group-padding-bottom);
}

/* this is a scoreboared header item */ 
.sb-header-item {
    width: 18vw;
    font-size: var(--header-font-size);
    color: var(--header-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.sb-header-item-description {
    font-size: var(--header-description-font-size);
    color: var(--header-description-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.sb-header-item-description > div {
  font-size: var(--header-description-font-size);
  color: var(--header-description-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.sb_header_title-heading1 {
	color: var(--header-color);
	letter-spacing: 0.1rem;
	font-size: 3rem;
}

.sb_header_logo_container {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--list-element-bg);
	border-radius: var(--list-element-border-radius);
}

.sb_header_title_container {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--list-element-bg);
	border-radius: var(--list-element-border-radius);
}

.sb_header_datetime_container {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--list-element-bg);
	border-radius: var(--list-element-border-radius);
}

.sb_header_time-item {
    font-size: var(--header-font-size);
    color: var(--header-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

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

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