html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  background-attachment: fixed !important;
}
[data-bs-theme=dark] body {
  background: linear-gradient(135deg, rgb(4, 29, 45) 0%, rgb(17, 73, 106) 25%, rgb(43, 24, 94) 50%, rgb(41, 17, 25) 75%, rgb(108, 13, 13) 100%);
}
[data-bs-theme=light] body {
  background: linear-gradient(135deg, rgb(30, 149, 229) 0%, rgb(66, 170, 231) 25%, rgb(118, 71, 240) 50%, rgb(234, 121, 158) 75%, rgb(108, 13, 13) 100%);
}

.content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.top-bar {
  height: 48px;
  background: rgb(from var(--bs-primary-bg-subtle) r g b/0.4);
  border-bottom: 0.5px solid rgb(from var(--bs-border-color) r g b/0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  flex-shrink: 0;
}
.top-bar a {
  text-decoration: none !important;
  color: var(--bs-emphasis-color);
}

.page-content {
  flex: 1;
  padding: 16px;
  box-sizing: border-box;
}

.bottom-nav {
  background: rgb(from var(--bs-primary-bg-subtle) r g b/0.4);
  border-top: 0.5px solid rgb(from var(--bs-border-color) r g b/0.6);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
}
.bottom-nav a {
  text-decoration: none !important;
  color: var(--bs-emphasis-color);
}

.index div:last-child {
  border: none !important;
}
.index a {
  text-decoration: none;
  color: inherit;
  padding: 0.5rem 0;
  display: block;
}