theme.css

H1 {
	text-align: left;
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 0.5em 0 1em 0;
}
H2 {
	margin: 0;
	padding: 0px 0em;
	text-align: left;
	font-size: 120%;
}
H3 {
	margin: 0;
	padding: 0px 0em;
	text-align: left;
	font-size: 90%;
}
H4 {
	margin: 0;
	padding: 0px 0em;
	text-align: left;
	font-size: 60%;
}
H5 {
	margin: 0;
	padding: 0px 0em;
	text-align: left;
	font-size: 30%;
}
H6 {
	margin: 0;
	padding: 0px 0em;
	text-align: left;
	font-size: 1%;
}

#menubar .badge {
  margin-left:5px;
}
.badge::before {
  content: '[';
}
.badge::after {
  content: ']';
}
.badge.badgeCategories::before {
  content:"(";
}
.badge.badgeCategories::after {
  content:")";
}

header {
  position: relative;
  height: 98vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
  	background-size: cover;
}
header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  	background-size: cover;
}
header .container {
  position: relative;
  z-index: 2;
  	background-size: cover;
}
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 58%;
  width: 4%;
  opacity: 0.5;
  z-index: 1;
  	background-size: cover;
}
@media (pointer: coarse) and (hover: none) {
  header {
    background: url(./themes/Ibufetum/img/a.mp4) no-repeat center center scroll;
	background-size: cover;
  }
  header video {
    display: none;
	background-size: cover;
  }	
}

/* Search in this set button CSS, 
Needs to be loaded herre because we don't use it on the search pages but on other pages
it won't be loaded if it goes in the search specific css
because of this it needs to specifically be added to each theme */
.mcs-side-results.search-in-set-button {
  /* margin-top:-15px; */
  margin-bottom: 30px;
}
.mcs-side-results.search-in-set-button p {
  margin:0;
}
.mcs-side-results.search-in-set-button a {
  color:#777;
  font-weight:600;
}
.mcs-side-results.search-in-set-button a::before {
  margin-right:10px;
}
.mcs-side-results.search-in-set-button a:hover {
  color:#777;
  font-weight:600;
  text-decoration: none;
}

.mcs-side-results {
  display: flex;
  flex-direction: row;
  gap: 5px;
  margin: 15px 0 0 15px;
}

.mcs-side-results > div {
  background: #555;
  box-shadow: 0px 2px #00000024;
  position: relative;
  padding: 4px 10px;
  border-radius: 5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  color: #ccc;
  width: fit-content;
}

.mcs-side-results > div:hover {
  background: #444;
  color: #777;
}
.mcs-side-results > div:active {
  transform: translateY(2px);
  box-shadow: none;
}

.mcs-side-results > div p{
  margin: 0 0 0 10px;
  white-space: nowrap;
  font-size: 15px;
}

.mcs-side-results .mcs-side-badge {
  border-radius: 25px;
  font-weight: 700;
  color: #fafafa;
  margin-left: 5px;
  padding: 2px 5px!important;
  font-size: 10px;
  background: #777;
}