:host {
  box-sizing: border-box;
}
:host *,
:host *::before,
:host *::after {
  box-sizing: inherit;
}

[hidden] {
  display: none !important;
}

.site {
  font-family: var(--sl-font-sans);
	background-image: url(../data/image-home.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.site__title {
  width: 100%;
  align-items: flex-end;
  color: white;
  background-color: transparent;
}
.site__title-main {
  margin: 0;
  font-size: var(--sl-font-size-3x-large);
}
.site__title-subtitle {
  margin: 0;
  font-size: var(--sl-font-size-2x-large);
}
.site__toolbar {
  margin: var(--sl-spacing-medium);
  position: fixed;
  bottom: 0;
  right: 0;
}
/* shoelace : https://shoelace.style */

/* every-layout : https://every-layout.dev */
/* sidebar */
.sidebar > * {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.sidebar > * > * {
  margin: calc(var(--sidebar-gap) / 2);
  flex-basis: var(--sidebar-side-width);
}
.sidebar > * > :first-child {
  flex-basis: var(--sidebar-side-width);
  flex-grow: 1;
}
.sidebar > * > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(var(--sidebar-content-min-width) - var(--sidebar-gap));
}
/* stack */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}
.stack > * + * {
  margin-top: var(--sl-spacing-x-large);
}